import React from "react";
import { Divider } from "antd";
import { useLocation, useNavigate } from "react-router-dom";
import { menuItems } from "../../Routes";
import { MdLogout } 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";
import { MenuItem } from "../../Components/Layout/SideBar/MenuItem";

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;