import React, { useEffect, useState } from "react";
import { Input, Modal, Spin } from "antd";
import { useModalState } from "../../../zustand/Modal";
import { ModalEnum } from "../../../enums/Model";
import { useDeleteCourse, useGetAllCourse } from "../../../api/course";
import { useNavigate, useParams } from "react-router-dom";
import { useTranslation } from "react-i18next";

const ModalForm: React.FC = () => {
  const { isOpen, setIsOpen } = useModalState((state) => state);
  const [inputValue, setInputValue] = useState("");

  const { mutate, isSuccess, isLoading } = useDeleteCourse();
  const navigate = useNavigate();
  const { course_id } = useParams();

  const { data: edu_class } = useGetAllCourse({
    show: course_id,
  });

  const course_name = edu_class?.data?.name || "";
  const full_name = " " + course_name;
  useEffect(() => {
    if (isSuccess) {
      navigate(-1);
      setIsOpen("");
      setInputValue("");
    }
  }, [isSuccess, navigate, setIsOpen]);

  const handleSubmit = () => {
    mutate({
      id: Number(course_id),
    });
  };

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

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    // Step 2: Handle changes to the input field
    setInputValue(e.target.value);
  };

  const [t] = useTranslation();

  return (
    <>
      <Modal
        className="ModalForm"
        centered
        width={"40vw"}
        footer={null}
        open={isOpen === ModalEnum?.COURSE_DELETE}
        onCancel={handleCancel}
      >
        <header>
          {" "}
          {t("practical.delete")} ({full_name}){" "}
        </header>
        <main className="main_modal">
          <div className="ValidationField w-100 mb-5">
            <label className="text ">
              {t("practical.to_confirm_deletion_please_re_enter")}{" "}
              {t("models.course")} {t("input.name")}
            </label>

            <Input
              size="large"
              type="text"
              placeholder={`${t("practical.enter")} ${t("input.name")} ${t("models.course")} `}
              value={inputValue}
              onChange={handleChange}
            />
          </div>

          <div className="buttons">
            <div onClick={handleCancel}>{t("practical.cancel")}</div>
            <button
              className={course_name !== inputValue ? "disabled_button" : ""}
              disabled={course_name !== inputValue || isLoading}
              onClick={handleSubmit}
              type="submit"
            >
              {t("practical.delete")}
              {isLoading && (
                <span className="Spinier_Div">
                  <Spin />
                </span>
              )}
            </button>
          </div>
        </main>
      </Modal>
    </>
  );
};

export default ModalForm;
