import { Button, Typography } from "antd";
import React, { useRef, useState } from "react";
import ReactDOM from "react-dom";
import { addStyles, EditableMathField } from "react-mathquill";
import './mathQuillContainer.css';
import { useTranslation } from "react-i18next";

addStyles();

function MathQuillContainer(props) {
  const {t} = useTranslation();
  const [latex, setLatex] = useState("\\frac{1}{\\sqrt{2}}\\cdot 2");
  const mathRaw = useRef(null);

  function insertIntoCM(e) {
    let cm = props.codemirror.current;
    // const text = cm.getSelection(); // You can also implement your reference picker here.
    cm.replaceSelection("$" + latex + "$");
    let editorTool = document.querySelector(`#${props.easymde.element.id}-wrapper .editor-toolbar`);
    editorTool.style.maxHeight = "200px";
    editorTool.style.paddingBlock = "9px";
    editorTool.style.opacity = "1";
    cm.focus();
    props.onClose(false);
    // cm.replaceSelection(latex)
  }

  function insertIntoCMBlock(e) {
    let cm = props.codemirror.current;
    // const text = cm.getSelection(); // You can also implement your reference picker here.
    cm.replaceSelection("$$" + latex + "$$");
    let editorTool = document.querySelector(`#${props.easymde.element.id}-wrapper .editor-toolbar`);
    editorTool.style.maxHeight = "200px";
    editorTool.style.paddingBlock = "9px";
    editorTool.style.opacity = "1";
    cm.focus();
    props.onClose(false);
    // cm.replaceSelection(latex)
  }

  return ReactDOM.createPortal(
    <div
      className="formula-generator-wrapper"
      style={{
        position: "absolute",
        top: "0",
        bottom: "0",
        left: "0",
        right: "0",
        zIndex: 1501,
        display: "grid",
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "rgba(0,0,0,0.3)"
      }}
      onMouseDown={(e) => {
        e.stopPropagation();
        props.onClose(false);
        let editorTool = document.querySelector(`#${props.easymde.element.id}-wrapper .editor-toolbar`);
        editorTool.style.maxHeight = "200px";
        editorTool.style.paddingBlock = "9px";
        editorTool.style.opacity = "1";
      }}
    >
      <div
        className="formula-display-frame"
        onMouseDown={(e) => {
          e.stopPropagation();
        }}
      >
        <Typography.Title level={3} style={{color: "white"}}>{t('uploadQuestion.enterFormula')}:</Typography.Title>
        <Typography.Text style={{color: "white"}}>{t('uploadQuestion.inputFormula')}:</Typography.Text>
        <EditableMathField
          id="formula-input"
          latex={latex}
          onChange={(mathField) => setLatex(mathField.latex())}
          mathquillDidMount={(mathraw) => (mathRaw.current = mathraw.latex())}
        />
        <Typography.Text style={{color: "white"}}>{t('uploadQuestion.previewLatex')}:</Typography.Text>
        <p className="latex-container">{latex}</p>
        <Button className="mr-1-0" onClick={insertIntoCM}> {t('uploadQuestion.insertInline')} </Button>
        <Button onClick={insertIntoCMBlock}> {t('uploadQuestion.insertBlock')} </Button>
      </div>
    </div>,
    document.querySelector("#modal-root-test")
  );
}

export default MathQuillContainer;