import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import Button from '../../components/Button'
import { TickCircle, TickSquare } from 'iconsax-react'
import SwitchComponent from '../../components/Switch'
import Input from '../../components/Input'
import { useFormik } from 'formik'
import { CreateBankType } from './types/CardBankTypes'
import * as Yup from 'yup'
import { useCreateBank } from './hooks/useCardBankData'
import { useNavigate } from 'react-router-dom'
import { Pages } from '../../config/Pages'
import { ErrorType } from '../../helpers/types'
import { toast } from 'react-toastify'

const CreateBankCard: FC = () => {

    const navigate = useNavigate()
    const { t } = useTranslation('global')
    const createBank = useCreateBank()

    const formik = useFormik<CreateBankType>({
        initialValues: {
            accountOwnerName: '',
            bankName: '',
            cardNumber: '',
            IBan: '',
            isActive: true,
        },
        validationSchema: Yup.object({
            accountOwnerName: Yup.string().required(t('errors.required')),
            bankName: Yup.string().required(t('errors.required')),
            cardNumber: Yup.string().required(t('errors.required')),
            IBan: Yup.string().required(t('errors.required')),
        }),
        onSubmit: (values) => {
            createBank.mutate(values, {
                onSuccess: () => {
                    formik.resetForm()
                    navigate(Pages.cardBank.list)
                },
                onError: (error: ErrorType) => {
                    toast.error(error.response?.data?.error?.message[0])
                }
            })
        }
    })

    return (
        <div className='mt-4'>
            <div className='flex justify-between items-center'>
                <div>
                    {t('cardBank.new_account')}
                </div>
                <div>
                    <Button
                        className='px-4'
                        onClick={() => formik.handleSubmit()}
                        isLoading={createBank.isPending}
                    >
                        <div className='flex gap-2 items-center'>
                            <TickCircle
                                size={15}
                                color='#fff'
                            />
                            <div>{t('cardBank.submit_account')}</div>
                        </div>
                    </Button>
                </div>
            </div>

            <div className='flex gap-6 xl:mt-8 mt-4'>
                <div className='flex-1 text-sm bg-white py-8 xl:px-10 px-4 rounded-3xl'>
                    <div>
                        {t('cardBank.account_information')}
                    </div>

                    <div className='mt-10 flex items-center gap-5'>
                        <div>
                            {t('cardBank.status_account')}
                        </div>
                        <SwitchComponent
                            active={formik.values.isActive}
                            onChange={(value) => formik.setFieldValue('isActive', value)}
                        />
                    </div>

                    <div className='mt-8 rowTwoInput'>
                        <Input
                            label={t('cardBank.account_owner_name')}
                            name='accountOwnerName'
                            value={formik.values.accountOwnerName}
                            onChange={formik.handleChange}
                            error_text={formik.touched.accountOwnerName && formik.errors.accountOwnerName ? formik.errors.accountOwnerName : ''}
                        />
                        <Input
                            label={t('cardBank.bank_name')}
                            name='bankName'
                            value={formik.values.bankName}
                            onChange={formik.handleChange}
                            error_text={formik.touched.bankName && formik.errors.bankName ? formik.errors.bankName : ''}
                        />
                    </div>
                    <div className='mt-8 rowTwoInput'>
                        <Input
                            label={t('cardBank.card_number')}
                            name='cardNumber'
                            value={formik.values.cardNumber}
                            onChange={formik.handleChange}
                            error_text={formik.touched.cardNumber && formik.errors.cardNumber ? formik.errors.cardNumber : ''}
                        />
                        <Input
                            label={t('cardBank.sheba')}
                            name='IBan'
                            value={formik.values.IBan}
                            onChange={formik.handleChange}
                            error_text={formik.touched.IBan && formik.errors.IBan ? formik.errors.IBan : ''}
                        />
                    </div>
                </div>

                <div className='bg-white w-sidebar xl:block hidden py-10 px-5 h-fit rounded-3xl'>
                    <div className='text-sm'>
                        {t('ticket.title_hint')}
                    </div>

                    <div className='mt-6'>
                        <div className='flex items-start gap-2 border-b pb-5'>
                            <div>
                                <TickSquare size={20} color='black' variant='Bold' />
                            </div>
                            <div className='text-description text-xs leading-5'>
                                سوالات - مشکلاتی که به یک موضوع مربوط میشوند را در یک درخواست پشتیبانی پیگیر باشید و چند درخواست برای یک موضوع باز نکنید.
                            </div>
                        </div>
                        <div className='flex items-start gap-2 mt-6 border-b pb-5'>
                            <div>
                                <TickSquare size={20} color='black' variant='Bold' />
                            </div>
                            <div className='text-description text-xs leading-5'>
                                لطفاً برای بررسی و رفع مشکلات احتمالی صبور باشید بررسی و رفع مشکلات در برخی موارد زمان گیر است.
                            </div>
                        </div>
                        <div className='flex items-start gap-2 mt-6'>
                            <div>
                                <TickSquare size={20} color='black' variant='Bold' />
                            </div>
                            <div className='text-description text-xs leading-5'>
                                پاسخگویی 24 ساعته تلفنی را تنها از میهن وب هاست می توانید انتظار داشته باشید .بخش پشتیبانی در هر ساعتی حتی در روز های تعطیل آماده پیگیری سریع مشکلات کاربران است.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default CreateBankCard