import { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Button from '../../components/Button'
import { Add, Eye, Trash } from 'iconsax-react'
import Td from '../../components/Td'
import { Link } from 'react-router-dom'
import { Pages } from '../../config/Pages'
import DatePickerComponent from '../../components/DatePicker'
import Select from '../../components/Select'
import Input from '../../components/Input'
import { useDeleteAds, useGetAdsList } from './hooks/useAdsData'
import { AdsItemType } from './types/AdsTypes'
import moment from 'moment-jalaali'
import ToggleStatusAds from './components/ToggleStatus'
import PageLoading from '../../components/PageLoading'
import Pagination from '../../components/Pagination'
const AddList: FC = () => {

    const { t } = useTranslation('global')
    const [search, setSearch] = useState<string>('')
    const [isActive, setIsActive] = useState<boolean>(true)
    const [since, setSince] = useState<string>('')
    const [page, setPage] = useState<number>(1)
    const getAds = useGetAdsList(page, search, isActive, since)
    const deleteAds = useDeleteAds()

    const handleDelete = (id: string) => {
        deleteAds.mutate(id, {
            onSuccess: () => {
                getAds.refetch()
            }
        })
    }

    return (
        <div className='mt-4 min-h-[500px]'>
            <div className='flex justify-between items-center'>
                <div>
                    {t('ads.ads')}
                </div>

                <Link to={Pages.ads.create}>
                    <Button
                        className='w-[172px]'
                    >
                        <div className='flex gap-2 items-center'>
                            <Add size={20} color='white' />
                            <div>
                                {t('ads.new_ads')}
                            </div>
                        </div>
                    </Button>
                </Link>
            </div>
            <div className='mt-4'>
                <div className='flex flex-col xl:flex-row justify-between items-center xl:items-end'>
                    <div className='flex items-center gap-4'>
                        <div className='w-[200px]'>
                            <DatePickerComponent
                                label={t('ads.date')}
                                onChange={(date) => setSince(moment(date, 'jYYYY-jMM-jDD').format('YYYY-MM-DD'))}
                                placeholder=''
                            />
                        </div>
                        <div className='w-[200px]'>
                            <Select
                                label={t('ads.status')}
                                items={[
                                    {
                                        label: 'فعال',
                                        value: 'true'
                                    },
                                    {
                                        label: 'غیر فعال',
                                        value: 'false'
                                    },
                                ]}
                                className='bg-white border'
                                onChange={(e) => setIsActive(e.target.value === 'true' ? true : false)}
                            />
                        </div>
                    </div>

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

                </div>
            </div>

            {
                getAds.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('ads.number')} />
                                    <Td text={t('ads.title')} />
                                    <Td text={t('ads.location')} />
                                    <Td text={t('ads.startDate')} />
                                    <Td text={t('ads.endDate')} />
                                    <Td text={t('ads.status')} />
                                    <Td text={''} />
                                </tr>
                            </thead>
                            <tbody>
                                {
                                    getAds.data?.data?.ads?.map((item: AdsItemType, index: number) => {
                                        return (
                                            <tr key={item.id} className='tr'>
                                                <Td text={String(index + 1)} />
                                                <Td text={item.title} />
                                                <Td text={t(`ads.${item.displayLocation}`)} />
                                                <Td text={moment(item.startDate).format('jYYYY-jMM-jDD')} />
                                                <Td text={moment(item.endDate).format('jYYYY-jMM-jDD')} />
                                                <Td text={t('')}>
                                                    <ToggleStatusAds
                                                        defaultActive={item.isActive}
                                                        id={item.id}
                                                    />
                                                </Td>
                                                <Td text={''}>
                                                    <div className='flex gap-3'>
                                                        <Link to={Pages.ads.update + item.id}>
                                                            <Eye size={20} color='#8C90A3' />
                                                        </Link>
                                                        <Trash onClick={() => handleDelete(item.id)} size={20} color='#8C90A3' />
                                                    </div>
                                                </Td>
                                            </tr>
                                        )
                                    })
                                }
                            </tbody>
                        </table>
                    </div>
            }

            <Pagination
                currentPage={page}
                onPageChange={(page) => setPage(page)}
                totalPages={getAds.data?.data?.pager?.totalPages}
            />
        </div>
    )
}

export default AddList