import { FC, useEffect, useState } from 'react'
import Button from '../../../components/Button'
import { useTranslation } from 'react-i18next'
import { clx } from '../../../helpers/utils'
import Input from '../../../components/Input'
import { useGetGetWays, usePayment } from '../hooks/useWalletData'
import { toast } from '../../../components/Toast'
import { ErrorType } from '../../../helpers/types'
import { GatewayItemType } from '../types/WalletTypes'
import { TickCircle } from 'iconsax-react'

const defaultAmounts = [500000, 1000000, 3000000, 5000000, 8000000, 10000000];

const Online: FC = () => {

    const { t } = useTranslation('global')
    const getGetWays = useGetGetWays()
    const payment = usePayment()
    const [bankSelected, setBankSelected] = useState<string>('')
    const [desiredAmount, setDesiredAmount] = useState<number>(0)
    const [amountSelected, setAmountSelected] = useState<number>(0)

    const handlePay = () => {
        if (desiredAmount === 0 && amountSelected === 0) {
            toast(t('wallet.error_select_price'), 'error')
        } else {
            const amout = desiredAmount === 0 ? amountSelected : desiredAmount
            if (amout < 500000) {
                toast(t('wallet.error_min_price'), 'error')
                return
            } else {
                payment.mutate({ amount: amout, gatewayId: bankSelected }, {
                    onSuccess: (data) => {
                        toast(t('wallet.transfer_to_getway'), 'success')
                        window.location.href = data?.data?.redirectUrl
                    },
                    onError: (error: ErrorType) => {
                        toast(error.response?.data?.error?.message[0], 'error')
                    }
                })
            }
        }
    }

    useEffect(() => {
        setDesiredAmount(amountSelected)
    }, [amountSelected])


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

            <div className='mt-8 text-sm'>
                {t('wallet.select_price')}
            </div>

            <div className='mt-4 flex gap-4 flex-wrap'>
                {
                    defaultAmounts.map((amount) => (
                        <div onClick={() => setAmountSelected(amount)} key={amount} className={clx(
                            'bg-[#EBEDF5] border border-[#EBEDF5] cursor-pointer flex items-center text-xs h-10 px-6 rounded-lg',
                            amountSelected === amount && 'border-black'
                        )}>
                            {amount.toLocaleString()} تومان
                        </div>
                    ))
                }

            </div>

            <div className='mt-9'>
                <Input
                    label={t('wallet.optional_price')}
                    placeholder={t('wallet.enter_your_price')}
                    onChange={(e) => setDesiredAmount(Number(e.target.value))}
                    value={desiredAmount}
                    seprator
                />
            </div>

            <div className='mt-8 text-sm'>
                <div>
                    {t('wallet.select_payment')}
                </div>

                <div className='mt-6 flex gap-4'>
                    {
                        getGetWays.data?.data?.paymentGateways?.map((item: GatewayItemType) => {
                            return (
                                <div key={item.name} onClick={() => setBankSelected(item.id)} className={clx(
                                    'xl:h-16 rounded-xl cursor-pointer flex xl:flex-row flex-col gap-4 items-center text-center py-3 xl:py-0 xl:text-right px-4 border border-border xl:w-[240px]',
                                    bankSelected === item?.id && 'border-black'
                                )}>
                                    <img src={item.logoUrl} className='w-10' />
                                    <div>
                                        <div>
                                            {item.nameFa}
                                        </div>
                                        <div className='text-xs mt-1 text-description'>
                                            {t('wallet.all_cards')}
                                        </div>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>

                <div className='mt-10 flex justify-end'>
                    <Button
                        className='xl:w-[180px]'
                        onClick={handlePay}
                        isLoading={payment.isPending}
                    >
                        <div className='flex gap-2 items-center'>
                            <TickCircle
                                size={24}
                                color='white'
                            />
                            <div>{t('wallet.pay')}</div>
                        </div>
                    </Button>


                </div>
            </div>
        </div>
    )
}

export default Online