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

interface TextEditorProps {
    value: string
    onChange: (value: string) => void
    placeholder?: string
    className?: string
    height?: string
}

const TextEditor: FC<TextEditorProps> = ({
    value,
    onChange,
    placeholder = 'متن خود را وارد کنید...',
    className = '',
    height = 'h-[200px]'
}) => {
    const modules = {
        toolbar: [
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
            [{ 'font': [] }],
            [{ 'size': [] }],
            ['bold', 'italic', 'underline', 'strike', 'blockquote'],
            [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }],
            ['link', 'image', 'video'],
            [{ 'color': [] }, { 'background': [] }],
            [{ 'align': [] }],
            ['clean']
        ],
        clipboard: {
            matchVisual: false,
        },
    }

    const formats = [
        'header', 'font', 'size',
        'bold', 'italic', 'underline', 'strike', 'blockquote',
        'list', 'bullet', 'indent',
        'link', 'image', 'video',
        'color', 'background',
        'align'
    ]

    return (
        <div
            className={`${className} mb-14`}
            dir="rtl"
            style={{ '--placeholder-text': `"${placeholder}"` } as React.CSSProperties}
        >
            <ReactQuill
                theme="snow"
                value={value}
                onChange={onChange}
                modules={modules}
                formats={formats}
                className={height}
            />
        </div>
    )
}

export default TextEditor
