import { BugFilled } from "@ant-design/icons";
import { MenuProps } from "antd";
import { PATHS } from "utils/constants";

// import WarehouseIcon from "components/Icons/WarehouseIcon";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";

export default function useSidebarItems() {
  type MenuItem = Required<MenuProps>["items"][number] & {
    permission: string;
    children?: MenuItem[];
  };
  const { t } = useTranslation();
  // const [isAuth] = useAuth();
  const getItem = (
    label: React.ReactNode,
    key: React.Key,
    permission?: string,
    icon?: React.ReactNode,
    children?: MenuItem[],
    type?: "group"
  ): MenuItem => {
    return {
      key,
      icon,
      children,
      label,
      type,
      permission,
    } as MenuItem;
  };

  // Recursive function to filter items based on permissions
  const getGrantedItems = (items: any[]): MenuItem[] => {
    return items
      .filter(() => true)// Filter out items without permission
      .map((item: any) => {
        if (item.children) {
          // Recursively filter children
          return {
            ...item,
            children: getGrantedItems(item.children),
          };
        }
        return item;
      });
  };

  const items: MenuProps["items"] = [
    getItem(
      t("menu"),
      PATHS.menu,
      undefined,
      <div style={{ marginTop: 10 }}>
        <Link style={{}} to={PATHS.menu}>
          <BugFilled className="icon-container pos-icon" />
        </Link>
      </div>
    ),
  ];

  // if we have a menu  with empty children after applying "getGrantedItems"
  // we going to remove it
  const grantedItems = getGrantedItems(items).filter(
    (i) => (i.children && i.children.length !== 0) || !i.children
  );

  return grantedItems;
}