import { DragDropModule } from '@angular/cdk/drag-drop'
import { ScrollingModule } from '@angular/cdk/scrolling'
import { CommonModule } from '@angular/common'
import { NgModule } from '@angular/core'
import { ReactiveFormsModule } from '@angular/forms'
import { RouterModule, Routes } from '@angular/router'
import { CheckboxModule, KadiOverlayModule, LoadingButtonDirective, LoadingImageDirective } from '@frontend/shared'
import { NgSelectModule } from '@ng-select/ng-select'
import { TranslocoModule } from '@jsverse/transloco'
import { ImageUploadComponent } from '../../../shared'
import { CategorySettingsComponent } from './category-settings/category-settings.component'

const routes: Routes = [
	{
		path: '',
		loadComponent: () => import('./menu-settings.component').then((m) => m.MenuSettingsComponent),
		children: [
			{
				path: 'edit',
				loadComponent: () => import('./add-edit/add-edit-item.component').then((m) => m.AddEditItemComponent),
			},
		],
	},
	{
		path: 'import',
		loadComponent: () => import('./import/import-menu.component').then((m) => m.ImportMenuComponent),
		title: 'Import Menu',
	},
]

@NgModule({
	imports: [
		CommonModule,
		RouterModule.forChild(routes),
		ReactiveFormsModule,
		DragDropModule,
		NgSelectModule,
		ScrollingModule,
		TranslocoModule,
		KadiOverlayModule,
		ImageUploadComponent,
		LoadingButtonDirective,
		CheckboxModule,
		LoadingImageDirective,
		CategorySettingsComponent,
	],
})
export class MenuSettingsModule {}