import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { VisualizationPageComponent } from "./visualization-page/visualization-page.component";
import { MainPageComponent } from "./main-page/main-page.component";
import { UploadPageComponent } from "./upload-page/upload-page.component";
import { HelpPageComponent } from "./help-page/help-page.component";
import { DashboardPageComponent } from "./dashboard-page/dashboard-page.component";
import { DashboardComponent } from "./dashboard-page/dashboard/dashboard.component";
import { CustomizableGridComponent } from "./customizable-grid/customizable-grid.component";

const routes: Routes = [
  { path: "", component: MainPageComponent },
  { path: "vis", component: VisualizationPageComponent },
  { path: "dashboard", component: DashboardPageComponent },
  { path: "dashboard/:id", component: DashboardComponent },
  { path: "upload", loadComponent: () =>  import("./upload-page/upload-page.component").then(m => m.UploadPageComponent) },
  { path: "grid", component: CustomizableGridComponent },
  { path: "help", loadComponent: () =>  import("./help-page/help-page.component").then(m => m.HelpPageComponent)  },
  // { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {}),
  ],
  declarations: [],
  exports: [RouterModule],
})
export class AppRoutingModule {}