import { FC, useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Tabs from '../../components/Tabs'
import { CloseCircle, FolderOpen, WalletCheck, WalletRemove, WalletSearch } from 'iconsax-react'
import Td from '../../components/Td'
import { useGetInvoices } from './hooks/useReceiptData'
import PageLoading from '../../components/PageLoading'
import { InvoiceUserItemType, ReceiptItemType } from './types/ReceiptTypes'
import { NumberFormat } from '../../config/func'
import Select from '../../components/Select'
import Input from '../../components/Input'
import DatePickerComponent from '../../components/DatePicker'
import { useSearchParams } from 'react-router-dom'
import moment from 'moment-jalaali'

type ActiveTabType = "PENDING" | "WAIT_PAYMENT" | "PAID" | "CANCELLED" | "EXPIRED" | ""

const ReceiptsList: FC = () => {

    const { t } = useTranslation('global')
    const [searchParams] = useSearchParams()
    const [activeTab, setActiveTab] = useState<ActiveTabType>('PENDING')
    const [customerId, setCustomerId] = useState<string>('')
    const [search, setSearch] = useState<string>('')
    const [date, setDate] = useState<string>('')
    const [endDate, setEndDate] = useState<string>('')
    const getInvoices = useGetInvoices(activeTab, customerId, search, date, endDate)

    useEffect(() => {
        const urlCustomerId = searchParams.get('user')
        if (urlCustomerId) {
            setCustomerId(urlCustomerId)
            setActiveTab('')
        }
    }, [searchParams])


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

            <div className='flex justify-between items-center mt-12'>
                <div className='flex gap-4'>
                    <Select
                        label={t('receip.customer')}
                        placeholder={t('select')}
                        items={getInvoices.data?.data?.users?.map((item: InvoiceUserItemType) => {
                            return {
                                label: item.firstname + ' ' + item.lastname,
                                value: item.id
                            }
                        })}
                        onChange={(e) => setCustomerId(e.target.value)}
                        className='min-w-40'
                    />

                    <DatePickerComponent
                        onChange={(date) => setDate(moment(date, 'jYYYY-jMM-jDD').format('YYYY-MM-DD'))}
                        label={t('receip.since')}
                        className='min-w-40'
                        placeholder={t('select')}
                    />

                    <DatePickerComponent
                        onChange={(date) => setEndDate(moment(date, 'jYYYY-jMM-jDD').format('YYYY-MM-DD'))}
                        label={t('receip.to')}
                        className='min-w-40'
                        placeholder={t('select')}
                    />

                </div>
                <div>
                    <Input
                        variant='search'
                        placeholder={t('service.search')}
                        className='bg-white border border-border'
                        onChangeSearchFinal={(value) => setSearch(value)}
                    />
                </div>
            </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: <CloseCircle color={activeTab === 'CANCELLED' ? 'black' : '#8C90A3'} size={22} />,
                            label: t('receip.canceled'),
                            value: 'CANCELLED'
                        },
                        {
                            icon: <FolderOpen color={activeTab === 'EXPIRED' ? 'black' : '#8C90A3'} size={22} />,
                            label: t('receip.archive'),
                            value: 'EXPIRED'
                        },
                    ]}
                    onChange={(value) => setActiveTab(value as ActiveTabType)}
                />
            </div>

            {
                getInvoices.isPending ?
                    <div className='mt-5'>
                        <PageLoading />
                    </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.status')} />
                                    <Td text={t('receip.status_paid')} />
                                    <Td text={t('receip.recurring')} />
                                    <Td text={t('receip.maxRecurringCycles')} />
                                    <Td text={''} />
                                </tr>
                            </thead>
                            <tbody>
                                {
                                    getInvoices.data?.data?.invoices?.map((item: ReceiptItemType, index: number) => {
                                        return (
                                            <tr className='tr'>
                                                <Td text={String(index + 1)} />
                                                <Td text={item.user.firstName + ' ' + item.user.lastName} />
                                                <Td text={moment(item.createdAt).format('jYYYY/jMM/jDD')} />
                                                <Td text={moment(item.dueDate).format('jYYYY/jMM/jDD')} />
                                                <Td text={NumberFormat(item.totalPrice)} />
                                                <Td text={t('receip.service')} />
                                                <Td text={item.status === 'APPROVED' || item.status === 'PAID' ? t('receip.approved') : t('receip.pending')} />
                                                <Td text={t(`receip.${item.status}`)} />
                                                <Td text=''>
                                                    {item.isRecurring ? t('receip.recurringPeriod') : '_'}
                                                </Td>
                                                <Td text=''>
                                                    {item.maxRecurringCycles}
                                                </Td>
                                                <Td text={''} />
                                            </tr>
                                        )
                                    })
                                }

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

export default ReceiptsList