import { FC, Fragment, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Input from '../../../components/Input'
import UploadBox from '../../../components/UploadBox'
import Button from '../../../components/Button'
import { useDepositTransfer, useGetBankAccount } from '../hooks/useWalletData'
import Select from '../../../components/Select'
import PageLoading from '../../../components/PageLoading'
import { useFormik } from 'formik'
import { DepositTransferType } from '../types/WalletTypes'
import * as Yup from 'yup'
import { useSingleUpload } from '../../ticket/hooks/useTicketData'
import { toast } from 'react-toastify'
import { ErrorType } from '../../../helpers/types'
import { TickCircle } from 'iconsax-react'

const CardtoCard: FC = () => {

    const { t } = useTranslation('global')
    const [file, setFile] = useState<File>()
    const [percent, setPercent] = useState<number>(0)
    const getBankAccount = useGetBankAccount()
    const depositTransfer = useDepositTransfer()
    const upload = useSingleUpload(setPercent)

    const formik = useFormik<DepositTransferType>({
        initialValues: {
            amount: 0,
            transferReceiptUrl: '',
            bankAccountId: '',
            method: 'CARD_TO_CARD'
        },
        validationSchema: Yup.object({
            amount: Yup.number().required(t('errors.required')),
            bankAccountId: Yup.string().required(t('errors.required')),
        }),
        onSubmit: (values) => {
            if (file) {
                const formData = new FormData()
                formData.append('file', file)
                upload.mutate(formData, {
                    onSuccess: (data) => {
                        depositTransfer.mutate({ ...values, amount: +values.amount, transferReceiptUrl: data.data.url }, {
                            onSuccess: () => {
                                formik.resetForm()
                                setFile(undefined)
                                toast.success(t('wallet.successful_transfer'))
                            },
                            onError: (error: ErrorType) => {
                                toast.error(error.response?.data?.error.message[0])
                            }
                        })
                    }
                })
            }
        }
    })

    return (
        <div className='mt-8 bg-white p-8 rounded-3xl'>
            {
                getBankAccount.isPending ?
                    <PageLoading />
                    :
                    <Fragment>
                        <div>
                            {t('wallet.card_to_card')}
                        </div>

                        <div className='mt-8'>
                            <Select
                                label={t('wallet.select_bank_account')}
                                placeholder={t('select')}
                                items={getBankAccount.data?.data?.bankAccounts?.map((item: any) => ({
                                    label: item.cardNumber,
                                    value: item.id
                                }))}
                                name='bankAccountId'
                                onChange={formik.handleChange}
                                error_text={formik.touched.bankAccountId && formik.errors.bankAccountId ? formik.errors.bankAccountId : ''}
                            />
                        </div>

                        <div className='mt-8'>
                            <Input
                                label={t('wallet.amount')}
                                placeholder={t('wallet.enter_amount_card')}
                                name='amount'
                                onChange={(e) => formik.setFieldValue('amount', e.target.value)}
                                error_text={formik.touched.amount && formik.errors.amount ? formik.errors.amount : ''}
                                seprator
                            />
                        </div>

                        <div className='mt-8'>
                            <UploadBox
                                label={t('wallet.upload_deposit_slip')}
                                onChange={(file) => setFile(file[0])}
                            />
                        </div>

                        <div className='mt-10 flex justify-end'>
                            <Button
                                className='xl:w-[180px]'
                                onClick={() => formik.handleSubmit()}
                                isLoading={depositTransfer.isPending || upload.isPending}
                                percentage={percent}
                            >
                                <div className='flex gap-2 items-center'>
                                    <TickCircle
                                        size={24}
                                        color='white'
                                    />
                                    <div>{t('wallet.submit_slip')}</div>
                                </div>
                            </Button>
                        </div>

                    </Fragment>
            }

        </div>
    )
}

export default CardtoCard