import React, { useState } from "react";
import { ModalEnum } from "../../enums/Model";
import { FaUser } from "react-icons/fa";
import { IoMdArrowDropdown, IoMdArrowDropup } from "react-icons/io";
import { FaEllipsis } from "react-icons/fa6";
import { Popover } from "antd";
import { useLocation, useNavigate } from "react-router-dom";
import { Item } from "../../types/Item";
import useModalHandler from "../../utils/useModalHandler";
import { useButtonState } from "../../zustand/ButtonState";
import { useObjectToEdit } from "../../zustand/ObjectToEditState";
import { useTranslation } from "react-i18next";
import { ABILITIES_VALUES_ENUM } from "../../enums/abilities";
// import useSetPage_title from "../../Hooks/useSetPageTitle";
import { EduClassComponents } from "../../Pages/EduClass/show/ActiveTable";
import { hasAbility } from "../../utils/hasAbility";

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

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

  const [t] = useTranslation();

  // useSetPage_title(
  //   `${t(ABILITIES_ENUM?.MAIN_PAGE)} / ${t(`models.${ABILITIES_ENUM.COURSE}`)} / ${t(`models.${ABILITIES_ENUM.EDUCATION_CLASS}`)} / ${t(`input.details`)}`,
  // );

  const { handel_open_model } = useModalHandler();

  const filteredComponents = EduClassComponents?.filter((component) =>
    hasAbility(component.abilities, ABILITIES_VALUES_ENUM.INDEX),
  );

  const PopoverContent = (
    <div className="PopoverContent">
      <p
        onClick={() => handel_open_model(ModalEnum?.EDUClASS_SENDNOTIFICATION)}
      >
        {" "}
        {t("practical.Send_Direct_Notification")}
      </p>
      <p onClick={() => handel_open_model(ModalEnum?.EDUClASS_DELETE)}>
        {" "}
        {t("practical.delete")} {t("models.education_class")}
      </p>
    </div>
  );
  const [, setActiveButton] = useState(0);
  const { setActiveTab, ActiveTab } = useButtonState((state) => state);
  const { set_param_to_send } = useObjectToEdit();
  const location = useLocation();
  const navigate = useNavigate();

  const handleButtonClick = (index: number) => {
    setActiveButton(index);
    setActiveTab(index);
    set_param_to_send({});
    navigate(`${location.pathname}`);
  };
  return (
    <div className="header_cards_section">
      <div className="CountCards">
        {filteredComponents?.map((item: Item, index: number) => {
          return (
            <div
              key={index}
              onClick={() => handleButtonClick(index)}
              className={`CountCard ${!showAll && index >= 6 ? "hidden" : ""} ${ActiveTab === index ? "active" : ""} `}
            >
              <i>
                <FaUser />
              </i>
              <h4> {t(`education_class_actions.${item?.name}`)} </h4>
            </div>
          );
        })}
      </div>
      {filteredComponents?.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;
