import React, { useEffect, useState } from "react";
import { BsFillCalendar2DateFill } from "react-icons/bs";
import { FaPlus } from "react-icons/fa";
import { useMarkState } from "../../../../../zustand/MarkState";
import useModalHandler from "../../../../../utils/useModalHandler";
import { useObjectToEdit } from "../../../../../zustand/ObjectToEditState";
import { ModalEnum } from "../../../../../enums/Model";
import { useGetAllExam } from "../../../../../api/exam";
import { useParams } from "react-router-dom";
import { Exam } from "../../../../../types/Item";
import Image from "../../../../../Components/Ui/Image";
import { RiDeleteBin6Fill } from "react-icons/ri";
import { useTranslation } from "react-i18next";
import {
  ABILITIES_ENUM,
  ABILITIES_VALUES_ENUM,
} from "../../../../../enums/abilities";
import { hasAbility } from "../../../../../utils/hasAbility";

const Body = () => {
  const { setBodyRadio, NavRadio, setHeaderData, HeaderData, BodyRadio } =
    useMarkState();
  const { edu_class_id } = useParams();
  const [TypeId, setTypeId] = useState(null);

  const { data: Exam } = useGetAllExam(
    { edu_class_id: edu_class_id, exam_type_id: NavRadio },
    { enabled: !!TypeId },
  );
  const Exam_Data = Exam?.data as Exam[];

  let DefaultValue = Exam_Data?.[0] ?? null;
  console.log(Exam_Data?.length);

  useEffect(() => {
    if (!HeaderData) {
      if (Exam_Data?.length > 0) {
        setHeaderData(DefaultValue);
        setBodyRadio(DefaultValue?.id);
      }
    }

    if (HeaderData) {
      if (Exam_Data?.length === 0) {
        setHeaderData(null);
        setBodyRadio(null);
      }
    }
  }, [DefaultValue, HeaderData, setHeaderData]);

  const { handel_open_model } = useModalHandler();
  const { set_object_to_edit } = useObjectToEdit((state) => state);
  const handel_add = () => {
    set_object_to_edit({});
    handel_open_model(ModalEnum?.EXAM_ADD);
  };

  const handel_change = (data: Exam) => {
    setHeaderData(data);
    setBodyRadio(data?.id);
  };
  /// exam index query param  edu_class_id
  ///exam type index

  useEffect(() => {
    setTypeId(NavRadio as any);
  }, [NavRadio]);
  const handelDelete = (data: any) => {
    set_object_to_edit(data);
    handel_open_model(ModalEnum?.EXAM_DELETE);
  };
  const [t] = useTranslation();
  const can_add_exam = hasAbility(
    ABILITIES_ENUM.MARK,
    ABILITIES_VALUES_ENUM.STORE,
  );

  console.log(HeaderData, "HeaderData");

  return (
    <div className="In_Mark_Body">
      {can_add_exam && (
        <button onClick={handel_add}>
          {t("practical.add")} {t("models.exam")} <FaPlus />{" "}
        </button>
      )}

      <div className="Mark_subject">
        {Exam_Data?.map((item, index: number) => {
          return (
            <div
              className={BodyRadio === item?.id ? `activeExam` : ""}
              key={index}
              onClick={() => handel_change(item)}
            >
              <div>
                <Image src={item?.subject?.image} alt="" />
                <span>
                  <h6> {item?.title}</h6>
                  <p> {item?.subject?.name}</p>
                </span>
              </div>
              <span>
                {item?.date} <BsFillCalendar2DateFill />
                <RiDeleteBin6Fill
                  onClick={() => handelDelete(item)}
                  style={{ color: "#C11313" }}
                />
              </span>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default Body;
