import { Modal } 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';

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} = useFormikContext<any>()


    const handleOk = () => {        
      const oldValue = values?.[name] ?? ""; 
      const newLatex = convertMathMLToLaTeX(Latex);
  
    if(newLatex){
      setFieldValue(name, oldValue + " $$ " +newLatex +" $$ ");
      setCurrentValue(oldValue + " $$ " +newLatex +" $$ ")
      setLatex("")
      setIsModalOpen(false);
    }else{
        setLatex("")
        toast.error(t("validation.that_is_not_a_valid_mml"))
    }
    };
  
    const handleCancel = () => {
      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={1000}
    autoSize={{ minRows: 4, maxRows: 10 }} 
    style={{height:"400px"}}
    onChange={handleChangeInputLatex}
    value={Latex}
  />
    <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