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 { Popover } from "antd";
import { CombinationKeyEnum } from "../../enums/CombinationKeyEnum";

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 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>
        <GoArrowSwitch onClick={handleChange} className="m-2" />
        {isBseQuestion || values?.isBase === 1
          ? t("header.malty_exercise")
          : t("header.exercise")}
      </div>
    </header>
  );
};

export default Header;