import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import { 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 ArrowLeftIcon from '../../../assets/images/arrow-left.svg'
import { Pages } from '../../../config/Pages'
import { useOtpVerify } from '../hooks/useAuthData'
import { 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 } = useAuthStore()
    const { value } = useCountDown(2, true)
    const otpVerify = useOtpVerify()

    const formik = useFormik<OtpVerifyType>({
        initialValues: {
            phone: phone,
            code: ''
        },
        validationSchema: Yup.object({
            code: Yup.string()
                .required(t('errors.required'))
        }),
        onSubmit(values) {
            const params: OtpVerifyType = {
                phone: phone,
                code: values.code
            }
            otpVerify.mutate(params, {
                onSuccess(data) {
                    setToken(data?.data?.accessToken?.token)
                    setRefreshToken(data?.data?.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.code}
                        numInputs={5}
                        inputType='tel'
                        onChange={(otp: string) => formik.setFieldValue('code', otp)}
                        renderInput={(props) => <input {...props} className='w-full h-[50px] flex-1 mx-2  bg-white border rounded-2.5' />}
                    />
                </div>

                {
                    formik.touched.code && formik.errors.code &&
                    <div className='text-xs mt-2 text-red-500'>{formik.errors.code}</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