import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import Input from '../../../components/Input'
import Button from '../../../components/Button'
import { useFormik } from 'formik'
import { ChangePasswordType } from '../types/SettingTypes'
import * as Yup from 'yup'
import { toast } from '../../../components/Toast'
import { useChangePassword } from '../hooks/useSettingData'
import { ErrorType } from '../../../helpers/types'
import { TickCircle } from 'iconsax-react'

const ChangePassword: FC = () => {

    const changePassword = useChangePassword()
    const { t } = useTranslation('global')

    const formik = useFormik<ChangePasswordType>({
        initialValues: {
            oldPassword: '',
            newPassword: '',
            repeatPassword: ''
        },
        validationSchema: Yup.object({
            oldPassword: Yup.string()
                .required(t('errors.required')),
            newPassword: Yup.string()
                .required(t('errors.required')),
            repeatPassword: Yup.string()
                .required(t('errors.required')),
        }),
        onSubmit: (values) => {
            if (values.newPassword !== values.repeatPassword) {
                toast(t('errors.password_not_match'), 'error')
            } else {
                changePassword.mutate(values, {
                    onSuccess: () => {
                        toast(t('setting.password_changed'), 'success')
                        formik.resetForm()
                    },
                    onError: (error: ErrorType) => {
                        toast(error.response?.data?.error?.message[0], 'error')
                    }
                })
            }
        }
    })

    return (
        <div className='mt-10 bg-white p-8 rounded-3xl'>
            <div>
                {t('setting.change_password')}
            </div>

            <div className='flex xl:flex-row flex-col xl:gap-10 gap-4'>
                <div className='flex-1'>
                    <Input
                        type='password'
                        className='mt-6'
                        placeholder={t('setting.current_password')}
                        name='oldPassword'
                        onChange={formik.handleChange}
                        error_text={formik.touched.oldPassword && formik.errors.oldPassword ? formik.errors.oldPassword : ''}
                    />
                    <Input
                        type='password'
                        className='mt-6'
                        placeholder={t('setting.new_password')}
                        name='newPassword'
                        onChange={formik.handleChange}
                        error_text={formik.touched.newPassword && formik.errors.newPassword ? formik.errors.newPassword : ''}
                    />
                    <Input
                        type='password'
                        className='mt-6'
                        placeholder={t('setting.reapeat_password')}
                        name='repeatPassword'
                        onChange={formik.handleChange}
                        error_text={formik.touched.repeatPassword && formik.errors.repeatPassword ? formik.errors.repeatPassword : ''}
                    />

                    <div className='mt-9 xl:block hidden'>
                        <Button
                            className='w-fit px-4'
                            onClick={() => formik.handleSubmit()}
                        >
                            <div className='flex gap-2 items-center'>
                                <TickCircle size={20} color='white' />
                                <div>
                                    {t('setting.save_change')}
                                </div>
                            </div>
                        </Button>
                    </div>
                </div>

                <div className='flex-1 xl:p-8 p-4 bg-[#EEF0F7] rounded-3xl text-sm'>
                    <div>
                        {t('setting.password_is')}
                    </div>
                    <ul className='list-disc ps-4 flex flex-col gap-2 text-xs mt-4'>
                        <li>
                            {t('setting.min-8')}
                        </li>
                        <li>
                            {t('setting.mix_charachter_number')}
                        </li>
                        <li>
                            {t('setting.exsist_number')}
                        </li>
                        <li>
                            {t('setting.exsist_special_character')}
                        </li>
                    </ul>
                </div>

                <div className=' xl:hidden block'>
                    <Button
                        className='w-32 hidden xl:block'
                        onClick={() => formik.handleSubmit()}
                    >
                        <div className='flex gap-2 items-center'>
                            <TickCircle size={20} color='white' />
                            <div>
                                {t('setting.save_change')}
                            </div>
                        </div>
                    </Button>
                </div>

                <div className='justify-end xl:hidden flex'>
                    <Button
                        className='xl:w-fit px-10'
                        onClick={() => formik.handleSubmit()}
                        loading={changePassword.isPending}
                    >
                        <div className='flex justify-center gap-2 items-center'>
                            <TickCircle size={20} color='white' />
                            <div>
                                {t('setting.save_change')}
                            </div>
                        </div>
                    </Button>
                </div>
            </div>

            <div className='h-14'></div>
        </div>
    )
}

export default ChangePassword