import React, { useState } from "react";
import { ModalEnum } from "../../enums/Model";
import { FaPlus, FaUser } from "react-icons/fa";
import { IoMdArrowDropdown, IoMdArrowDropup } from "react-icons/io";
import { FaEllipsis } from "react-icons/fa6";
import { Popover, Spin } from "antd";
import { useGetAllEduClass } from "../../api/eduClass";
import { useNavigate, useParams } from "react-router-dom";
import { EduClassItem } from "../../types/Item";
import useModalHandler from "../../utils/useModalHandler";
import { usePage_titleState } from "../../zustand/PageTitleState";
import { hasAbility } from "../../utils/hasAbility";
import { ABILITIES_ENUM, ABILITIES_VALUES_ENUM } from "../../enums/abilities";
import { useTranslation } from "react-i18next";

const HeaderSection = () => {
  const [showAll, setShowAll] = useState<boolean>(false);

  const toggleShowAll = () => {
    setShowAll(!showAll);
  };
  const { course_id } = useParams();
  const { data, isLoading } = useGetAllEduClass({ course_id: course_id });
  const eduClass = data?.data || [];
  const { set_title } = usePage_titleState((state) => state);
  const { handel_open_model } = useModalHandler();

  const navigate = useNavigate();
  const show_eduClass_ability = hasAbility(
    ABILITIES_ENUM?.EDUCATION_CLASS,
    ABILITIES_VALUES_ENUM?.SHOW,
  );

  const handelNavigate = (item: EduClassItem) => {
    if (show_eduClass_ability) {
      navigate(`${item?.id}`);
      set_title(`${item?.name}`);
    }
  };

  const [t] = useTranslation();

  const store_eduClass_ability = hasAbility(
    ABILITIES_ENUM?.EDUCATION_CLASS,
    ABILITIES_VALUES_ENUM?.STORE,
  );
  const delete_course_ability = hasAbility(
    ABILITIES_ENUM?.COURSE,
    ABILITIES_VALUES_ENUM?.DELETE,
  );
  const store_note_ability = hasAbility(
    ABILITIES_ENUM?.NOTE,
    ABILITIES_VALUES_ENUM?.STORE,
  );

  const PopoverContent = (
    <div className="PopoverContent">
      {store_eduClass_ability && (
        <p onClick={() => handel_open_model(ModalEnum?.EDUClASS_ADD)}>
          {" "}
          {t("practical.add")} {t("models.education_class")} <FaPlus />{" "}
        </p>
      )}
      {store_note_ability && (
        <p
          onClick={() => handel_open_model(ModalEnum?.COURSE_SENDNOTIFICATION)}
        >
          {" "}
          {t("practical.Send_Direct_Notification")}
        </p>
      )}
      {delete_course_ability && (
        <p onClick={() => handel_open_model(ModalEnum?.COURSE_DELETE)}>
          {" "}
          {t("practical.delete")} {t("models.course")}
        </p>
      )}
    </div>
  );

  if (isLoading) {
    return <Spin />;
  }

  return (
    <div className="header_cards_section">
      <div className="CountCards">
        {eduClass?.map((item: EduClassItem, index: number) => {
          return (
            <div
              onClick={() => handelNavigate(item)}
              key={index}
              className={`CountCard ${!showAll && index >= 6 ? "hidden" : ""}`}
            >
              <i>
                <FaUser />
              </i>
              <h4>{item?.name}</h4>
              <h5>
                {item?.students_count} {t("models.student")}{" "}
              </h5>
            </div>
          );
        })}
      </div>
      {eduClass?.length > 4 &&
        (showAll ? (
          <span className="Show_More_Button" onClick={toggleShowAll}>
            <IoMdArrowDropup />
          </span>
        ) : (
          <span className="Show_More_Button" onClick={toggleShowAll}>
            <IoMdArrowDropdown />
          </span>
        ))}
      <Popover
        content={PopoverContent}
        overlayClassName="Popover"
        arrow={false}
        placement="bottomRight"
      >
        <FaEllipsis />
      </Popover>
    </div>
  );
};

export default HeaderSection;
