import { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Button from '../../components/Button'
import { Add, Edit, Trash } from 'iconsax-react'
import Td from '../../components/Td'
import { Link } from 'react-router-dom'
import { Pages } from '../../config/Pages'
import Input from '../../components/Input'
import { useGetDiscounts, useDeleteDiscount } from './hooks/useDiscountData'
import { DiscountItemType } from './types/DiscountTypes'
import moment from 'moment-jalaali'
import ToggleStatusDiscount from './components/ToggleStatusDiscount'
import PageLoading from '../../components/PageLoading'
import { NumberFormat } from '../../config/func'
import { toast } from 'react-toastify'
import { ErrorType } from '../../helpers/types'

const DiscountList: FC = () => {

    const { t } = useTranslation('global')
    const [search, setSearch] = useState<string>('')
    const getDiscounts = useGetDiscounts(search)
    const deleteDiscount = useDeleteDiscount()

    const handleDelete = (id: string) => {
        deleteDiscount.mutate(id, {
            onSuccess: () => {
                getDiscounts.refetch()
                toast.success(t('success'))
            },
            onError: (error: ErrorType) => {
                toast.error(error.response?.data?.error.message[0])
            }
        })
    }
    return (
        <div className='mt-4 min-h-[500px]'>
            <div className='flex justify-between items-center'>
                <div>
                    {t('discount.list')}
                </div>

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




            <div className='mt-4'>
                <div className='flex justify-end items-center'>

                    <div className='xl:w-[300px] w-full'>
                        <Input
                            variant='search'
                            placeholder={t('ads.search')}
                            className='bg-white w-full'
                            onChangeSearchFinal={(value) => setSearch(value)}
                        />
                    </div>

                </div>
            </div>




            {
                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.title')} />
                                    <Td text={t('discount.type')} />
                                    <Td text={t('discount.customer')} />
                                    <Td text={t('discount.code')} />
                                    <Td text={t('discount.startDate')} />
                                    <Td text={t('discount.endDate')} />
                                    <Td text={t('discount.price_or_percent')} />
                                    <Td text={t('discount.status')} />
                                    <Td text={t('')} />
                                </tr>
                            </thead>
                            <tbody>
                                {
                                    getDiscounts.data?.data?.discounts?.map((item: DiscountItemType) => {
                                        return (
                                            <tr key={item.id} className='tr'>
                                                <Td text={item.title} />
                                                <Td text={t(`discount.${item.type}`)} />
                                                <Td text={item.user ? item.user.firstName + ' ' + item.user.lastName : '-'} />
                                                <Td text={item.code} />
                                                <Td text={moment(item.startDate, 'jYYYY-jMM-jDD').format('jYYYY-jMM-jDD')} />
                                                <Td text={moment(item.endDate, 'jYYYY-jMM-jDD').format('jYYYY-jMM-jDD')} />
                                                <Td text={NumberFormat(+item.value)} />
                                                <Td text={t('')}>
                                                    <ToggleStatusDiscount
                                                        defaultActive={item.isActive}
                                                        id={item.id}
                                                    />
                                                </Td>
                                                <Td text={t('')}>
                                                    <div className='flex gap-2 items-center'>
                                                        <Link
                                                            to={Pages.discount.detail + item.id}
                                                        >
                                                            <Edit size={20} color='#888888' />
                                                        </Link>

                                                        <Trash
                                                            size={20}
                                                            color='#888888'
                                                            onClick={() => handleDelete(item.id)}
                                                        />
                                                    </div>
                                                </Td>
                                            </tr>
                                        )
                                    })
                                }
                            </tbody>
                        </table>
                    </div>
            }
        </div>
    )
}

export default DiscountList