import { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Button from '../../components/Button'
import { Add, Eye, MessageRemove, MessageTick, MessageTime } from 'iconsax-react'
import Tabs from '../../components/Tabs'
import Td from '../../components/Td'
import { Link } from 'react-router-dom'
import { Pages } from '../../config/Pages'
import { useGetTickets } from './hooks/useTicketData'
import moment from 'moment-jalaali'

const TicketList: FC = () => {

    const { t } = useTranslation('global')
    const [activeTab, setActiveTab] = useState<'ANSWERED' | 'PENDING' | 'CLOSED'>('ANSWERED')
    const getTickets = useGetTickets(activeTab)

    return (
        <div className='mt-4'>
            <div className='flex justify-between items-center'>
                <div>
                    {t('ticket.tickets')}
                </div>

                <Link to={Pages.ticket.create}>
                    <Button
                        className='w-[172px]'
                    >
                        <div className='flex gap-2 items-center'>
                            <Add size={20} color='white' />
                            <div>
                                {t('ticket.new_ticket')}
                            </div>
                        </div>
                    </Button>
                </Link>
            </div>

            <div className='mt-14'>
                <Tabs
                    active={activeTab}
                    items={[
                        {
                            icon: <MessageTick color={activeTab === 'ANSWERED' ? 'black' : '#8C90A3'} size={22} />,
                            label: t('ticket.answered'),
                            value: 'ANSWERED'
                        },
                        {
                            icon: <MessageTime color={activeTab === 'PENDING' ? 'black' : '#8C90A3'} size={22} />,
                            label: t('ticket.checking'),
                            value: 'PENDING'
                        },
                        // {
                        //     icon: <Message2 color={activeTab === 'wating' ? 'black' : '#8C90A3'} size={22} />,
                        //     label: t('ticket.wait_answered'),
                        //     value: 'wating'
                        // },
                        {
                            icon: <MessageRemove color={activeTab === 'CLOSED' ? 'black' : '#8C90A3'} size={22} />,
                            label: t('ticket.closed'),
                            value: 'CLOSED'
                        },
                    ]}
                    onChange={(value) => setActiveTab(value as 'ANSWERED' | 'PENDING' | 'CLOSED')}
                />
            </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('ticket.title')} />
                            <Td text={t('ticket.team')} />
                            <Td text={t('ticket.date')} />
                            <Td text={t('ticket.status')} />
                            <Td text={t('ticket.priority')} />
                            <Td text={t('ticket.detail')} />
                            <Td text={''} />
                        </tr>
                    </thead>
                    <tbody>
                        {
                            getTickets.data?.data?.tickets?.map((item: any) => (
                                <tr key={item.id} className='tr'>
                                    <Td text={item.numericId} />
                                    <Td text={item.subject} />
                                    <Td text={item?.category?.title} />
                                    <Td text={''}>
                                        <div className='dltr text-right'>
                                            {moment(item.updatedAt).format('jYYYY-jMM-jDD HH:mm')}
                                        </div>
                                    </Td>
                                    <Td text={t(`ticket.${item.status}`)} />
                                    <Td text={t(`ticket.${item.priority}`)} />
                                    <Td text={''}>
                                        <Link to={Pages.ticket.detail + item.id}>
                                            <Eye size={20} color='#8C90A3' />
                                        </Link>
                                    </Td>
                                    <Td text={''} />
                                </tr>
                            ))
                        }
                    </tbody>
                </table>
            </div>
        </div>
    )
}

export default TicketList