import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import {useEffect, useState} from "react";
type RichModelProps = {
    defaultValue: string | number;
    placeholder: string | number;
    onChange : (values: object) => void;
};

import he from 'he';
const RichComponent: React.FC<RichModelProps> = ({ defaultValue,placeholder, onChange }) => {
    const [editorValue, setEditorValue] = useState(defaultValue ? he.decode(defaultValue) : defaultValue);
    
    const handleChange = (content) => {
        setEditorValue(content);
        onChange(content);
    };

    useEffect(() => {
        if(defaultValue) {
            const textContent  = defaultValue.replace(/<[^>]*>/g, '');
            if(textContent) {
                handleChange(defaultValue)
            } else {
                handleChange('')
            }
        }
    }, [defaultValue]);
    return (
        <div>
            <ReactQuill
                bounds={document.body}
                modules={{
                    toolbar: [
                        ["bold", "italic", "underline", "strike"],       // 加粗 斜体 下划线 删除线
                        ["blockquote", "code-block"],                    // 引用  代码块
                        [{ list: "ordered" }, { list: "bullet" }],       // 有序、无序列表
                        [{ indent: "-1" }, { indent: "+1" }],            // 缩进
                        [{ size: ["small", false, "large", "huge"] }],   // 字体大小
                        [{ header: [1, 2, 3, 4, 5, 6, false] }],         // 标题
                        [{ color: [] }, { background: [] }],             // 字体颜色、字体背景颜色
                        [{ align: [] }],                                 // 对齐方式
                        ["clean"],                                       // 清除文本格式
                        ["link", "image", "video"]                       // 链接、图片、视频
                    ],
                }}
                value={editorValue}
                onChange={handleChange}
                // style={{border: '1px solid #ff4d4f' }}
                theme="snow"
                placeholder={placeholder}
            />
        </div>
    );
}


export default RichComponent;