import Button from '@/components/Button'
import { ArrowRight, DocumentDownload, Printer } from 'iconsax-react'
import { useNavigate } from 'react-router-dom'
import { FC } from 'react'
import { useTranslation } from 'react-i18next'
import MessageUnread from './MessageUnread'
import MessageArchive from './MessageArchive'
import MessageSpam from './MessageSpam'
import { MailboxEnum } from '../enum/Enum'
import MessageFavorite from './MessageFavorite'
import MessageTrash from './MessageTrash'
import { MessageDetail } from '../types/Types'
import { sanitizeEmailHTML, detectTextDirection } from '@/config/func'

const Header: FC<{
    mailBoxName: MailboxEnum,
    flagged: boolean,
    messageDetail?: MessageDetail
}> = ({ mailBoxName, flagged, messageDetail }) => {

    const navigate = useNavigate()
    const { t } = useTranslation()

    const handlePrint = () => {
        if (!messageDetail) return

        // Create a new window for printing
        const printWindow = window.open('', '_blank', 'width=800,height=600')
        if (!printWindow) return

        // Get the email content
        let content = ''
        if (messageDetail.html && messageDetail.html.length > 0) {
            content = sanitizeEmailHTML(messageDetail.html.join(''))
        } else {
            content = messageDetail.text || 'محتوای پیام'
        }

        // Detect text direction
        const direction = detectTextDirection(content)

        // Create print content
        const printContent = `
            <!DOCTYPE html>
            <html dir="${direction}">
            <head>
                <meta charset="utf-8">
                <title>پرینت ایمیل</title>
                <style>
                    body {
                        font-family: Arial, sans-serif;
                        line-height: 1.6;
                        margin: 20px;
                        direction: ${direction};
                    }
                    .email-header {
                        border-bottom: 2px solid #333;
                        padding-bottom: 10px;
                        margin-bottom: 20px;
                    }
                    .email-content {
                        font-size: 14px;
                        line-height: 1.7;
                    }
                    @media print {
                        body { margin: 0; }
                        .no-print { display: none; }
                    }
                </style>
            </head>
            <body>
                <div class="email-header">
                    <h2>موضوع: ${messageDetail.subject || 'بدون موضوع'}</h2>
                    <p><strong>فرستنده:</strong> ${messageDetail.from.name || messageDetail.from.address} &lt;${messageDetail.from.address}&gt;</p>
                    <p><strong>تاریخ:</strong> ${new Date(messageDetail.date).toLocaleDateString('fa-IR')}</p>
                </div>
                <div class="email-content">
                    ${content}
                </div>
            </body>
            </html>
        `

        // Write content and print
        printWindow.document.write(printContent)
        printWindow.document.close()

        // Wait for content to load then print
        printWindow.onload = () => {
            printWindow.print()
            printWindow.close()
        }
    }

    return (
        <div className='flex justify-between items-center border-b border-border pb-6'>
            <div className='flex flex-1 lg:gap-4'>
                <ArrowRight size={18} color='black' onClick={() => navigate(-1)} />
                <div className='flex xl:gap-4 gap-4 flex-1 lg:justify-start justify-center '>
                    <MessageUnread />
                    <MessageSpam isActiveSpam={mailBoxName === MailboxEnum.Junk} />
                    <MessageArchive isActiveArchive={mailBoxName === MailboxEnum.ARCHIVE} />
                    <MessageFavorite flagged={flagged} />
                    {/* <VolumeMute size={18} color='black' className='xl:block hidden' /> */}
                    <MessageTrash isActiveTrash={mailBoxName === MailboxEnum.TRASH} />
                    {/* <More size={18} color='black' className='rotate-90' /> */}
                </div>
            </div>

            <div className='flex gap-2'>
                <Button
                    variant='secondary'
                    className='lg:block hidden'
                >
                    <div className='flex gap-2 items-center xl:px-5'>
                        <DocumentDownload size={20} color='black' />
                        <span className='pt-0.5 xl:block hidden'>{t('mail.download')}</span>
                    </div>
                </Button>
                <Button
                    variant='secondary'
                    onClick={handlePrint}
                >
                    <div className='flex gap-2 items-center xl:px-5'>
                        <Printer size={20} color='black' />
                        <span className='pt-0.5 xl:block hidden'>{t('mail.print')}</span>
                    </div>
                </Button>
            </div>
        </div>
    )
}

export default Header