import { FC } from 'react'
import Input from '../../../components/Input'
import { useTranslation } from 'react-i18next'
import { LoginWithPasswordType } from '../types/AuthTypes'
import { useFormik } from 'formik'
import * as Yup from 'yup'
import { useAuthStore } from '../store/AuthStore'
import Error from '../../../components/Error'
import Button from '../../../components/Button'
import { Link } from 'react-router-dom'
import { Pages } from '../../../config/Pages'
import ArrowLeftIcon from '../../../assets/images/arrow-left.svg'
import { useLoginWithPassword } from '../hooks/useAuthData'
import { toast } from 'react-toastify'
import { ErrorType } from '../../../helpers/types'
import { setRefreshToken } from '../../../config/func'
import { setToken } from '../../../config/func'

const LoginStep3: FC = () => {

    const { t } = useTranslation('global')
    const { setStepLogin, email } = useAuthStore()
    const loginWithPassword = useLoginWithPassword()

    const formik = useFormik<LoginWithPasswordType>({
        initialValues: {
            password: '',
            email: email
        },
        validationSchema: Yup.object({
            password: Yup.string()
                .required(t('errors.required'))
        }),
        onSubmit(values) {
            loginWithPassword.mutate(values, {
                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='text-2xl font-bold'>
                    {t('auth.enter_password_step3')}
                </h2>
                <p className='text-description text-sm mt-2'>
                    {t('auth.enter_your_password')}
                </p>
            </div>

            <div className='mt-16'>
                <Input
                    label={t('auth.password')}
                    type='password'
                    className='text-right'
                    name='password'
                    onChange={formik.handleChange}
                    value={formik.values.password}
                    error_text={formik.touched.password && formik.errors.password ? formik.errors.password : ''}
                />

                {
                    formik.touched.password && formik.errors.password &&
                    <Error
                        errorText={formik.errors.password}
                    />
                }

            </div>
            <Link to={Pages.auth.forgotPassword}>
                <div className='mt-4 flex justify-end text-sm'>
                    {t('auth.forgot_password')}
                </div>
            </Link>

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

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

export default LoginStep3