import { Modal, Switch } from "antd";
import TextArea from "antd/es/input/TextArea";
import { useFormikContext } from "formik";
import React, { useState } from "react";
import { convertMathMLToLaTeX } from "../../utils/convertMathMLToLaTeX";
import { useTranslation } from "react-i18next";
import { toast } from "react-toastify";
import ValidationField from "../ValidationField/ValidationField";

const AddLaTexModal = ({
  name,
  setLatex,
  Latex,
  setIsModalOpen,
  isModalOpen,
  setCurrentValue,
}: {
  name: string;
  setLatex: (value: string) => void;
  Latex: string;
  setIsModalOpen: (value: boolean) => void;
  isModalOpen: boolean;
  setCurrentValue: (value: string) => void;
}) => {
  const { values, setFieldValue, getFieldProps } = useFormikContext<any>();
  const [isSwitchActive,setIsSwitchActive] = useState(false)

  const onChange = (checked: boolean) => {
  setIsSwitchActive(checked)
};

  const currentValue = getFieldProps(name).value;
  const handleOk = () => {
    const oldValue = currentValue ?? "";
    const newLatex = convertMathMLToLaTeX(Latex)
    const final =  oldValue + (isSwitchActive ?  " $$$ " + newLatex + " $$$ " : " $$ " + newLatex + " $$ ")
      setFieldValue(name, final);
      setCurrentValue(final);
      setLatex("");
      setIsSwitchActive(false)
      setIsModalOpen(false);

  };

  const handleCancel = () => {
    setIsSwitchActive(false)
    setIsModalOpen(false);
    setLatex("");
  };

  const handleChangeInputLatex = (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
  ) => {
    const newValue = e.target.value;
    setLatex(newValue);
  };

  const [t] = useTranslation();
  return (
    <Modal
      footer={false}
      open={isModalOpen}
      onOk={handleOk}
      onCancel={handleCancel}
    >
      <div className="latexModal">
        <label className="mb-3"> {t("header.past_your_MMl_text")} </label>
        <TextArea
          size="large"
          showCount
          maxLength={5000}
          autoSize={{ minRows: 4, maxRows: 10 }}
          style={{ height: "400px" }}
          onChange={handleChangeInputLatex}
          value={Latex}
        />
        <div>

          <Switch id="switch" value={isSwitchActive} onChange={onChange} />
        <label className="mb-3 "style={{cursor:"pointer"}} htmlFor="switch"> {t("input.moreThanOneLine")} </label>
        </div>
        <div className="buttons">
          <div className="back_button pointer" onClick={handleCancel}>
            {t("practical.cancel")}
          </div>
          <div className="add_button" onClick={handleOk}>
            {t(`practical.${"add"}`)}
          </div>
        </div>
      </div>
    </Modal>
  );
};

export default AddLaTexModal;
