import { routes, navigate } from '@redwoodjs/router'
import { useAuth } from '@redwoodjs/auth'
import { Form, Submit } from '@redwoodjs/forms'
import { toast } from '@redwoodjs/web/toast'

import InputTextForm from 'src/components/InputTextForm'
import MainLayout from 'src/layouts/MainLayout'
import Seo from 'src/components/Seo/Seo'

const AccountRecoveryPage = () => {
  const { client } = useAuth()
  const onSubmit = ({ email }) => {
    client
      .requestPasswordRecovery(email)
      .then(() => {
        toast.success('Email sent')
        setTimeout(() => {
          navigate(routes.home())
        }, 500)
      })
      .catch(() => {
        toast.error('Problem sending email')
      })
  }
  return (
    <MainLayout>
      <Seo
        title="Account recovery"
        description="Send recovery email"
        lang="en-US"
      />

      <section className="max-w-md mx-auto mt-20">
        <h2 className="text-xl text-ch-gray-300 pb-4">Send recovery email</h2>
        <Form onSubmit={onSubmit}>
          <div
            className="grid items-center gap-2"
            style={{ gridTemplateColumns: 'auto 1fr' }}
          >
            <span className="capitalize text-ch-gray-300 text-sm">email</span>
            <InputTextForm
              className="text-xl"
              name="email"
              validation={{
                required: true,
                pattern: {
                  value: /[^@]+@[^.]+\..+/,
                  message: 'please enter a valid email address',
                },
              }}
            />
            <Submit className="col-start-2 mt-4 bg-ch-purple-400 bg-opacity-50 hover:bg-opacity-80 text-ch-gray-300 flex h-10 flex-shrink-0 justify-center items-center px-4 rounded">
              Send email
            </Submit>
          </div>
        </Form>
      </section>
    </MainLayout>
  )
}

export default AccountRecoveryPage
