import React from "react";
import { Modal } from "antd";
import { useModalState } from "../../../../zustand/Modal";
import { ModalEnum } from "../../../../enums/Model";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { QUESTION_OBJECT_KEY } from "../../../../config/AppKey";

const AcceptModal: React.FC = () => {
  const { isOpen, setIsOpen } = useModalState((state) => state);
  const navigate = useNavigate();

  const handleSubmit = () => {
    localStorage.removeItem(QUESTION_OBJECT_KEY);
    console.log("Handle submit clicked");
    setIsOpen("");

    navigate(-1);
  };

  const handleCancel = () => {
    setIsOpen("");
  };

  const [t] = useTranslation();
  return (
    <>
      <Modal
        className="ModalForm"
        centered
        width={"40vw"}
        footer={null}
        open={isOpen === ModalEnum?.QUESTION_ACCEPT}
        onCancel={handleCancel}
      >
        <header> {t("practical.accept_back")}</header>

        <main className="main_modal">
          <div className="ValidationField w-100 mb-5">
            <label className="text h1 ">
              {t(
                "practical.Are you sure you want to go back and not save any changes?",
              )}{" "}
            </label>
          </div>

          <div className="buttons">
            <div onClick={handleCancel}>{t("practical.cancel")}</div>
            <div onClick={handleSubmit}>{t("practical.accept")}</div>
          </div>
        </main>
      </Modal>
    </>
  );
};

export default AcceptModal;