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'

const CardtoCard: FC = () => {

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

    const formik = useFormik<DepositTransferType>({
        initialValues: {
            amount: 0,
            transferReceiptUrl: '',
            bankAccountId: '',
            method: 'SHEBA'
        },
        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'))
                                window.location.reload()
                            }
                        })
                    }
                })
            }
        }
    })

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

                        <div className='mt-8'>
                            <Select
                                label={t('wallet.select_sheba')}
                                placeholder={t('select')}
                                items={getBankAccount.data?.data?.bankAccounts?.map((item: any) => ({
                                    label: item.IBan,
                                    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={formik.handleChange}
                                error_text={formik.touched.amount && formik.errors.amount ? formik.errors.amount : ''}
                            />
                        </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
                                label={t('wallet.submit_slip')}
                                className='w-[180px]'
                                onClick={() => formik.handleSubmit()}
                                isLoading={depositTransfer.isPending || upload.isPending}
                            />
                        </div>

                    </Fragment>
            }

        </div>
    )
}

export default CardtoCard