import React from "react";
import { generateRoutes } from "@/routes/routes";
import * as AntIcons from "@ant-design/icons";
import { ColorIcon } from "@/components/Layout/ColorIcon";

const getAntIcon = (iconName) => {
  const iconKey = `${iconName.charAt(0).toUpperCase()}${iconName.slice(
    1
  )}Outlined`;
  return AntIcons[iconKey] ? React.createElement(AntIcons[iconKey]) : null;
};

const generateMenuItems = (routes, parentPath = "") => {
  return routes
    .filter((route) => !route.hidden)
    .map((route) => {
      const fullPath = `${parentPath}/${route.path}`.replace(/\/+/g, "/");
      const icon = route.icon && <ColorIcon icon={getAntIcon(route.icon)} />;

      const menuItem = {
        key: fullPath,
        icon,
        label: route.name,
      };

      if (route.children) {
        menuItem.children = generateMenuItems(route.children, fullPath);
      }

      return menuItem;
    });
};

export const getMenuItems = (role) => generateMenuItems(generateRoutes(role));