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 { QUESTION_OBJECT_KEY } from "../../config/AppKey";
import { Popconfirm, Popover } from "antd";
import { CombinationKeyEnum } from "../../enums/CombinationKeyEnum";
import { PopconfirmProps } from "antd/lib";

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

  const handleChange = () => {
    setSavedQuestionData(null);
    localStorage.removeItem(QUESTION_OBJECT_KEY);
    if (isBseQuestion) {
      setIsBseQuestion(false);
      setValues(null);
      setFieldValue("isBase", 0);
    } else {
      setIsBseQuestion(true);
      setValues(null);
      setFieldValue("isBase", 1);
    }
  };

  const confirm: PopconfirmProps['onConfirm'] = (e) => {
    console.log(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>
      <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>
      </div>
    </header>
  );
};

export default Header;