import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatDividerModule } from '@angular/material/divider';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatMenuModule } from '@angular/material/menu';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatRadioModule } from '@angular/material/radio';
import { RouterModule, Routes } from '@angular/router';
import { BciComponentModule, BciSharedModule, ColumnBrowserModule } from '@bci-web-core/core';
import { CardDemoComponent } from './card-demo/card-demo';
import { ColumnBrowserDemoComponent } from './column-browser-demo/column-browser-demo.component';
import { ExpansionDemoComponent } from './expansion-demo/expansion-demo';
import { FullscreenDemoComponent } from './fullscreen-demo/fullscreen-demo.component';
import { LoadingSkeletonComponent } from './loading-skeleton/loading-skeleton.component';
import { MenuDemoComponent } from './menu-demo/menu-demo';
import { OverviewLayoutComponent } from './overview-layout/overview-layout.component';
import {
  FoggyTabContentComponent,
  RainyTabContentComponent,
  SunnyTabContentComponent,
  TabDemoComponent,
} from './tab-demo/tab-demo';
import { TreeDemoComponent } from './tree-demo/tree-demo';
import { StepperDemoComponent } from './stepper-demo/stepper-demo';
import { MatStepperModule } from '@angular/material/stepper';
import { EmptyStateDemoComponent } from './empty-state-demo/empty-state-demo';
import { TypographyDemoComponent } from './typography-demo/typography-demo';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { TicketCardComponent } from './card-demo/ticket-card/ticket-card';
import { LabelValuePairDemoComponent } from './label-value-pair-demo/label-value-pair-demo';
import { StepperDialogComponent } from './stepper-demo/stepper-dialog/stepper-dialog.component';

const routes: Routes = [
  {
    path: '',
    component: OverviewLayoutComponent,
  },
  {
    path: 'card-demo',
    component: CardDemoComponent,
    pathMatch: 'full',
  },
  {
    path: 'column-browser-demo',
    component: ColumnBrowserDemoComponent,
  },
  {
    path: 'expansion-demo',
    component: ExpansionDemoComponent,
  },
  {
    path: 'empty-state-demo',
    component: EmptyStateDemoComponent,
  },
  {
    path: 'fullscreen-demo',
    component: FullscreenDemoComponent,
  },
  {
    path: 'loading-skeleton',
    component: LoadingSkeletonComponent,
  },
  {
    path: 'menu-demo',
    component: MenuDemoComponent,
  },
  {
    path: 'tab-demo',
    component: TabDemoComponent,
  },
  {
    path: 'tree-demo',
    component: TreeDemoComponent,
  },
  {
    path: 'typography-demo',
    component: TypographyDemoComponent,
  },
  {
    path: 'stepper-demo',
    component: StepperDemoComponent,
  },
  {
    path: 'label-value-pair-demo',
    component: LabelValuePairDemoComponent,
  },
];

@NgModule({
  declarations: [
    OverviewLayoutComponent,
    CardDemoComponent,
    TicketCardComponent,
    MenuDemoComponent,
    ExpansionDemoComponent,
    TabDemoComponent,
    SunnyTabContentComponent,
    RainyTabContentComponent,
    FoggyTabContentComponent,
    FullscreenDemoComponent,
    LoadingSkeletonComponent,
    TreeDemoComponent,
    StepperDemoComponent,
    StepperDialogComponent,
    ColumnBrowserDemoComponent,
    EmptyStateDemoComponent,
    TypographyDemoComponent,
    LabelValuePairDemoComponent
  ],
  imports: [
    RouterModule.forChild(routes),
    CommonModule,
    BciComponentModule,
    BciSharedModule,
    ReactiveFormsModule,
    ColumnBrowserModule,
    MatSlideToggleModule,
    MatExpansionModule,
    MatCheckboxModule,
    MatButtonToggleModule,
    MatIconModule,
    MatStepperModule,
    MatToolbarModule,
    MatMenuModule,
    MatDividerModule,
    MatInputModule,
    MatTabsModule,
    MatRadioModule,
    MatProgressBarModule
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class LayoutDemoModule {}
