import React, { useState } from "react";
import { Divider } from "antd";
import { Link, useLocation, useNavigate } from "react-router-dom";
import { menuItems } from "../../Routes";
import { MdLogout, MdExpandMore, MdExpandLess } from "react-icons/md";
import useAuthState from "../../zustand/AuthState";
import { hasAbility } from "../../utils/hasAbility";
import { useTranslation } from "react-i18next";
import { getLocalStorage } from "../../utils/LocalStorage";
import { BRANCH_OBJECT_KEY } from "../../config/AppKey";

const MenuItem = ({ item, location, index }: any) => {
  const isActive = location.pathname.split("/")[1] === item.path?.slice(1);
  // console.log(location.pathname.split("/")[1]);

  const [openDropdown, setOpenDropdown] = useState<number | null>(null);

  const handleDropdown = (index: number) => {
    setOpenDropdown((prev) => (prev === index ? null : index));
  };

  const isDropdownOpen = openDropdown === index;
  const [t] = useTranslation();
  const navigate = useNavigate();

  return (
    <>
      <div
        className={`link ${isActive ? "active" : ""} ${item?.children && "DropDownLink"} `}
        onClick={() => navigate(item.path || "/")}
      >
        <i>{item.icon}</i>
        <Link to={item.path || "/"}>{t(item.text)}</Link>
        {item?.children && (
          <>
            {isDropdownOpen ? (
              <div
                className="DropDownIcon"
                onClick={() => handleDropdown(index)}
              >
                <MdExpandLess />
              </div>
            ) : (
              <div
                className="DropDownIcon"
                onClick={() => handleDropdown(index)}
              >
                <MdExpandMore />
              </div>
            )}
          </>
        )}
      </div>

      {item?.children && isDropdownOpen && (
        <div className="sub-menu">
          {item.children.map((childItem: any, index: any) => (
            <MenuItem
              key={index}
              item={childItem}
              location={location}
              index={index}
            />
          ))}
        </div>
      )}
    </>
  );
};

const SideBar = () => {
  const location = useLocation();

  const navigate = useNavigate();
  const { logout } = useAuthState();
  const [t] = useTranslation();
  const branch_name = getLocalStorage(BRANCH_OBJECT_KEY)?.name;

  return (
    <div className="side_bar">
      <h1>
        {/* {t("sidebar.dashboard")}  */}
        {branch_name}{" "}
      </h1>
      <Divider />
      <div className="side_bar_links">
        {menuItems.map((item, index) => {
          const useAbility = hasAbility(item.abilities, item.abilities_value);
          if (!useAbility) {
            return <React.Fragment key={index}></React.Fragment>;
          }
          return (
            <MenuItem
              key={index}
              item={item}
              location={location}
              index={index}
            />
          );
        })}
      </div>
      <button
        onClick={() => {
          logout();
          navigate("/auth");
        }}
      >
        <MdLogout /> {t("sidebar.logout")}
      </button>
    </div>
  );
};

export default SideBar;
