import TextArea from 'antd/es/input/TextArea'
import { useFormikContext } from 'formik';
import React, { Suspense, useState } from 'react'
import { parseTextAndLatex } from '../../utils/parseTextAndLatex';
import LatexPreview from '../../Components/CustomFields/MathComponent';
import { Checkbox } from 'antd';
import { CheckboxProps } from 'antd/lib';
import { useTranslation } from 'react-i18next';
import { FaPlus } from 'react-icons/fa';
import { useObjectToEdit } from '../../zustand/ObjectToEditState';
import { TextAreaProps } from 'antd/lib/input';
import SpinContainer from '../Layout/SpinContainer';
  const AddLazyModal = React.lazy(()=> import("./AddLaTexModal"));
  const EditLazyModal = React.lazy(()=> import("./EditLaTexModal"));
interface ILaTeXInput extends TextAreaProps {
  name:string,label:string
}
const LaTeXInput = ({name,label,...props}:ILaTeXInput) => {

  
  const {values,setFieldValue,getFieldProps} = useFormikContext<any>()
  const { ShowLatexOption } = useObjectToEdit();
  const [showPreview, setShowPreview] = useState(false) ;
    const value  = getFieldProps(name)?.value
  const handleChangeInput =
  (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
  ) => {
    setFieldValue(name,e.target.value);
  };
  
  const Preview =  parseTextAndLatex(value ?? "") ; 
  
  const onPreviewChange: CheckboxProps['onChange'] = (e) => {
    const value = e.target.checked
    setShowPreview(value)
  };
  const [t] = useTranslation()
  
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isEditModalOpen, setIsEditModalOpen] = useState(false);

  const [Latex, setLatex] = useState<string>("")
  
  
  const showModal = () => {
    setIsModalOpen(true);
  };
  

  const handelEditModal = (item:any)=>{
    console.log(item);
    
    setLatex(item)
    setIsEditModalOpen(true)
  }
  return (
    <div className='LaTeXInput'>

 <label htmlFor={name} className="text">
        {t(`${label ? label : name}`)}
      </label>

    <div className='LaTeXInputArea'>
         <TextArea
    size="large"
    showCount
    maxLength={1000}
    autoSize={{ minRows: 6, maxRows: 10 }} 
    style={{height:"400px"}}
    onChange={handleChangeInput}
    value={value}
    {...props}
    
  />
   {ShowLatexOption && 
  <div className='LaTeXInputOptions'>
   
  <Checkbox onChange={onPreviewChange}>{t("header.show_preview")}</Checkbox>
  <button type='button' className='addMML' onClick={showModal}> <FaPlus/> {t("MML")} </button>

  </div>
    
  }
{showPreview && 
    <div className='showPreviewInput'>
    {Preview?.map((item:any,index:number)=>{
      if(item?.isLatex){
        return <div key={index} onClick={()=>handelEditModal(item)} className='LatexPreview'> <LatexPreview   Latex={item?.text} /> </div>
      }
      return <div key={index}>
            {item?.text}
      </div>
    })} 
    </div>
}
    </div>


    <Suspense fallback={<SpinContainer/>}>
    <AddLazyModal  name={name}  Latex={Latex} isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} setLatex={setLatex} />

    <EditLazyModal  name={name}  Latex={Latex} isModalOpen={isEditModalOpen} setIsModalOpen={setIsEditModalOpen} setLatex={setLatex} />
    </Suspense>

    </div>
  )
}

export default LaTeXInput