import { type FC } from 'react'
import { useTranslation } from 'react-i18next'
import { type OtpVerifyType } from '../types/AuthTypes'
import { useFormik } from 'formik'
import * as Yup from 'yup'
import { useAuthStore } from '../store/AuthStore'
import Button from '../../../components/Button'
import OTPInput from 'react-otp-input'
import { useCountDown } from '../../../hooks/useCountDown'
import { Pages } from '../../../config/Pages'
import { useOtpVerify } from '../hooks/useAuthData'
import { type ErrorType } from '../../../helpers/types'
import { toast } from 'react-toastify'
import { setToken, setRefreshToken } from '../../../config/func'

const LoginStep2: FC = () => {

    const { t } = useTranslation('global')
    const { phone, setStepLogin, slug } = useAuthStore()
    const { value } = useCountDown(2, true)
    const otpVerify = useOtpVerify()

    const formik = useFormik<{ otp: string }>({
        initialValues: {
            otp: ''
        },
        validationSchema: Yup.object({
            otp: Yup.string()
                .required(t('errors.required'))
        }),
        onSubmit(values) {
            const params: OtpVerifyType = {
                phone: phone,
                otp: values.otp,
                slug: slug
            }
            otpVerify.mutate(params, {
                onSuccess(data) {
                    setToken(data?.data?.tokens?.accessToken?.token)
                    setRefreshToken(data?.data?.tokens?.refreshToken?.token)
                    window.location.href = Pages.dashboard
                },
                onError(error: ErrorType) {
                    toast.error(error?.response?.data?.error?.message[0])
                },
            })
        },
    })

    return (
        <div>
            <div className='mt-5'>
                <h2 className='lg:text-2xl font-bold'>
                    {t('auth.enter_otp')}
                </h2>
                <p className='text-description flex lg:flex-row flex-col lg:gap-1 gap-2 text-sm lg:mt-2 mt-3'>
                    <div className='flex gap-1'>
                        <div>{t('auth.verfify_code_text_1')}</div>
                        <div>{phone}</div>
                        <div>
                            {t('auth.verfify_code_text_2')}
                        </div>
                    </div>
                    <div onClick={() => setStepLogin(1)} className='text-black cursor-pointer'>
                        {t('auth.change_number')}
                    </div>
                </p>
            </div>

            <div className='mt-16'>
                <div className='text-sm'>
                    {t('auth.verify_code')}
                </div>
                <div className='mt-2 w-full flex justify-center dltr otp'>
                    <OTPInput
                        shouldAutoFocus
                        value={formik.values.otp}
                        numInputs={5}
                        inputType='tel'
                        containerStyle={{ direction: 'ltr', width: '100%' }}
                        onChange={(otp: string) => formik.setFieldValue('otp', otp)}
                        renderInput={(props) =>
                            <input
                                {...props}
                                type='tel'
                                autoComplete="one-time-code"
                                inputMode="numeric"
                                className='w-full min-w-[50px] h-[45px] sm:h-[50px] flex-1 mx-1 sm:mx-2 bg-white border border-gray-300 outline-0 rounded-[10px] text-center text-sm' />
                        }
                    />
                </div>

                {
                    formik.touched.otp && formik.errors.otp &&
                    <div className='text-xs mt-2 text-red-500'>{formik.errors.otp}</div>
                }

                <div className='flex mt-4 justify-end'>
                    <div className='flex gap-1 text-description text-xs'>
                        <div>{value}</div>
                        <div>{t('auth.counter_otp')}</div>
                    </div>
                </div>

            </div>


            <Button
                label={t('auth.login')}
                className='mt-8'
                onClick={() => formik.handleSubmit()}
                isloading={otpVerify.isPending}
            />

            {/* <div onClick={() => setStepLogin(3)} className='mt-6 cursor-pointer flex gap-2 items-center text-sm'>
                <p className='text-description'>
                    {t('auth.login_with_password')}
                </p>
                <img src={ArrowLeftIcon} className='w-5' />
            </div> */}
        </div>
    )
}

export default LoginStep2