import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { ChartsMaterialModule } from './charts-material.module';
import { PublicChartsComponent } from './public-charts/public-charts.component';
import { PrivateChartsComponent } from './private-charts/private-charts.component';
import { UserRoleGuard } from '../core/guards/user-role.guard';
import { chartsReducers } from './store/charts.reducers';
import { StoreModule } from '@ngrx/store';
import { EditChartComponent } from './edit-chart/edit-chart.component';
import { ReactiveFormsModule } from '@angular/forms';
import { STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';
import { ChartTypePipe } from './pipes/chart-type.pipe';
import { MomentModule } from 'ngx-moment';
import { ChartComponent } from './chart/chart.component';
import { ChartDetailComponent } from './chart-detail/chart-detail.component';
import * as Ng2Charts from 'ng2-charts';


const routes: Routes = [
  { path: '', component: PublicChartsComponent, pathMatch: 'full' },
  { path: 'mycharts', component: PrivateChartsComponent, canActivate: [UserRoleGuard] },
  { path: 'new', component: EditChartComponent, canActivate: [UserRoleGuard] },
  { path: ':id/edit', component: EditChartComponent, canActivate: [UserRoleGuard] },
  { path: ':id', component: ChartDetailComponent }
];

@NgModule({
  imports: [
    CommonModule,
    MomentModule,
    ChartsMaterialModule,
    ReactiveFormsModule,
    Ng2Charts.ChartsModule,
    RouterModule.forChild(routes),
    StoreModule.forFeature('charts', chartsReducers),
  ],
  providers: [
    { provide: STEPPER_GLOBAL_OPTIONS, useValue: { showError: true, displayDefaultIndicatorType: false } }
  ],
  declarations: [
    PublicChartsComponent, 
    PrivateChartsComponent, EditChartComponent, ChartTypePipe, ChartComponent, ChartDetailComponent
  ]
})
export class ChartsModule { }
