import { useAuth } from "@/store/auth";
import { Blocks, Home, Settings2, User, Users } from "lucide-react";
import { useCallback, type ReactNode } from "react";
import { useLocation } from "react-router";

export interface BarItem {
  icon: ReactNode;
  title: string;
  tab: string;
  pathname: string;
}

export const useBarItems = (): [BarItem[], (item: BarItem) => boolean] => {
  const profile = useAuth((state) => state.profile);
  const location = useLocation();

  const isActive = useCallback(
    (item: BarItem) => {
      if (item.pathname === "/") return location.pathname === item.pathname;
      return location.pathname.startsWith(item.pathname);
    },
    [location.pathname],
  );

  if (!profile) {
    return [[], isActive];
  }

  return [
    [
      {
        icon: <Home />,
        title: "Home",
        tab: "home",
        pathname: "/",
      },
      {
        icon: <User />,
        title: "Personal Info",
        tab: "personal-info",
        pathname: "/personal-info",
      },
      {
        icon: <Settings2 />,
        title: "Data & Personalization",
        tab: "data-personalization",
        pathname: "/data-personalize",
      },
      ...(profile.isAdmin
        ? [
            {
              icon: <Blocks />,
              title: "API Services",
              tab: "admin.api-services",
              pathname: "/admin/api-services",
            },
            {
              icon: <Users />,
              title: "Users",
              tab: "admin.users",
              pathname: "/admin/users",
            },
          ]
        : []),
    ],
    isActive,
  ];
};