import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import {
	DishComponent,
	FoodComponent,
	HomeComponent,
	IngredientFormComponent,
	IngredientListComponent,
	IngredientReleaseComponent,
	IngredientReviewComponent,
	LoginComponent,
} from "./pages";
import { AppLayoutComponent } from "./components";

const routes: Routes = [
	{ path: "login", component: LoginComponent },
	{
		path: "",
		component: AppLayoutComponent,
		children: [
			{ path: "", pathMatch: "full", redirectTo: "home" },
			{ path: "home", component: HomeComponent },
			{ path: "food", component: FoodComponent },
			{ path: "dish", component: DishComponent },
			{
				path: "ingredient",
				children: [
					{
						path: "",
						pathMatch: "full",
						redirectTo: "item",
					},
					{
						path: "item",
						children: [
							{
								path: "",
								pathMatch: "full",
								redirectTo: "list",
							},
							{
								path: "list",
								component: IngredientListComponent,
							},
							{
								path: "form/:id",
								component: IngredientFormComponent,
							},
						],
					},

					{
						path: "review",
						component: IngredientReviewComponent,
					},
					{
						path: "release",
						component: IngredientReleaseComponent,
					},
				],
			},
		],
	},
];

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