import { FC, useState } from 'react'
import { useDeleteCriticismsDetail, useGetCriticismsList } from './hooks/useCriticismsData'
import { useTranslation } from 'react-i18next'
import Td from '../../components/Td'
import { Link } from 'react-router-dom'
import { Eye, Trash } from 'iconsax-react'
import { Pages } from '../../config/Pages'
import { CriticismsItemTypes } from './types/CriticismsTypes'
import moment from 'moment-jalaali'
import ModalConfrim from '../../components/ModalConfrim'
import Pagination from '../../components/Pagination'

const CriticismsList: FC = () => {

    const [itemId, setItemId] = useState<string>('')
    const [page, setPage] = useState<number>(1)
    const [openConfrim, setOpenConfrim] = useState(false)
    const getCriticismsList = useGetCriticismsList(page)
    const deleteCriticisms = useDeleteCriticismsDetail()

    const { t } = useTranslation('global')

    const handleDelete = (id?: string, confrim: boolean = false) => {
        if (confrim) {

            deleteCriticisms.mutate(itemId, {
                onSuccess: () => {
                    getCriticismsList.refetch()
                    setOpenConfrim(false)
                    setItemId('')
                }
            })
        } else if (id) {
            setItemId(id)
            setOpenConfrim(true)
        }
    }

    return (
        <div className='mt-4'>
            <div>
                {t('criticisms.criticisms_list')}
            </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('criticisms.number')} />
                            <Td text={t('criticisms.title_criticisms')} />
                            <Td text={t('criticisms.summary_criticisms')} />
                            <Td text={t('criticisms.date_created')} />
                            <Td text={t('detail')} />
                            <Td text={''} />
                        </tr>
                    </thead>
                    <tbody>
                        {
                            getCriticismsList.data?.data?.criticisms?.map((item: CriticismsItemTypes) => {
                                return (
                                    <tr key={item.id} className='tr'>
                                        <Td text={item.numericId} />
                                        <Td text={item.title} />
                                        <Td text={item.content.substring(0, 100)} />
                                        <Td text={moment(item.createdAt).format('HH:mm jYYYY-jMM-jDD')} />
                                        <Td text={''}>
                                            <Link to={Pages.criticisms.detail + item.id}>
                                                <Eye size={20} color='#8C90A3' />
                                            </Link>
                                        </Td>
                                        <Td text=''>
                                            <Trash onClick={() => handleDelete(item.id)} size={20} color='#8C90A3' className='cursor-pointer' />
                                        </Td>
                                    </tr>
                                )
                            })
                        }

                    </tbody>
                </table>

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

                <ModalConfrim
                    isOpen={openConfrim}
                    close={() => setOpenConfrim(false)}
                    onConfrim={() => handleDelete('', true)}
                    isLoading={deleteCriticisms.isPending}
                />
            </div>
        </div>
    )
}

export default CriticismsList