import React from 'react'
import Link from 'next/link'
import isEmail from 'validator/lib/isEmail'
import axios from 'axios'

import {FormController, Input, Button} from '~/components/form'
import useErrorReducer from '../hooks/errorReducer'

export default function Register(){
  const [errors, dispatch] = useErrorReducer()

  const submit = async (values)=>{
    try {
      const {data} = await axios.post(`/api/users`, values)
      console.log(data)
    } catch (err) {
      if(!err.response || err.response.status !== 422) throw err;

      dispatch({
        type: 'set_errors',
        errors: err.response.data.errors
      })
    }
  }

  return (
    <FormController errors={errors} errorDispatch={dispatch} onSubmit={submit}>
      <h1>Register</h1>
      <Input label="Email" type="text" name="email" validate={value=>isEmail(value)} hint="Enter a valid email address" />
      <Input label="Password" type="password" name="password" validate={value=>(value.length >= 8)} hint="Password must be at least 8 characters long" />
      <Input label="Repeat password" type="password" name="password2" validate={(value, fields)=>(value  === fields.password.value)} hint="Passwords must match" />
      <Button type="submit">Register</Button>
      <p>Already have an account? <Link href="/login"><a>Login here</a></Link>.</p>
    </FormController>
  )
}