'use client'
import { Dialog, DialogActions, DialogContent, Typography } from '@mui/material'
import { Grid2 } from '@mui/material'
import { useTranslations } from 'next-intl'
import CustomTextField from '@/@core/components/mui/TextField'
import { useForm, Controller } from 'react-hook-form'
import { useAtom, useAtomValue, useSetAtom } from 'jotai'
import { codeModalAtom, emailVerificationModalAtom } from '@/components/store/state-store-email-status'
import OtpInput from 'react-otp-input'
import { useState } from 'react'
import { useSendCode } from '@/@core/hooks/reset_password'
import Button from '@/@core/components/mui/Button'

type FormData = {
  password: any
  confirm_password: any
  code: any
}

const DialogCodeVerfication = () => {
  const t = useTranslations('RESET-PASSWORD')
  const [codeModal, setCodeModal] = useAtom(codeModalAtom)
  const [otp, setOtp] = useState('')

  const setLast = useSetAtom(emailVerificationModalAtom)
  const emailVal = useAtomValue(codeModalAtom)
  const {
    control,
    handleSubmit,
    formState: { errors },
    register,
    reset,
    watch
  } = useForm<FormData>({
    defaultValues: { code: '' }
  })

  const { mutate, isPending, isError } = useSendCode()

  const handleClose = () => {
    setCodeModal({ open: false, code: null })
  }
  const onSubmit = (data: FormData) => {
    mutate(
      {
        identifier: emailVal?.email,
        code: data?.code
      },
      {
        onSuccess() {
          setLast({ open: true, code: data?.code, email: emailVal.email })
          reset()
          handleClose()
        },
        onError() {
          reset()
        }
      }
    )
  }

  return (
    <Dialog open={codeModal.open} onClose={handleClose} maxWidth='xs' fullWidth>
      <DialogContent>
        <Grid2 sx={{ display: 'flex', flexDirection: 'column', gap: 2, alignItems: 'center' }}>
          <Typography sx={{ fontWeight: 'bold', fontSize: '20px', textAlign: 'center' }}>{t('ENTER_OTP')}</Typography>

          <Controller
            control={control}
            name='code'
            rules={{ required: t('code_required') }}
            render={({ field }) => (
              <OtpInput
                {...field}
                value={field.value}
                onChange={val => {
                  field.onChange(val)
                  setOtp(val)
                }}
                inputType='number'
                numInputs={6}
                shouldAutoFocus
                renderInput={props => <CustomTextField {...props} variant='outlined' size='small' dir='ltr' />}
                inputStyle={{
                  width: '3rem',
                  height: '3rem',
                  margin: '0 0.5rem',
                  fontSize: '2rem',
                  borderRadius: 4,
                  direction: 'ltr'
                }}
                containerStyle={{ direction: 'ltr' }}
              />
            )}
          />
        </Grid2>
      </DialogContent>
      <DialogActions sx={{ justifyContent: 'end', gap: 'px' }}>
        <Button color='error' variant='outlined' onClick={handleClose}>
          {t('cancel')}
        </Button>
        <Button
          color='primary'
          variant='contained'
          onClick={handleSubmit(onSubmit)}
          isLoading={isPending}
          disabled={watch('code')?.length !== 6}
        >
          {t('submit')}
        </Button>
      </DialogActions>
    </Dialog>
  )
}

export default DialogCodeVerfication