import { FC } from 'react'
import { useGetCompanies } from './hooks/useCompanyData'
import Td from '../../components/Td'
import PageLoading from '../../components/PageLoading'
import { useTranslation } from 'react-i18next'
import { CompanyItemType } from './types/CompanyTypes'
import moment from 'moment-jalaali'
import { Edit } from 'iconsax-react'
import DeleteCompany from './components/DeleteCompany'
import { Link } from 'react-router-dom'
import { Pages } from '../../config/Pages'
import ToggleStatusCompany from './components/ToggleStatus'

const CompanyList: FC = () => {

    const { t } = useTranslation('global')
    const { data, isLoading, refetch } = useGetCompanies(1)

    return (
        <div>
            {
                isLoading ?
                    <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('company.company_name')} />
                                    <Td text={t('company.ceo_name')} />
                                    <Td text={t('company.industry')} />
                                    <Td text={t('company.invoice_count')} />
                                    <Td text={t('company.status')} />
                                    <Td text={t('company.created_at')} />
                                    <Td text={''} />
                                </tr>
                            </thead>
                            <tbody>
                                {
                                    data?.data?.companies?.map((item: CompanyItemType) => {
                                        return <tr className='tr' key={item.id}>
                                            <Td text={item.name} />
                                            <Td text={item.user?.firstName + ' ' + item.user?.lastName} />
                                            <Td text={item.industry?.title} />
                                            <Td text={item.invoiceCount.toString()} />
                                            <Td text=''>
                                                <ToggleStatusCompany
                                                    defaultActive={item.isActive}
                                                    id={item.id}
                                                />
                                            </Td>
                                            <Td text={moment(item.createdAt).format('jYYYY/jMM/jDD')} />
                                            <Td text={''}>
                                                <div className='flex gap-2'>
                                                    <Link to={Pages.company.detail + item.id}>
                                                        <Edit size={20} color='#888' />
                                                    </Link>
                                                    <DeleteCompany refetch={() => refetch()} id={item.id} />
                                                </div>
                                            </Td>
                                        </tr>
                                    })
                                }
                            </tbody>
                        </table>
                    </div>
            }
        </div>
    )
}

export default CompanyList