import { useState, type FC } from 'react'
import { useGetWithdraws } from './hooks/useResellerData'
import { useTranslation } from 'react-i18next'
import PageLoading from '../../components/PageLoading'
import Td from '../../components/Td'
import { WithDrawItemType } from './types/Types'
import { NumberFormat } from '../../config/func'
import moment from 'moment-jalaali'
import Pagination from '../../components/Pagination'
import DefaulModal from '../../components/DefaulModal'
import Input from '../../components/Input'
import Payment from './components/Payment'

const Withdraw: FC = () => {

    const { t } = useTranslation('global')
    const [page, setPage] = useState<number>(1)
    const [showModal, setShowModal] = useState<boolean>(false)
    const getWithdraw = useGetWithdraws(page)

    return (
        <div className='mt-4 min-h-[500px]'>
            <div className='flex justify-between items-center'>
                <div>
                    {t('reseller.withdraws')}
                </div>
            </div>

            {
                getWithdraw.isPending ?
                    <PageLoading />
                    :
                    <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('reseller.requestedAmount')} />
                                    <Td text={t('reseller.user')} />
                                    <Td text={t('reseller.paitAt')} />
                                    <Td text={''} />
                                </tr>
                            </thead>
                            <tbody>
                                {
                                    getWithdraw?.data?.data?.requests?.map((item: WithDrawItemType) => {
                                        return (
                                            <tr key={item.id} className='tr'>
                                                <Td text={NumberFormat(+item.requestedAmount)} />
                                                <Td text={item?.user?.firstName + ' ' + item.user?.lastName} />
                                                <Td text={item?.paidAt ? moment(item.paidAt).format('jYYYY-jMM-jDD') : '-'} />
                                                <Td text=''>
                                                    {
                                                        !item.paidAt ?
                                                            <Payment id={item.id} refetch={getWithdraw.refetch} />
                                                            :
                                                            <span className='text-green-400 font-bold'>پرداخت شده</span>
                                                    }
                                                </Td>
                                            </tr>
                                        )
                                    })
                                }
                            </tbody>
                        </table>
                    </div>
            }

            <Pagination
                currentPage={page}
                onPageChange={setPage}
                totalPages={getWithdraw.data?.data?.pager?.totalPages}
            />

            <DefaulModal
                open={showModal}
                close={() => setShowModal(false)}
                isHeader
                title_header='پرداخت'
            >

                <div className='mt-5'>
                    <Input

                    />
                </div>

            </DefaulModal>

        </div>
    )
}

export default Withdraw