import React, { useRef, useCallback } from "react";
import SimpleMDE, { SimpleMdeReact } from "react-simplemde-editor";
import MathQuillContainer from "./MathQuillContainer";
// import "easymde/dist/easymde.min.css";


const SimpleEditorOption = (props) => {
    const { idName="rndm", actualOptionData, toolbarContainerLoaded } = props;
    const [modalOpen, setModalOpen] = React.useState(false);

    const editorRef = useRef();
    // easyMDE instance ref
    const easyMde = useRef(null);


    const [value, setValue] = React.useState();

    const onChange = React.useCallback((value) => {
        setValue(value);
        actualOptionData.current[idName] = {
            text: value,
            isCorrect: actualOptionData.current[idName].isCorrect? actualOptionData.current[idName].isCorrect: false
          }
    }, []);

    const getMdeInstanceCallback = useCallback((simpleMde) => {
        easyMde.current = simpleMde;
        let editorElement = document.querySelector(`#${easyMde.current.element.id}-wrapper`);

        editorElement.addEventListener('mousedown', toolbarSummon);
    }, []);

    const toolbarSummon = React.useCallback((e) => {
        e.stopPropagation();
        let editorsToolbar = document.querySelectorAll(".editor-toolbar");
        for(let i of editorsToolbar) {
            // i.style.display = "none";
            i.style.maxHeight = "0";
            i.style.paddingBlock = "0";
            i.style.opacity = "0";
        }
        let editorTool = document.querySelector(`#${easyMde.current.element.id}-wrapper .editor-toolbar`);
        // editorTool.style.display = "block";
        editorTool.style.maxHeight = "200px";
        editorTool.style.paddingBlock = "9px";
        editorTool.style.opacity = "1";
    }, []);

    // Cleanup function
    React.useEffect(() => {
        return () => {
            let editorElement = document.querySelector(`#${easyMde.current.element.id}-wrapper`);
            editorElement.removeEventListener('mousedown', toolbarSummon);
        }
    }, []);

    React.useEffect(() => {
        if (actualOptionData.current[idName] && actualOptionData.current[idName].text) {
            setValue(actualOptionData.current[idName].text);
        }
        if (actualOptionData.current[idName] && !actualOptionData.current[idName].text) {
            setValue("");
        }
    }, [actualOptionData.current.length]);

    const Options = React.useMemo(() => {
        return {
            // autofocus: true,
            spellChecker: false,
            status: false,
            placeholder: props.placeholder,
            minHeight: "50px",
            previewRender: (text) => {
                // first process the markdown
                const markdownHtml = easyMde.current.markdown(text);

                // typeset with MathJax
                const container = document.createElement("div");
                container.innerHTML = markdownHtml;
                props.mathJax.current.typesetClear([container]);
                props.mathJax.current.typeset([container]);
                return container.innerHTML;
            },
            toolbar: [
                "bold",
                "italic",
                "|",
                "code",
                "|",
                "table",
                "|",
                "preview",
                "|",
                "undo",
                {
                    name: "formula-button",
                    title: "Math Expression",
                    action: (editor) => {
                        const cm = editor.codemirror;
                        editorRef.current = cm;
                        setModalOpen(true);
                    },
                    className: "fa fa-calculator"
                }
            ]
            // toolbar: false
        };
    }, []);

    return (
        <>{toolbarContainerLoaded && <>
            <SimpleMdeReact
                id={"option-"+props.idName}
                value={value}
                onChange={onChange}
                options={Options}
                getMdeInstance={getMdeInstanceCallback}
            />
            {modalOpen && (
                <MathQuillContainer onClose={setModalOpen} codemirror={editorRef} easymde={easyMde.current} />
            )}
        </>}</>
    );
};

export default SimpleEditorOption;