import { CommonModule } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { MatCardModule } from '@angular/material/card';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { RouterModule, Routes } from '@angular/router';
import { BciSharedModule, CloseDetailsGuard } from '@bci-web-core/core';
import { MdDetailsComponent } from './components/md-demo-details/md-details.component';
import { MdListDemoComponent } from './components/md-list-demo/md-list-demo.component';
import { MdNestedTabsDemoComponent } from './components/md-nested-tabs-demo/md-nested-tabs-demo.component';
import { MdNestedTabsDetailsDemoComponent } from './components/md-nested-tabs-demo/md-nested-tabs-details-demo/md-nested-tabs-details-demo.component';
import { MdTableDemoComponent } from './components/md-table-demo/md-table-demo.component';
import { MdTilesDemoComponent } from './components/md-tiles-demo/md-tiles-demo.component';
import { OverviewMasterDetailComponent } from './overview-master-detail/overview-master-detail.component';

const routes: Routes = [
  {
    path: '',
    component: OverviewMasterDetailComponent,
  },
  {
    path: 'md-list-demo',
    component: MdListDemoComponent,
    children: [
      {
        path: ':id',
        component: MdDetailsComponent,
        canDeactivate: [CloseDetailsGuard],
      },
    ],
  },
  {
    path: 'md-nested-tabs-demo',
    component: MdNestedTabsDemoComponent,
    children: [
      {
        path: ':id',
        component: MdNestedTabsDetailsDemoComponent,
        canDeactivate: [CloseDetailsGuard],
      },
    ],
  },
  {
    path: 'md-table-demo',
    component: MdTableDemoComponent,
    children: [
      {
        path: ':id',
        component: MdDetailsComponent,
        canDeactivate: [CloseDetailsGuard],
      },
    ],
  },
  {
    path: 'md-tile-demo',
    component: MdTilesDemoComponent,
    children: [
      {
        path: ':id',
        component: MdDetailsComponent,
        canDeactivate: [CloseDetailsGuard],
      },
    ],
  },
];

@NgModule({
  declarations: [
    OverviewMasterDetailComponent,
    MdListDemoComponent,
    MdTableDemoComponent,
    MdTilesDemoComponent,
    MdDetailsComponent,
    MdNestedTabsDemoComponent,
    MdNestedTabsDetailsDemoComponent,
  ],
  imports: [
    RouterModule.forChild(routes),
    CommonModule,
    MatIconModule,
    MatCardModule,
    MatInputModule,
    MatSlideToggleModule,
    MatListModule,
    BciSharedModule,
    MatTableModule,
    MatTabsModule,
    ReactiveFormsModule,
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class MasterDetailModule {}
