import { FC, useMemo } from 'react'
import ReactQuill from 'react-quill-new'
import 'react-quill-new/dist/quill.snow.css'

interface EmailEditorProps {
    value: string
    onChange: (value: string) => void
    placeholder?: string
}

const EmailEditor: FC<EmailEditorProps> = ({
    value,
    onChange,
    placeholder = 'متن پیام خود را وارد کنید...'
}) => {
    const modules = useMemo(() => ({
        toolbar: [
            ['bold', 'italic', 'underline'],
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            [{ 'align': [] }],
            [{ 'direction': 'rtl' }],
            ['link'],
            [{ 'color': [] }, { 'background': [] }],
            [{ 'font': [] }, { 'size': ['small', false, 'large', 'huge'] }],
            ['clean']
        ],
    }), [])

    const formats = [
        'bold', 'italic', 'underline',
        'list', 'bullet',
        'align', 'direction',
        'link',
        'color', 'background',
        'font', 'size'
    ]

    return (
        <div dir="rtl" className="text-right">
            <style>{`
                .ql-editor {
                    direction: rtl;
                    text-align: start;
                    unicode-bidi: plaintext;
                    font-family: 'Irancell', 'Vazirmatn', sans-serif;
                    font-size: 14px;
                    line-height: 1.6;
                    min-height: 120px;
                }
                .ql-editor p {
                    unicode-bidi: plaintext;
                    text-align: start;
                    direction: auto;
                }
                .ql-editor.ql-blank::before {
                    direction: rtl;
                    text-align: right;
                    font-style: normal;
                    color: #9ca3af;
                }
                .ql-toolbar {
                    border-top: 1px solid #e5e7eb;
                    border-left: 1px solid #e5e7eb;
                    border-right: 1px solid #e5e7eb;
                    border-radius: 8px 8px 0 0;
                }
                .ql-container {
                    border-bottom: 1px solid #e5e7eb;
                    border-left: 1px solid #e5e7eb;
                    border-right: 1px solid #e5e7eb;
                    border-radius: 0 0 8px 8px;
                }
                .ql-snow .ql-picker-label {
                    color: #374151;
                }
                .ql-snow .ql-stroke {
                    stroke: #6b7280;
                }
                .ql-snow .ql-fill {
                    fill: #6b7280;
                }
            `}</style>
            <ReactQuill
                theme="snow"
                value={value}
                onChange={onChange}
                placeholder={placeholder}
                modules={modules}
                formats={formats}
                className="bg-white rounded-lg"
            />
        </div>
    )
}

export default EmailEditor 