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

const HeaderCardsSection = ({ data, isLoading }: any) => {
  const [showAll, setShowAll] = useState<boolean>(false);
  const [t] = useTranslation();

  const toggleShowAll = () => {
    setShowAll(!showAll);
  };
  const navigate = useNavigate();

  const index_eduClass_ability = hasAbility(
    ABILITIES_ENUM?.EDUCATION_CLASS,
    ABILITIES_VALUES_ENUM?.INDEX,
  );

  const handelnavigate = (item: CourseItem) => {
    if (index_eduClass_ability) {
      navigate(
        `/${ABILITIES_ENUM?.COURSE}/${item?.id}/${ABILITIES_ENUM?.EDUCATION_CLASS}`,
      );
      // set_title(item?.name);
    }
  };

  const { handel_open_model } = useModalHandler();
  const Courses = data?.data || [];

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

  const PopoverContent = (
    <div className="PopoverContent">
      <p onClick={() => handel_open_model(ModalEnum?.COURSE_ADD)}>
        {" "}
        {t("practical.add")} {t("models.course")} <FaPlus />{" "}
      </p>
    </div>
  );

  const store_course_ability = hasAbility(
    ABILITIES_ENUM?.COURSE,
    ABILITIES_VALUES_ENUM?.STORE,
  );

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

export default HeaderCardsSection;
