import { FC, useState } from 'react'
import Button from '../../../components/Button'
import { useTranslation } from 'react-i18next'
import { clx } from '../../../helpers/utils'
import SamanImage from '../../../assets/images/saman.png'
import Input from '../../../components/Input'

const Online: FC = () => {

    const { t } = useTranslation('global')
    const [priceSelect, setPriceSelect] = useState<number>(1)
    const [bankSelected, setBankSelected] = useState<number>(1)

    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'>
                <div onClick={() => setPriceSelect(1)} className={clx(
                    'bg-[#EBEDF5] border border-[#EBEDF5] cursor-pointer flex items-center text-xs h-10 px-4 rounded-lg',
                    priceSelect === 1 && 'border-black'
                )}>
                    ۱۰,۰۰۰,۰۰۰ تومان
                </div>
                <div onClick={() => setPriceSelect(2)} className={clx(
                    'bg-[#EBEDF5] border border-[#EBEDF5] cursor-pointer flex items-center text-xs h-10 px-2 rounded-lg',
                    priceSelect === 2 && 'border-black'
                )}>
                    ۱۰,۰۰۰,۰۰۰ تومان
                </div>
                <div onClick={() => setPriceSelect(3)} className={clx(
                    'bg-[#EBEDF5] border border-[#EBEDF5] cursor-pointer flex items-center text-xs h-10 px-2 rounded-lg',
                    priceSelect === 3 && 'border-black'
                )}>
                    ۱۰,۰۰۰,۰۰۰ تومان
                </div>
                <div onClick={() => setPriceSelect(4)} className={clx(
                    'bg-[#EBEDF5] border border-[#EBEDF5] cursor-pointer flex items-center text-xs h-10 px-2 rounded-lg',
                    priceSelect === 4 && 'border-black'
                )}>
                    ۱۰,۰۰۰,۰۰۰ تومان
                </div>
                <div onClick={() => setPriceSelect(5)} className={clx(
                    'bg-[#EBEDF5] border border-[#EBEDF5] cursor-pointer flex items-center text-xs h-10 px-2 rounded-lg',
                    priceSelect === 5 && 'border-black'
                )}>
                    ۱۰,۰۰۰,۰۰۰ تومان
                </div>
            </div>

            <div className='mt-9'>
                <Input
                    label={t('wallet.optional_price')}
                    placeholder={t('wallet.enter_your_price')}
                />
            </div>

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

                <div className='mt-6 flex gap-4'>
                    <div onClick={() => setBankSelected(1)} 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 === 1 && 'border-black'
                    )}>
                        <img src={SamanImage} className='w-10' />
                        <div>
                            <div>
                                بانک پارسیان
                            </div>
                            <div className='text-xs mt-1 text-description'>
                                تمام کارت های عضو شتاب
                            </div>
                        </div>
                    </div>
                    <div onClick={() => setBankSelected(2)} 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 === 2 && 'border-black'
                    )}>
                        <img src={SamanImage} className='w-10' />
                        <div>
                            <div>
                                بانک پارسیان
                            </div>
                            <div className='text-xs mt-1 text-description'>
                                تمام کارت های عضو شتاب
                            </div>
                        </div>
                    </div>
                </div>

                <div className='mt-10 flex justify-end'>
                    <Button
                        label={t('wallet.pay')}
                        className='w-[180px]'
                    />
                </div>
            </div>
        </div>
    )
}

export default Online