import { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Tabs from '../../components/Tabs'
import { Eye, FolderOpen, WalletCheck, WalletMinus, WalletRemove, WalletSearch } from 'iconsax-react'
import Td from '../../components/Td'
import { Link } from 'react-router-dom'
import { Pages } from '../../config/Pages'
import { useGetInvoices } from './hooks/useReceiptData'
import { NumberFormat } from '../../config/func'
import { ReceiptItemType } from './types/ReceiptTypes'
import moment from 'moment-jalaali'
import { Helmet } from 'react-helmet-async'
import DefaultTableSkeleton from '../../components/DefaultTableSkeleton'
import { InvoiceStatus } from './types/ReceiptTypes'



const ReceiptsList: FC = () => {

    const { t } = useTranslation('global')
    const [activeTab, setActiveTab] = useState<InvoiceStatus>('PENDING')
    const getInvoices = useGetInvoices(activeTab)

    return (
        <div className='mt-4'>
            <Helmet>
                <title>
                    داناک | صورتحساب ها
                </title>
            </Helmet>
            <div>
                {t('receip.receip_list')}
            </div>

            <div className='mt-14'>
                <Tabs
                    active={activeTab}
                    items={[
                        {
                            icon: <WalletSearch color={activeTab === 'PENDING' ? 'black' : '#8C90A3'} size={22} />,
                            label: t('receip.pending'),
                            value: 'PENDING'
                        },
                        {
                            icon: <WalletRemove color={activeTab === 'WAIT_PAYMENT' ? 'black' : '#8C90A3'} size={22} />,
                            label: t('receip.dont_pay'),
                            value: 'WAIT_PAYMENT'
                        },
                        {
                            icon: <WalletCheck color={activeTab === 'PAID' ? 'black' : '#8C90A3'} size={22} />,
                            label: t('receip.paid'),
                            value: 'PAID'
                        },
                        {
                            icon: <WalletMinus color={activeTab === 'OVERDUE' ? 'black' : '#8C90A3'} size={22} />,
                            label: t('receip.overdue'),
                            value: 'OVERDUE'
                        },
                        {
                            icon: <FolderOpen color={activeTab === 'ARCHIVED' ? 'black' : '#8C90A3'} size={22} />,
                            label: t('receip.archive'),
                            value: 'ARCHIVED'
                        },
                    ]}
                    onChange={(value) => setActiveTab(value as InvoiceStatus)}
                />
            </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('receip.customer')} /> */}
                            <Td text={t('receip.date_receipt')} />
                            <Td text={t('receip.last_date_receipt')} />
                            <Td text={t('receip.total')} />
                            <Td text={t('receip.service')} />
                            <Td text={t('receip.late_fee')} />
                            <Td text={t('receip.status')} />
                            <Td text={t('receip.status_paid')} />
                            <Td text={''} />
                        </tr>
                    </thead>
                    <tbody>
                        {

                            getInvoices.isPending ?
                                <DefaultTableSkeleton tdCount={9} />
                                :
                                getInvoices.data?.data?.invoices?.map((item: ReceiptItemType) => {
                                    return (
                                        <tr className='tr'>
                                            <Td text={moment(item.createdAt).format('jYYYY') + item.numericId} />
                                            {/* <Td text={item.user.firstName + ' ' + item.user.lastName} /> */}
                                            <Td text={''}>
                                                <div className='dltr text-right'>
                                                    {moment(item.createdAt).format('jYYYY-jMM-jDD HH:mm')}
                                                </div>
                                            </Td>

                                            <Td text={''}>
                                                <div className='dltr text-right'>
                                                    {moment(item.dueDate).format('jYYYY-jMM-jDD HH:mm')}
                                                </div>
                                            </Td>
                                            <Td text={NumberFormat(item.totalPrice)} />
                                            <Td text={''}>
                                                <div className='flex flex-wrap gap-1.5'>
                                                    {
                                                        item.items.map((item => {
                                                            return (
                                                                <div className='bg-primary p-2 rounded-full text-white flex gap-1'><span>{item.name}</span> <span>({item.count})</span></div>
                                                            )
                                                        }))
                                                    }
                                                </div>
                                            </Td>
                                            <Td text={NumberFormat(item.lateFee)} />
                                            <Td text={t(`receip.${item.status}`)} />
                                            <Td text={item.status === 'PAID' ? moment(item.paidAt).format('jYYYY-jMM-jDD') : t('receip.not_paid')} />
                                            <Td text={''}>
                                                <Link to={Pages.receipts.detail + item.id}>
                                                    <Eye size={20} color='black' />
                                                </Link>
                                            </Td>
                                        </tr>
                                    )
                                })
                        }

                    </tbody>
                </table>
            </div>
        </div>
    )
}

export default ReceiptsList