import { Auth } from "../Pages/Auth";
import { Menu } from "../Pages/Menu";
import { checkIsMobile } from "../utils/checkIsMobile";
import * as R from "./paths";
import Dashboard from "../Pages/Dashboard";
import { ItemWithSubItems } from "../types/userPermissions";
import UserProfile from "../Pages/UserProfile";
import Training from "../Pages/Training";

interface Route {
  path: string;
  component: React.ComponentType | any;
}

export const getRoutes = (
  auth: string | null,
  roles: ItemWithSubItems[]
): Route[] => {
  let generalRoutes: Route[] = auth
    ? [
        { path: R.HOME, component: Dashboard },
        { path: R.PROFILE, component: UserProfile },
        { path: R.TRAINING, component: Training },
      ]
    : [{ path: R.HOME, component: Auth }];

  if (checkIsMobile()) {
    generalRoutes.push({ path: R.MENU, component: Menu });
  }

  let availableRoutes: Route[] = [];

  const routableItems = roles?.flatMap((role) =>
    role?.subItems.map((item) => ({
      path: item.path,
      component: item.component,
    }))
  );

  if (roles) {
    availableRoutes = [...availableRoutes, ...routableItems];
  }

  return [...generalRoutes, ...availableRoutes];
};
