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 { TenantSelector } from '@/components/shared'
import { ROUTES_ENUM } from '@/routes/route.constant'
import { store, useStoreActions } from '@/store'
import Captcha from '@/components/shared/Captcha'
import { useLocalization } from '@/utils/hooks/useLocalization'
import PageTitle from '@/components/shared/PageTitle'
import { TurnstileInstance } from '@marsidev/react-turnstile'
import { useEffect, useRef, useState } from 'react'
import ActionLink from '@/components/shared/ActionLink'

type FormSchema = {
  email: string
  captchaResponse: string
}

const validationSchema = Yup.object().shape({
  email: Yup.string().required(),
  captchaResponse: Yup.string().required(),
})

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

  const { message, error, sendConfirmationCode } = useAccount()
  const { setWarning } = useStoreActions((actions) => actions.base.messages)
  const captchaRef = useRef<TurnstileInstance>(null)
  const [captchaKey, setCaptchaKey] = useState(0)

  useEffect(() => {
    setWarning('')
  }, [setWarning])

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

    try {
      const result = await sendConfirmationCode(values)
      if (result?.status !== 'failed') {
        setWarning('')
      }
    } finally {
      setFieldValue('captchaResponse', '')
      captchaRef.current?.reset()
      setCaptchaKey((key) => key + 1)
      setSubmitting(false)
    }
  }

  return (
    <>
      <PageTitle title={translate('::' + 'Abp.Account.SendConfirmationCode')} />

      {!message && (
        <div className="mb-8">
          <h3 className="mb-1">{translate('::Abp.Account.SendConfirmationCode')}</h3>
          <p>{translate('::Abp.Account.SendConfirmationCode.Message')}</p>
        </div>
      )}
      <div>
        {message && (
          <Alert showIcon className="mb-4" type="success">
            {message}
          </Alert>
        )}
        {error && (
          <Alert showIcon className="mb-4" type="danger">
            {error}
          </Alert>
        )}
        {message ? (
          <div className="mt-4 text-center">
            <span>{translate('::Abp.Account.Backto')} </span>
            <ActionLink to={ROUTES_ENUM.authenticated.login}>
              {translate('::Abp.Account.SignIn')}
            </ActionLink>
          </div>
        ) : (
          <>
            <TenantSelector />
            <Formik
              initialValues={{
                email: userName,
                captchaResponse: '',
              }}
              validationSchema={validationSchema}
              onSubmit={(values, { setSubmitting, setFieldValue }) => {
                onSubmit(values, setSubmitting, setFieldValue)
              }}
            >
              {({ touched, errors, isSubmitting, setFieldValue }) => (
                <Form>
                  <FormContainer>
                    <FormItem
                      label={translate('::Abp.Account.EmailAddress')}
                      invalid={errors.email && touched.email}
                      errorMessage={errors.email}
                    >
                      <Field
                        type="email"
                        autoComplete="off"
                        name="email"
                        placeholder={translate('::Abp.Account.EmailAddress')}
                        component={Input}
                      />
                    </FormItem>
                    <Captcha
                      key={captchaKey}
                      ref={captchaRef}
                      onError={() => setFieldValue('captchaResponse', '')}
                      onExpire={() => setFieldValue('captchaResponse', '')}
                      onSuccess={(token: string) => setFieldValue('captchaResponse', token)}
                    />
                    <Button block loading={isSubmitting} variant="solid" type="submit">
                      {isSubmitting ? translate('::SendingCode') : translate('::SendCode')}
                    </Button>
                    <div className="mt-4 text-center">
                      <span>{translate('::Abp.Account.Backto')} </span>
                      <ActionLink to={ROUTES_ENUM.authenticated.login}>
                        {translate('::Abp.Account.SignIn')}
                      </ActionLink>
                    </div>
                  </FormContainer>
                </Form>
              )}
            </Formik>
          </>
        )}
      </div>
    </>
  )
}

export default SendConfirmationCode