import { Cards, Money3, MoneyRecive, TickSquare } from 'iconsax-react'
import { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Tabs from '../../components/Tabs'
import { useGetWalletBalance } from './hooks/useWalletData'
import { NumberFormat } from '../../config/func'

const Wallet: FC = () => {

    const { t } = useTranslation('global')
    const getWalletBalance = useGetWalletBalance()
    const [activeTab, setActiveTab] = useState<string>('online')

    return (
        <div className='mt-4'>
            <div>
                {t('wallet.increese_wallet')}
            </div>

            <div className='mt-7 xl:hidden flex xl:px-10 px-6 w-full items-center text-description mx-auto backdrop-blur-md border-2 border-white gap-10 h-[70px] justify-between rounded-[32px] bg-white bg-opacity-45'>
                <div className='xl:text-base text-sm'>{t('wallet.balance')}</div>

                <div className='h-8 text-black rounded-xl text-sm gap-1 w-fit xl:px-14 px-4 bg-[#EEF0F7] flex items-center'>
                    {NumberFormat(getWalletBalance.data?.data?.balance)}
                    <div>تومان</div>
                </div>
            </div>

            <div className='mt-8 flex gap-6'>
                <div className='flex-1'>
                    <Tabs
                        active={activeTab}
                        items={[
                            {
                                label: t('wallet.online_pay'),
                                value: 'online',
                                icon: <MoneyRecive color={activeTab === 'online' ? 'black' : '#8C90A3'} size={22} />
                            },
                            {
                                icon: <Cards color={activeTab === 'card' ? 'black' : '#8C90A3'} size={22} />,
                                label: t('wallet.card_to_card'),
                                value: 'card'
                            },
                            {
                                icon: <Money3 color={activeTab === 'sheba' ? 'black' : '#8C90A3'} size={22} />,
                                label: t('wallet.sheba'),
                                value: 'sheba'
                            },
                        ]}
                        onChange={setActiveTab}
                    />

                    {/* {
                        activeTab === 'online' ?
                            <Online />
                            : activeTab === 'card' ?
                                <CardtoCard />
                                : <Sheba />
                    } */}

                </div>
                <div className='w-sidebar xl:block hidden'>
                    <div className=' xl:flex hidden  px-6 w-full items-center text-description mx-auto backdrop-blur-md border-2 border-white gap-3 h-20 justify-between rounded-[32px] bg-white bg-opacity-45'>
                        <div className='text-xs'>
                            {t('wallet.balance')}
                        </div>

                        <div className='h-8 text-black rounded-xl text-xs gap-1 w-fit  px-4 bg-[#EEF0F7] flex items-center'>
                            {NumberFormat(getWalletBalance.data?.data?.balance)}
                            <div>تومان</div>
                        </div>
                    </div>

                    <div className='bg-white  py-10 px-5 h-fit rounded-3xl mt-8'>
                        <div className='text-sm'>
                            لطفا قبل از شارژ کیف پول نکات زیر را مد نظر قرار دهید.
                        </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'>
                                    شرایط و مقررات کیف پول داناک در بخش قوانین مقررات درج گردیده، شما با شارژ کیف پول با این قوانین و مقررات موافقت می نمایید.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    )
}

export default Wallet