import { ArrowRight, MoneyRecive, MoneySend } from 'iconsax-react'
import { FC, Fragment, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Td from '../../components/Td'
import Detail from './components/Detail'
import { useGetTransactions } from './hooks/useTransactionData'
import { TransactionItemType } from './types/TransactionTypes'
import moment from 'moment-jalaali'
import { NumberFormat } from '../../config/func'
import Pagination from '../../components/Pagination'
import BoxSekeleton from './skeleton/BoxSekeleton'
import DefaultTableSkeleton from '../../components/DefaultTableSkeleton'
import { Helmet } from 'react-helmet-async'

const TransactionList: FC = () => {

    const [page, setPage] = useState<number>(1)
    const { t } = useTranslation('global')
    const getTransactions = useGetTransactions(page)

    return (
        <div className='mt-4'>
            <Helmet>
                <title>
                    داناک | تراکنش ها
                </title>
            </Helmet>
            <div>
                {t('transaction.transaction')}
            </div>


            <Fragment>
                {
                    getTransactions.isPending ?
                        <BoxSekeleton />
                        :
                        <div className='mt-6 flex xl:gap-6 gap-1 justify-center'>

                            <div className='bg-white flex-1 rounded-2xl xl:p-6 py-2 px-4 xl:max-w-[253px]'>
                                <div className='flex xl:flex-row flex-col gap-2 items-center'>
                                    <div className='size-8 bg-[#EEF0F7] rounded-full flex justify-center items-center'>
                                        <MoneySend size={18} color='black' />
                                    </div>
                                    <div className='xl:text-xs text-[10px] text-[#101828]'>
                                        {t('transaction.totao_deposit')}
                                    </div>
                                </div>
                                <div className='mt-2 flex xl:flex-row flex-col gap-2 items-center'>
                                    <div className='text-[#101828] xl:text-xs text-[10px]'>
                                        {NumberFormat(getTransactions.data?.data?.totalDeposits)} {t('toman')}
                                    </div>
                                    <div className='flex gap gap-0.5 px-2 py-1 bg-green-100 rounded-lg text-[10px] text-success'>
                                        <ArrowRight size={12} color='#00BA4B' className='-rotate-45' />
                                    </div>
                                </div>
                            </div>
                            <div className='bg-white flex-1 rounded-2xl xl:p-6 py-2 px-4 xl:max-w-[253px]'>
                                <div className='flex xl:flex-row flex-col gap-2 items-center'>
                                    <div className='size-8 bg-[#EEF0F7] rounded-full flex justify-center items-center'>
                                        <MoneyRecive size={18} color='black' />
                                    </div>
                                    <div className='xl:text-xs text-[10px] text-[#101828]'>
                                        {t('transaction.total_withdrawal')}
                                    </div>
                                </div>
                                <div className='mt-2 flex xl:flex-row flex-col gap-2 items-center'>
                                    <div className='text-[#101828] xl:text-xs text-[10px]'>
                                        {NumberFormat(getTransactions.data?.data?.totalWithdrawals)} {t('toman')}
                                    </div>
                                    <div className='flex gap gap-0.5 px-2 py-1 text-red-400 rounded-lg text-[10px] bg-red-100'>
                                        <ArrowRight size={12} color='red' className='rotate-45' />
                                    </div>
                                </div>
                            </div>
                            <div className='bg-white flex-1 rounded-2xl xl:p-6 py-2 px-4 xl:max-w-[253px]'>
                                <div className='flex xl:flex-row flex-col gap-2 items-center'>
                                    <div className='size-8 bg-[#EEF0F7] rounded-full flex xl:flex-row flex-col justify-center items-center'>
                                        <MoneyRecive size={18} color='black' />
                                    </div>
                                    <div className='xl:text-xs text-[10px] text-[#101828]'>
                                        {t('transaction.balance')}
                                    </div>
                                </div>
                                <div className='mt-2 flex xl:flex-row flex-col gap-2 items-center'>
                                    <div className='text-[#101828] xl:text-xs text-[10px]'>
                                        {NumberFormat(getTransactions.data?.data?.balance)} {t('toman')}
                                    </div>
                                </div>
                            </div>
                        </div>
                }

                <div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
                    <table className='w-full text-sm '>
                        <thead className='thead'>
                            <tr>
                                <Td text={t('ticket.number')} />
                                <Td text={t('transaction.description')} />
                                <Td text={t('transaction.amount')} />
                                <Td text={t('ticket.date')} />
                                <Td text={t('ticket.detail')} />
                            </tr>
                        </thead>
                        <tbody>
                            {
                                getTransactions.isPending &&
                                <DefaultTableSkeleton tdCount={5} />
                            }
                            {
                                getTransactions.data?.data?.transactions?.map((item: TransactionItemType) => {
                                    return (
                                        <tr className='tr' key={item.id}>
                                            <Td text={item.numericId + ''} />
                                            <Td text={item.description} />
                                            <Td text={NumberFormat(+item.amount)} />
                                            <Td text={moment(item.createdAt).format('jYYYY-jMM-jDD')} />
                                            <Td text={''}>
                                                <Detail id={item.id} />
                                            </Td>
                                        </tr>
                                    )
                                })
                            }
                        </tbody>
                    </table>
                </div>

                <div className='flex justify-end'>
                    <Pagination
                        currentPage={page}
                        totalPages={getTransactions.data?.data?.pager?.totalPages}
                        onPageChange={setPage}
                    />
                </div>

            </Fragment>
        </div >
    )
}

export default TransactionList