import { useCallback, useState } from 'react'
import { Link } from 'react-router-dom'
import {
  Button,
  FormControl,
  FormErrorMessage,
  Input,
  Link as ChakraLink,
  Heading,
} from '@chakra-ui/react'
import {
  Field,
  FieldAttributes,
  FieldProps,
  Form,
  Formik,
  FormikHelpers,
} from 'formik'
import * as Yup from 'yup'
import cx from 'classnames'
import { Helmet } from 'react-helmet-async'
import AccountAPI from '@/client/idp/account'
import Logo from '@/components/common/logo'
import LayoutFull from '@/components/layout/layout-full'

type FormValues = {
  email: string
}

const ForgotPasswordPage = () => {
  const formSchema = Yup.object().shape({
    email: Yup.string()
      .email('Email is not valid')
      .required('Email is required'),
  })
  const [isCompleted, setIsCompleted] = useState(false)

  const handleSubmit = useCallback(
    async (
      { email }: FormValues,
      { setSubmitting }: FormikHelpers<FormValues>,
    ) => {
      try {
        await AccountAPI.sendResetPasswordEmail({
          email,
        })
        setIsCompleted(true)
      } finally {
        setSubmitting(false)
      }
    },
    [],
  )

  return (
    <LayoutFull>
      <>
        <Helmet>
          <title>Forgot Password</title>
        </Helmet>
        <div
          className={cx(
            'flex',
            'flex-col',
            'items-center',
            'gap-2.5',
            'w-full',
          )}
        >
          <div className={cx('w-[64px]')}>
            <Logo isGlossy={true} />
          </div>
          <Heading className={cx('text-heading')}>Forgot Password</Heading>
          {isCompleted ? (
            <span className={cx('text-center')}>
              If your email belongs to an account, you will receive the recovery
              instructions in your inbox shortly.
            </span>
          ) : (
            <>
              <span className={cx('text-center')}>
                Please provide your account Email where we can send you the
                password recovery instructions.
              </span>
              <Formik
                initialValues={{
                  email: '',
                }}
                validationSchema={formSchema}
                validateOnBlur={false}
                onSubmit={handleSubmit}
              >
                {({ errors, touched, isSubmitting }) => (
                  <Form className={cx('w-full')}>
                    <div
                      className={cx(
                        'flex',
                        'flex-col',
                        'items-center',
                        'gap-1.5',
                      )}
                    >
                      <Field name="email">
                        {({ field }: FieldAttributes<FieldProps>) => (
                          <FormControl
                            isInvalid={
                              errors.email && touched.email ? true : false
                            }
                          >
                            <Input
                              {...field}
                              id="email"
                              placeholder="Email"
                              disabled={isSubmitting}
                            />
                            <FormErrorMessage>{errors.email}</FormErrorMessage>
                          </FormControl>
                        )}
                      </Field>
                      <Button
                        className={cx('w-full')}
                        variant="solid"
                        colorScheme="blue"
                        type="submit"
                        isLoading={isSubmitting}
                      >
                        Send Password Recovery Instructions
                      </Button>
                    </div>
                  </Form>
                )}
              </Formik>
              <div
                className={cx('flex', 'flex-row', 'items-center', 'gap-0.5')}
              >
                <span>Password recovered?</span>
                <ChakraLink as={Link} to="/sign-in">
                  Sign In
                </ChakraLink>
              </div>
            </>
          )}
        </div>
      </>
    </LayoutFull>
  )
}

export default ForgotPasswordPage