import React from 'react'
import { useForm } from './forms-hook'

const formDefinition = {
  username: { value: '', isValid: value => value.length > 0 },
  password: { value: '', isValid: value => value.length > 0 }
}

const Login: React.StatelessComponent = () => {
  const [form, setField] = useForm(formDefinition)

  return (
    <form
      onSubmit={e => {
        e.preventDefault()
        console.log(form)
      }}>
      <h1>Sign In</h1>

      <label>Username</label>
      <input
        value={form.username.value}
        className={form.username.isPristine || form.username.isValid ? "" : "error"}
        onChange={e => setField('username', e.target.value)}
      />

      <label>Password</label>
      <input
        type="password"
        value={form.password.value}
        className={form.password.isPristine || form.password.isValid ? "" : "error"}
        onChange={e => setField('password', e.target.value)}
      />

      <button type="submit" disabled={!form.isValid}>
        Sign In
      </button>
    </form>
  )
}

export default Login