import { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Button from '../../components/Button'
import { Add, Eye } from 'iconsax-react'
import Select from '../../components/Select'
import Input from '../../components/Input'
import Td from '../../components/Td'
import { Link } from 'react-router-dom'
import { Pages } from '../../config/Pages'
import { useGetAllServices, useGetCategoryParents } from './hooks/useServiceData'
import PageLoading from '../../components/PageLoading'
import { ServiceCategoryType, ServiceItemType } from './types/ServiceTypes'
import moment from 'moment-jalaali'
import Pagination from '../../components/Pagination'
import ToggleStatusService from './components/ToggleStatusService'
import CheckBoxComponent from '../../components/CheckBoxComponent'

const ListService: FC = () => {

    const { t } = useTranslation('global')
    const [category, setCategory] = useState<string>('')
    const [status, setstatus] = useState<'ACTIVE' | 'IN_ACTIVE' | ''>('')
    const [page, setPage] = useState<number>(1)
    const [search, setSearch] = useState<string>('')
    const [isDanakSuggest, setIsDanakSuggest] = useState<boolean>(false)
    const getServices = useGetAllServices(search, page, category, status, isDanakSuggest)
    const getCategory = useGetCategoryParents()

    return (
        <div className='mt-4'>
            <div className='flex w-full justify-between items-center'>
                <div>
                    {t('service.list_service')}
                </div>
                <div>
                    <Link to={Pages.services.add}>
                        <Button
                            className='px-5'
                        >
                            <div className='flex gap-2'>
                                <Add
                                    className='size-5'
                                    color='#fff'
                                />
                                <div>{t('service.submit_service')}</div>
                            </div>
                        </Button>
                    </Link>
                </div>
            </div>

            <div className='flex justify-between items-center mt-12'>
                <div className='flex gap-4'>
                    <Select
                        className='w-36'
                        items={
                            getCategory.data?.data ?
                                getCategory.data?.data?.categories?.map((item: ServiceCategoryType) => ({
                                    label: item.title,
                                    value: item.id,
                                }))
                                : []
                        }
                        placeholder={t('service.category')}
                        onChange={(e) => setCategory(e.target.value)}
                    />
                    <Select
                        className='w-36'
                        items={[
                            { label: t('all'), value: '' },
                            { label: t('service.active'), value: 'ACTIVE' },
                            { label: t('service.deactive'), value: 'IN_ACTIVE' },
                        ]}
                        placeholder={t('service.status')}
                        onChange={(e) => setstatus(e.target.value as 'ACTIVE' | 'IN_ACTIVE' | '')}
                    />
                    <div className='flex text-sm items-center'>
                        <div className='text-xs whitespace-nowrap'>
                            {t('service.danak_sujescet')}
                        </div>
                        <CheckBoxComponent
                            checked={isDanakSuggest}
                            onChange={(e) => setIsDanakSuggest(e.target.checked)}
                        />
                    </div>
                </div>
                <div>
                    <Input
                        variant='search'
                        placeholder={t('service.search')}
                        className='bg-white border border-border'
                        onChangeSearchFinal={(value) => setSearch(value)}
                    />
                </div>
            </div>

            {
                getServices.isPending || getCategory.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='' />
                                    <Td text={t('service.title')} />
                                    <Td text={t('service.company_developed')} />
                                    <Td text={t('service.category')} />
                                    <Td text={t('service.publish_date')} />
                                    <Td text={t('service.plans')} />
                                    <Td text={t('ticket.status')} />
                                    <Td text={t('ticket.detail')} />
                                    <Td text={''} />
                                </tr>
                            </thead>
                            <tbody>
                                {
                                    getServices.data?.data?.services?.map((item: ServiceItemType) => {
                                        return (
                                            <tr key={item.id} className='tr'>
                                                <Td text=''>
                                                    <div className='size-10 rounded-lg overflow-hidden'>
                                                        <img src={item.icon} className='size-full' />
                                                    </div>
                                                </Td>
                                                <Td text={item.name} />
                                                <Td text={item.author} />
                                                <Td text={item.category?.title} />
                                                <Td text={moment(item.createDate, 'jYYYY-jMM-jDD').format('jYYYY-jMM-jDD')} />
                                                <Td text=''>
                                                    {
                                                        item.subscriptionCount === 0 ?
                                                            <Link to={Pages.services.plan + item.id}>
                                                                <Button
                                                                    className='h-8 bg-transparent border border-black text-black  text-xs'
                                                                >
                                                                    <div className='flex gap-2 items-center'>
                                                                        <Add size={20} color='black' />
                                                                        <div>{t('service.add_plan')}</div>
                                                                    </div>
                                                                </Button>
                                                            </Link>
                                                            :
                                                            <Link to={Pages.services.plan + item.id} className='flex gap-1 text-sm text-[#0047FF]'>
                                                                <div>{item.subscriptionCount}</div>
                                                                <div>{t('service.active_plan')}</div>
                                                            </Link>
                                                    }
                                                </Td>
                                                <Td text={''}>
                                                    <ToggleStatusService
                                                        id={item.id}
                                                        status={item.isActive}
                                                    />
                                                </Td>
                                                <Td text={''}>
                                                    <Link to={Pages.services.update + item.id}>
                                                        <Eye size={20} color='#8C90A3' />
                                                    </Link>
                                                </Td>
                                                <Td text={''} />
                                            </tr>
                                        )
                                    })
                                }

                            </tbody>
                        </table>

                        <div className='flex justify-end pb-5'>
                            <Pagination
                                currentPage={page}
                                totalPages={getServices.data?.data?.pager?.totalPages}
                                onPageChange={setPage}
                            />
                        </div>
                    </div>
            }
        </div>
    )
}

export default ListService