import React, { useState } from 'react';
import { Input, Button, FormItem, FormContainer, Alert } from '@/components/ui';
import { ActionLink } from '@/components/shared';
import { apiForgotPassword } from '@/services/AuthService';
import useTimeOutMessage from '@/utils/hooks/useTimeOutMessage';
import { Field, Form, Formik } from 'formik';
import * as Yup from 'yup';
import { t } from 'i18next';

const validationSchema = Yup.object().shape({
  email: Yup.string().required(t('PLEASE_ENTER_YOUR_EMAIL')),
});

const ForgotPasswordForm = (props) => {
  const { disableSubmit = false, className, signInUrl = '/sign-in' } = props;

  const [emailSent, setEmailSent] = useState(false);

  const [message, setMessage] = useTimeOutMessage();

  const onSendMail = async (values, setSubmitting) => {
    setSubmitting(true);
    try {
      const resp = await apiForgotPassword(values);
      if (resp.data) {
        setSubmitting(false);
        setEmailSent(true);
      }
    } catch (errors) {
      setMessage(errors?.response?.data?.errorCodes[0].errorMessages || errors.toString());
      setSubmitting(false);
    }
  };

  return (
    <div className={className}>
      <div className="mb-6">
        {emailSent ? (
          <>
            <h3 className="mb-1">Check your email</h3>
            <p>{t('We have sent a password recovery instruction to your email')}</p>
          </>
        ) : (
          <>
            <h3 className="mb-1">{t('Forgot Password')}</h3>
            <p>{t('Please enter your email address to receive a verification code')}</p>
          </>
        )}
      </div>
      {message && (
        <Alert className="mb-4" type="danger" showIcon>
          {message}
        </Alert>
      )}
      <Formik
        initialValues={{
          email: '',
        }}
        validationSchema={validationSchema}
        onSubmit={(values, { setSubmitting }) => {
          if (!disableSubmit) {
            onSendMail(values, setSubmitting);
          } else {
            setSubmitting(false);
          }
        }}
      >
        {({ touched, errors, isSubmitting }) => (
          <Form>
            <FormContainer>
              <div className={emailSent ? 'hidden' : ''}>
                <FormItem invalid={errors.email && touched.email} errorMessage={errors.email}>
                  <Field type="email" autoComplete="off" name="email" placeholder={t('Email')} component={Input} />
                </FormItem>
              </div>
              <Button block loading={isSubmitting} variant="solid" type="submit">
                {emailSent ? t('Resend Email') : t('Send Email')}
              </Button>
              <div className="mt-4 text-center">
                <ActionLink to={signInUrl}>{t('Sign in')}</ActionLink>
              </div>
            </FormContainer>
          </Form>
        )}
      </Formik>
    </div>
  );
};

export default ForgotPasswordForm;
