import React from 'react'
import { Link } from 'react-router-dom'
import PropTypes from 'prop-types'
// Import React-JSS
import injectSheet from 'react-jss'

/* IMPORT COMPONENTS */

const styles = {
  cardCSS: {
    margin: '100px auto',
    width: '300px'
  },
  buttonCSS: {
    width: '260px'
  },
  linkCSS: {
    textAlign: 'right',
    marginTop: '10px'
  }
}

const LoginV = (props) => {
  return (
    <div className={props.classes.cardCSS}>
      <div className='card'>
        <div className='card-body'>
          <form onSubmit={props.submit}>
            <div className='form-group'>
              <label htmlFor='emailInput'>Email address</label>
              <input type='email' className='form-control' id='emailInput' aria-describedby='emailHelp' placeholder='Enter email' value={props.email} onChange={props.changeEmail} />
            </div>
            <div className='form-group'>
              <label htmlFor='passwordInput'>Password</label>
              <input type='password' className='form-control' id='passwordInput' placeholder='Password' value={props.password} onChange={props.changePassword} />
            </div>
            <button type='submit' className={`btn btn-primary ${props.classes.buttonCSS}`}>Submit</button>
          </form>
          <div className={props.classes.linkCSS}>
            <Link to='/recovery'>Forgot Password</Link>
          </div>
        </div>
      </div>
    </div>
  )
}

LoginV.propTypes = {
  email: PropTypes.string,
  password: PropTypes.string,
  changeEmail: PropTypes.func,
  changePassword: PropTypes.func,
  submit: PropTypes.func,
  classes: PropTypes.object
}

export default injectSheet(styles)(LoginV)
