import { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Select from '../../../components/Select'
import Input from '../../../components/Input'
import Td from '../../../components/Td'
import PageLoading from '../../../components/PageLoading'
import { Trash } from 'iconsax-react'
import CreateIndustry from './CreateIndustry'
import { useDeleteIndustry, useGetIndustries } from '../hooks/useCompanyData'
import { IndustryItemType } from '../types/CompanyTypes'
import Pagination from '../../../components/Pagination'
import StatusIndustry from './StatusIndustry'
import UpdateIndustry from './UpdateIndustry'

const Industries: FC = () => {

    const { t } = useTranslation('global')
    const [search, setSearch] = useState<string>('')
    const [page, setPage] = useState<number>(1)
    const [isActive, setIsActive] = useState<'active' | 'deactive' | ''>('')
    const getIndustries = useGetIndustries(page, search, isActive)
    const deleteIndustry = useDeleteIndustry()

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

    return (
        <div className='mt-4'>
            <div>
                {t('service.cateory_services')}
            </div>

            <div className='flex gap-6 mt-9'>
                <div className='flex-1'>
                    <div className='flex justify-between items-center'>
                        <div className='w-32'>
                            <Select
                                items={[
                                    { label: t('all'), value: '' },
                                    { label: t('service.active'), value: 'active' },
                                    { label: t('service.deactive'), value: 'deactive' },
                                ]}
                                placeholder={t('status')}
                                onChange={(e) => setIsActive(e.target.value as 'active' | 'deactive' | '')}
                            />
                        </div>

                        <div className='w-40'>
                            <Input
                                variant='search'
                                placeholder={t('search')}
                                className='bg-white'
                                onChangeSearchFinal={(value) => setSearch(value)}
                            />
                        </div>
                    </div>
                    <div className='flex-1 mt-8 bg-white py-2 xl:px-10 px-5 rounded-3xl'>
                        {
                            getIndustries.isPending ?
                                <div className='mt-4'>
                                    <PageLoading />
                                </div>
                                :
                                <div className='relative overflow-x-auto rounded-3xl w-full'>
                                    <table className='w-full text-sm '>
                                        <thead className='thead'>
                                            <tr>
                                                <Td text='' />
                                                <Td text={t('service.title')} />
                                                <Td text={t('company.count_company')} />
                                                <Td text={t('ticket.status')} />
                                                <Td text={''} />
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {
                                                getIndustries.data?.data?.industries?.map((item: IndustryItemType) => {
                                                    return (
                                                        <tr key={item.id} className='tr'>
                                                            <Td text=''>
                                                                <img src={item.iconUrl} className='size-10 min-w-10 rounded-lg' />
                                                            </Td>
                                                            <Td text={item.title} />
                                                            <Td text={item.companiesCount + ''} />
                                                            <Td text={''}>
                                                                <StatusIndustry
                                                                    defaultActive={item.isActive}
                                                                    id={item.id}
                                                                />
                                                            </Td>
                                                            <Td text={''}>
                                                                <div className='flex gap-2'>
                                                                    <UpdateIndustry refetch={() => getIndustries.refetch()} id={item.id} />
                                                                    <Trash
                                                                        size={20}
                                                                        color='#888888'
                                                                        onClick={() => handleDelete(item.id)}
                                                                    />
                                                                </div>
                                                            </Td>
                                                        </tr>
                                                    )
                                                })
                                            }
                                        </tbody>
                                    </table>
                                    <div className='flex justify-end pb-3'>
                                        <Pagination
                                            currentPage={page}
                                            totalPages={getIndustries.data?.data?.pager?.totalPages}
                                            onPageChange={setPage}
                                        />
                                    </div>
                                </div>
                        }


                    </div>
                </div>

                <CreateIndustry refetch={() => getIndustries.refetch()} />
            </div>
        </div>
    )
}

export default Industries