import { FC } from 'react'
import { useGetMyDiscount } from './hooks/useDiscountData'
import PageLoading from '../../components/PageLoading'
import Td from '../../components/Td'
import { useTranslation } from 'react-i18next'
import { DiscountItemType } from './types/DiscountTypes'
import moment from 'moment-jalaali'

const MyDiscountList: FC = () => {

    const { t } = useTranslation('global')
    const getDiscounts = useGetMyDiscount()

    return (
        <div className='mt-4'>
            {
                getDiscounts.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('discount.number')} />
                                    <Td text={t('discount.type')} />
                                    <Td text={t('discount.code')} />
                                    <Td text={t('discount.start_date')} />
                                    <Td text={t('discount.end_date')} />
                                    <Td text={t('discount.percent_ammount')} />
                                    <Td text={t('discount.service')} />
                                    <Td text={t('discount.status')} />
                                </tr>
                            </thead>
                            <tbody>
                                {
                                    getDiscounts.data?.data?.discounts?.map((item: DiscountItemType, index: number) => {
                                        return (
                                            <tr key={item.id} className='tr'>
                                                <Td text={String(index + 1)} />
                                                <Td text={t(`discount.${item.type}`)} />
                                                <Td text={item.code} />
                                                <Td text={moment(item.startDate).format('jYYYY-jMM-jDD')} />
                                                <Td text={moment(item.endDate).format('jYYYY-jMM-jDD')} />
                                                <Td text={item.type === 'CODE' ? item.amount + '%' : item.amount + 'تومان'} />
                                                <Td text={item.subscriptionPlans[0]?.service?.name} />
                                                <Td text={''}>
                                                    {item.isActive ? <span className='text-green-400'>{t('discount.active')}</span> : <span className='text-gray-500'>{t('discount.inactive')}</span>}
                                                </Td>
                                            </tr>
                                        )
                                    })
                                }
                            </tbody>
                        </table>
                    </div>
            }
        </div>
    )
}

export default MyDiscountList