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";

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);
    }
  };

  return (
    <header className="exercise_add_header mb-4">
      <div>
        {t("practical.add")} {t("models.exercise")}{" "}
      </div>
      <div>
        <GoArrowSwitch onClick={handleChange} className="m-2" />
        {isBseQuestion || values?.isBase === 1
          ? t("header.malty_exercise")
          : t("header.exercise")}
      </div>
    </header>
  );
};

export default Header;
