import DefaulModal from '@/components/DefaulModal'
import { InboxMessage } from '../types/Types'
import Button from '@/components/Button'
import { FC } from 'react'
import Skeleton from 'react-loading-skeleton'
import { useNavigate } from 'react-router-dom'

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const SummarizeModal: FC<{ open: boolean, onClose: () => void, isPending: boolean, item: InboxMessage, id: string, mailbox: string, data: any }> = ({ open, onClose, isPending, item, id, mailbox, data }) => {
    const navigate = useNavigate()
    return (
        <DefaulModal
            open={open}
            close={onClose}
            isHeader
            title_header='پیش نمایش ایمیل'
        >
            <div className='mt-5'>
                {isPending ? (
                    <div>
                        <div className='text-xs'>
                            موضوع:
                        </div>
                        <div className='mt-1.5'>
                            <Skeleton height={16} />
                        </div>

                        <div className='mt-7'>
                            <div className='text-xs'>
                                خلاصه متن:
                            </div>
                            <div className='mt-3'>
                                <Skeleton height={16} count={4} />
                            </div>
                        </div>
                    </div>
                ) : (
                    <div>
                        <div className='text-xs'>
                            موضوع:
                        </div>
                        <div className='mt-1.5 text-xs'>
                            {item.subject}
                        </div>

                        <div className='mt-7'>
                            <div className='text-xs'>
                                خلاصه متن:
                            </div>
                            <div className='mt-3 leading-5 text-xs text-description'>
                                {data?.data?.summary}
                            </div>
                        </div>
                    </div>
                )}

                <div className='mt-14 flex justify-end'>
                    <div className='flex gap-3'>
                        <Button
                            label='بستن'
                            variant='secondary'
                            className='w-fit !px-10'
                            onClick={onClose}
                        />
                        <Button
                            label='مشاهده'
                            className='w-fit !px-10'
                            onClick={() => navigate(`/mail/${id}/${mailbox}`)}
                        />
                    </div>
                </div>
            </div>
        </DefaulModal>
    )
}

export default SummarizeModal