import { FC, Fragment, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Tabs from '../../components/Tabs'
import { Cards, Money3, MoneyRecive } from 'iconsax-react'
import { useGetGateWayPayment, useGetPayments } from './hooks/usePaymentData'
import PageLoading from '../../components/PageLoading'
import Td from '../../components/Td'
import { PaymentGatewayType, PaymentItemsType, PaymentStatusType } from './types/PaymentTypes'
import Pagination from '../../components/Pagination'
import moment from 'moment-jalaali'
import Accept from './components/Accept'
import Reject from './components/Reject'
import { usePermissions } from '../../hooks/usePermissions'

const PaymentList: FC = () => {

    const { t } = useTranslation('global')
    const { canUpdate } = usePermissions()
    const [page, setPage] = useState<number>(1)
    const [pageGateWay, setPageGateWay] = useState<number>(1)
    const [activeTab, setActiveTab] = useState<PaymentStatusType>('GATEWAY')
    const getGateWayPayment = useGetGateWayPayment(pageGateWay)
    const getPayments = useGetPayments(page, activeTab)

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

                    {
                        getPayments.isFetching || getGateWayPayment.isPending ?
                            <div className='mt-5'>
                                <PageLoading />
                            </div>
                            :
                            <Fragment>
                                {
                                    activeTab === 'GATEWAY' &&
                                    <Fragment>
                                        <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('payment.user')} />
                                                        <Td text={t('payment.amount')} />
                                                        <Td text={t('payment.date')} />
                                                        <Td text={t('payment.status_payment')} />
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    {
                                                        getGateWayPayment.data?.data?.payments?.map((item: PaymentGatewayType) => {
                                                            return (
                                                                <tr className='tr' key={item.id}>
                                                                    <Td text={`${item.user.firstName} ${item.user.lastName}`} />
                                                                    <Td text={item.amount.toLocaleString()} />
                                                                    <Td text={''}>
                                                                        <div className='dltr text-right'>
                                                                            {moment(item.createdAt).format('jYYYY/jMM/jDD HH:mm')}
                                                                        </div>
                                                                    </Td>
                                                                    <Td text={t(`payment.${item.status}`)} />
                                                                </tr>
                                                            )
                                                        })
                                                    }
                                                </tbody>
                                            </table>
                                        </div>
                                        <div className='flex justify-end'>
                                            <Pagination
                                                currentPage={pageGateWay}
                                                totalPages={getGateWayPayment.data?.data?.pager?.totalPages}
                                                onPageChange={setPageGateWay}
                                            />
                                        </div>
                                    </Fragment>

                                }
                                {
                                    activeTab !== 'GATEWAY' &&
                                    <Fragment>
                                        <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('payment.receip_image')} />
                                                        <Td text={t('payment.user')} />
                                                        <Td text={t('payment.card_number')} />
                                                        <Td text={t('payment.sheba_number')} />
                                                        <Td text={t('payment.amount')} />
                                                        <Td text={t('payment.date')} />
                                                        <Td text={t('payment.payment_type')} />
                                                        <Td text={t('payment.status_payment')} />
                                                        <Td text={''} />
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    {
                                                        getPayments.data?.data?.depositRequests?.map((item: PaymentItemsType) => {
                                                            return (
                                                                <tr className='tr' key={item.id}>
                                                                    <Td text={''}>
                                                                        <a href={item.receiptUrl} target='_blank'>
                                                                            <img
                                                                                src={item.receiptUrl}
                                                                                className='w-16 h-16 rounded-lg'
                                                                            />
                                                                        </a>
                                                                    </Td>
                                                                    <Td text={`${item.user.firstName} ${item.user.lastName}`} />
                                                                    <Td text={item.bankAccount.cardNumber} />
                                                                    <Td text={item.bankAccount.IBan} />
                                                                    <Td text={item.amount.toLocaleString()} />
                                                                    <Td text={''}>
                                                                        <div className='dltr text-right'>
                                                                            {moment(item.createdAt).format('jYYYY/jMM/jDD HH:mm')}
                                                                        </div>
                                                                    </Td>
                                                                    <Td text={item.type === 'CARD_TO_CARD' ? t('wallet.card_to_card') : t('wallet.bank_transfer')} />
                                                                    <Td text={t(`payment.${item.status}`)} />
                                                                    <Td text={''}>
                                                                        {
                                                                            item.status === 'PENDING' && canUpdate('payments') &&
                                                                            <Fragment>
                                                                                <div className='flex gap-2'>
                                                                                    <Accept
                                                                                        id={item.id}
                                                                                    />
                                                                                    <Reject id={item.id} />
                                                                                </div>
                                                                            </Fragment>
                                                                        }
                                                                    </Td>
                                                                </tr>
                                                            )
                                                        })
                                                    }
                                                </tbody>
                                            </table>
                                        </div>

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

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

export default PaymentList