import {useState} from 'react'
import useUser from 'hooks/useUser'
import submitForm from 'helpers/submitForm'
import {Layout, Form, Splash} from 'components'

const Register = () => {
  const [errorMsg, setErrorMsg] = useState('')
  const [loading, setLoading] = useState(false)
  const {mutateUser} = useUser({
    redirectToVerify: true,
  })

  const handleSubmit = async e => {
    setLoading(true)
    await submitForm(e, '/api/register', mutateUser, setErrorMsg)
    setLoading(false)
  }

  return (
    <Layout>
      {loading
        ? <Splash fixed />
        : (
          <Form
            errorMessage={errorMsg}
            onSubmit={handleSubmit}
          />
        )}
    </Layout>
  )
}

export default Register