import { FC } from 'react'
import Input from '../../../components/Input'
import { useTranslation } from 'react-i18next'
import { LoginType } 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 { isEmail } from '../../../config/func'
import { useCheckHasAccount, useLoginWithOtp } from '../hooks/useAuthData'
import { toast } from '../../../components/Toast';
import { ErrorType } from '../../../helpers/types'

const LoginStep1: FC = () => {

    const { t } = useTranslation('global')
    const { setPhone, phone, setStepLogin, setEmail } = useAuthStore()
    const loginWithOtp = useLoginWithOtp()
    const checkHasAccount = useCheckHasAccount()

    const formik = useFormik<LoginType>({
        initialValues: {
            phone_email: phone,
        },
        validationSchema: Yup.object({
            phone_email: Yup.string()
                .required(t('errors.required'))
        }),
        onSubmit(values) {
            if (isEmail(values.phone_email)) {
                setEmail(values.phone_email)
                checkHasAccount.mutate({ email: values.phone_email }, {
                    onSuccess() {
                        setStepLogin(2)
                    },
                    onError(error: ErrorType) {
                        toast(error?.response?.data?.error?.message[0], 'error')
                    },
                })
            } else {
                setPhone(values.phone_email)
                loginWithOtp.mutate({ phone: values.phone_email }, {
                    onSuccess() {
                        setStepLogin(2)
                        toast(t('auth.otp_sent'), 'success')
                    },
                    onError(error: ErrorType) {
                        toast(error?.response?.data?.error?.message[0], 'error')
                    },
                })
            }
        },
    })

    return (
        <div>
            <div className='mt-5'>
                <h2 className='text-2xl font-bold'>
                    {t('auth.welcome')}
                </h2>
                <p className='text-description text-sm mt-2'>
                    {t('auth.enter_info_login')}
                </p>
            </div>

            <div className='mt-16'>
                <Input
                    label={t('auth.mobile_or_email')}
                    placeholder={t('auth.enter_mobile_or_email')}
                    type='text'
                    dir='ltr'
                    name='phone_email'
                    onChange={formik.handleChange}
                    value={formik.values.phone_email}
                />

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

            </div>


            <Button
                label={t('auth.next')}
                className='mt-8'
                onClick={() => formik.handleSubmit()}
                isLoading={loginWithOtp.isPending || checkHasAccount.isPending}
            />

        </div>
    )
}

export default LoginStep1