import { useFormikContext } from "formik";
import React from "react";
import { useTranslation } from "react-i18next";
import { GoArrowSwitch } from "react-icons/go";
import { useObjectToEdit } from "../../zustand/ObjectToEditState";
import { Popconfirm, Popover } from "antd";
import { CombinationKeyEnum } from "../../enums/CombinationKeyEnum";
import { PopconfirmProps } from "antd/lib";

const Header = () => {
  const [t] = useTranslation();
  const { values, setValues } = useFormikContext<any>();
  const { isBseQuestion, setIsBseQuestion } = useObjectToEdit();
  const isEdited = ()=>{

    if(isBseQuestion || values?.isBase === 1){

      const content = !values?.content ;
      const content_image = !values?.content_image ;

      const Questions = values?.Questions?.length <= 1 && values?.Questions?.[0]?.answers?.length === 0 ;
      const defaultQuestionHint = Object.keys(values?.Questions?.[0] ?? {})?.length <= 1
      
      

      if(content && content_image && Questions && defaultQuestionHint) {
        return false
      }
    }else{      
      const content = !values?.content ;
      const content_image = !values?.content_image ;
      const hint = !values?.hint ;
      const answers = !(values?.answers?.length > 0)  ;
      const tags = !(values?.tags?.length > 0)  ;
      if(content && content_image && hint && answers && tags) {
        return false
      }
    }
    return true
  }
    
  const handleChange = () => {
    if (isBseQuestion) {
      setIsBseQuestion(false);
      setValues(null);
    } else {
      setIsBseQuestion(true);
      setValues(null);
    }
  };

  const confirm: PopconfirmProps['onConfirm'] = (e) => {
    setTimeout(() => {
      handleChange() ;
    }, 500);
    
  };

  const content = (
    <div>
      <p>
        {" "}
        (CTRL + SHIFT + {CombinationKeyEnum.CHOICE}) {t("header.add_choice")}{" "}
      </p>
      <p>
        {" "}
        (CTRL + SHIFT + {CombinationKeyEnum.QUESTION}){" "}
        {t("header.add_question")}{" "}
      </p>
    </div>
  );

  return (
    <header className="exercise_add_header mb-4">
      <article>
        <Popover content={content} title={t("practical.Abbreviations")}>
          <img src="/Icon/QuestionIcon.svg" alt="" />
        </Popover>

        <div>
          {t("practical.add")} {t("models.exercise")}{" "}
        </div>
      </article>
      <div>
        {
          isEdited() ? 
          <Popconfirm 
    title={t("header.this_will_un_do_all_your_changes")}
    okText={t("practical.yes")}
    cancelText={t("practical.no")}
    onConfirm={()=>{confirm()}}
    defaultOpen={false}

  >
  
        <GoArrowSwitch className="m-2" />
        {isBseQuestion || values?.isBase === 1
          ? t("header.malty_exercise")
          : t("header.exercise")}

  </Popconfirm>
        

          : 

          <>
          
          
          <GoArrowSwitch onClick={()=>confirm()} className="m-2" />
          {isBseQuestion || values?.isBase === 1
            ? t("header.malty_exercise")
            : t("header.exercise")}
          </>

  

        }
      
      </div>
    </header>
  );
};

export default Header;