import useAccount from '@/utils/hooks/useAccount'
import { Alert, Button, FormContainer, FormItem, Input } from '@/components/ui'
import { Field, Form, Formik } from 'formik'
import * as Yup from 'yup'
import { ActionLink } from '@/components/shared'
import { ROUTES_ENUM } from '@/constants/route.constant'
import { store } from '@/store'
import Captcha from '@/components/shared/Captcha'

type FormSchema = {
  email: string
  captchaResponse: string
}

const validationSchema = Yup.object().shape({
  email: Yup.string().required('Please enter your user email'),
  captchaResponse: Yup.string().required(),
})

const SendConfirmationCode = () => {
  const { userName } = store.getState().auth.user

  const { message, error, sendConfirmationCode } = useAccount()

  const onSubmit = async (values: FormSchema, setSubmitting: (isSubmitting: boolean) => void) => {
    setSubmitting(true)

    await sendConfirmationCode(values)

    setSubmitting(false)
  }

  return (
    <>
      <div className="mb-8">
        <h3 className="mb-1">Confirm Email</h3>
        <p>Please enter your email to receive new confirmation code</p>
      </div>
      <div>
        {message && (
          <Alert showIcon className="mb-4" type="success">
            {message}
          </Alert>
        )}
        {error && (
          <Alert showIcon className="mb-4" type="danger">
            {error}
          </Alert>
        )}
        <Formik
          initialValues={{
            email: userName,
            captchaResponse: '',
          }}
          validationSchema={validationSchema}
          onSubmit={(values, { setSubmitting }) => {
            onSubmit(values, setSubmitting)
          }}
        >
          {({ touched, errors, isSubmitting, setFieldValue }) => (
            <Form>
              <FormContainer>
                <FormItem
                  label="Email"
                  invalid={errors.email && touched.email}
                  errorMessage={errors.email}
                >
                  <Field
                    type="email"
                    autoComplete="off"
                    name="email"
                    placeholder="Email"
                    component={Input}
                  />
                </FormItem>
                <Captcha
                  onError={() => setFieldValue('captchaResponse', '')}
                  onExpire={() => setFieldValue('captchaResponse', '')}
                  onSuccess={(token: string) => setFieldValue('captchaResponse', token)}
                />
                <Button block loading={isSubmitting} variant="solid" type="submit">
                  {isSubmitting ? 'Sending code...' : 'Send Code'}
                </Button>
                <div className="mt-4 text-center">
                  <span>Back to </span>
                  <ActionLink to={ROUTES_ENUM.account.login}>Login</ActionLink>
                </div>
              </FormContainer>
            </Form>
          )}
        </Formik>
      </div>
    </>
  )
}

export default SendConfirmationCode