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'
import EmptyDiscount from './components/EmptyDiscount'

const MyDiscountList: FC = () => {

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

    return (
        <div className='mt-4'>
            {
                getDiscounts.isPending ?
                    <PageLoading />
                    :
                    getDiscounts.data?.data?.discounts?.length > 0 ?
                        <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')} />
                                    </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={''}>
                                                        <div className='en'>{item.code}</div>
                                                    </Td>
                                                    <Td text={moment(item.startDate).format('jYYYY-jMM-jDD')} />
                                                    <Td text={moment(item.endDate).format('jYYYY-jMM-jDD')} />
                                                    <Td text={''}>
                                                        {item.value}
                                                        {item.type === 0 ? 'درصد' : 'تومان'}
                                                    </Td>
                                                </tr>
                                            )
                                        })
                                    }
                                </tbody>
                            </table>
                        </div>
                        :
                        <EmptyDiscount />
            }
        </div>
    )
}

export default MyDiscountList