import { useEffect, useRef } from 'react';
import $ from 'jquery';
import 'summernote/dist/summernote-bs4.css';
import 'summernote/dist/summernote-bs4.js';

interface SummernoteProps {
    value: string;
    onChange: (value: string) => void;
}

export default function Summernote({ value, onChange }: SummernoteProps) {
    const editorRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        if (editorRef.current) {
            ($(editorRef.current) as any).summernote({
                height: 200,
                callbacks: {
                    onChange: (contents: string) => {
                        onChange(contents);
                    },
                },
            });
            ($(editorRef.current) as any).summernote('code', value);
        }
        return () => {
            if (editorRef.current) {
                ($(editorRef.current) as any).summernote('destroy');
            }
        };
    }, [value]);

    return <div ref={editorRef}></div>;
}