import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import Td from '../../components/Td'
import { useChangeStatusComment, useGetBlogComments } from './hooks/useBlogData'
import { BlogCommentType } from './types/BlogTypes'
import moment from 'moment-jalaali'
import { CloseCircle, TickCircle } from 'iconsax-react'
import { ErrorType } from '../../helpers/types'
import { toast } from '../../components/Toast';
import { usePermissions } from '../../hooks/usePermissions'
const Comments: FC = () => {
    const { t } = useTranslation('global')
    const { canUpdate } = usePermissions()
    const getBlogComments = useGetBlogComments()
    const changeStatusComment = useChangeStatusComment()
    const handleChangeStatus = (id: string, status: string) => {
        changeStatusComment.mutate({ id, status }, {
            onSuccess: () => {
                getBlogComments.refetch()
            },
            onError: (error: ErrorType) => {
                toast(error.response?.data?.error.message[0], 'error')
            }
        })
    }
    return (
        <div className='mt-4 min-h-[500px]'>
            <div className='flex justify-between items-center'>
                <div>
                    {t('blog.comments')}
                </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('blog.user')} />
                            <Td text={t('blog.comment')} />
                            <Td text={t('blog.blog_title')} />
                            <Td text={t('blog.shareDate')} />
                            <Td text={''} />
                        </tr>
                    </thead>
                    <tbody>
                        {getBlogComments.data?.data?.comments?.map((item: BlogCommentType) => (
                            <tr className='tr' key={item.id}>
                                <Td text={`${item.user?.firstName} ${item.user?.lastName}`} />
                                <Td text={item.content} />
                                <Td text={item.blog?.title} />
                                <Td text={moment(item.createdAt).format('jYYYY/jMM/jDD')} />
                                <Td text=''>
                                    {
                                        item.status === 'PENDING' && canUpdate('blog_comments') &&
                                        <div className='flex items-center gap-2'>
                                            <TickCircle onClick={() => handleChangeStatus(item.id, 'APPROVED')} color='green' size={20} />
                                            <CloseCircle onClick={() => handleChangeStatus(item.id, 'REJECTED')} color='red' size={20} />
                                        </div>
                                    }

                                </Td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>

        </div>
    )
}

export default Comments