import { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { Link } from 'react-router-dom'
import { Pages } from '../../config/Pages'
import { useDeleteAnnoncement, useGetAnnoncements } from './hooks/useAnnoncementData'
import { AnnoncementItemType } from './types/AnnoncementTypes'
import Button from '../../components/Button'
import { Add, Edit, Trash } from 'iconsax-react'
import Td from '../../components/Td'
import moment from 'moment-jalaali'
import Pagination from '../../components/Pagination'
import { toast } from 'react-toastify'
import { ErrorType } from '../../helpers/types'

const AnnouncementtList: FC = () => {

    const { t } = useTranslation('global')
    const [page, setPage] = useState<number>(1)
    const getAnnoncements = useGetAnnoncements(page, '', '')
    const deleteAnnoncement = useDeleteAnnoncement()

    const handleDelete = (id: string) => {
        deleteAnnoncement.mutate(id, {
            onSuccess: () => {
                toast.success(t('success'))
                getAnnoncements.refetch()
            },
            onError: (error: ErrorType) => {
                toast.error(error.response?.data?.error.message[0])
            }
        })
    }

    return (
        <div className='mt-4 text-sm'>

            <div className='flex w-full justify-between items-center'>
                <div>
                    {t('announcement.announcements')}
                </div>
                <div>
                    <Link to={Pages.announcement.create}>
                        <Button
                            className='px-5'
                        >
                            <div className='flex gap-2'>
                                <Add
                                    className='size-5'
                                    color='#fff'
                                />
                                <div>{t('announcement.add_announcement')}</div>
                            </div>
                        </Button>
                    </Link>
                </div>
            </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('announcement.title')} />
                            <Td text={t('announcement.summary')} />
                            <Td text={t('announcement.service')} />
                            <Td text={t('announcement.created_date')} />
                            <Td text={t('announcement.publish_date')} />
                            <Td text={t('')} />
                        </tr>
                    </thead>
                    <tbody>
                        {
                            getAnnoncements.data?.data?.announcements?.map((item: AnnoncementItemType) => {
                                return (
                                    <tr key={item.id} className='tr'>
                                        <Td text={item.title} />
                                        <Td text={''}>
                                            <p dangerouslySetInnerHTML={{ __html: item.content }}></p>
                                        </Td>
                                        <Td text={item?.targetService?.name} />
                                        <Td text={''}>
                                            <div className='dltr text-right'>
                                                {moment(item.createdAt).format('jYYYY-jMM-jDD HH:mm')}
                                            </div>
                                        </Td>
                                        <Td text={moment(item.publishAt).format('jYYYY-jMM-jDD')} />
                                        <Td text={''}>
                                            <div className='flex gap-2'>
                                                <Link to={Pages.announcement.detail + item.id}>
                                                    <Edit
                                                        className='size-5'
                                                        color='#888'
                                                    />
                                                </Link>
                                                <Trash
                                                    className='size-5'
                                                    color='#888'
                                                    onClick={() => handleDelete(item.id)}
                                                />
                                            </div>
                                        </Td>
                                    </tr>
                                )
                            })
                        }
                    </tbody>
                </table>
            </div>

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


        </div>
    )
}

export default AnnouncementtList