import { BrowserModule } from '@angular/platform-browser';
import { NgModule, APP_INITIALIZER,NgZone } from '@angular/core';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { OverlayModule } from '@angular/cdk/overlay';

import { HttpClient, HttpClientModule } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AuthModule, OidcConfigService, OidcSecurityService,ConfigResult } from 'angular-auth-oidc-client';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule } from '@angular/router';
import { NavbarComponent } from './navbar/navbar.component';
import { SidebarComponent } from './sidebar/sidebar.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { FooterComponent } from './footer/footer.component';
import { LayoutComponent } from './layout/layout.component';
import { NgxDropzoneModule } from 'ngx-dropzone';
import { routes } from './app-routing.module';
import { DndModule } from 'ng2-dnd';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { CdkTableModule } from '@angular/cdk/table';
import { AppApiService } from 'src/app/services/base-service/app-api.service';
import { DatePipe } from '@angular/common';
import { NotifierModule, NotifierOptions } from "angular-notifier";
import { SpinnerComponent } from './spinner/spinner.component';
import { SpinnerOverlayComponent } from './spinner-overlay/spinner-overlay.component';

const oidcConfig = 'assets/auth.config.json';

export function loadConfig(oidcConfigService: OidcConfigService) {
    return () => oidcConfigService.load(oidcConfig);
}
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, "./assets/i18n/", ".json");
}
@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    NavbarComponent,
    SidebarComponent,
    DashboardComponent,
    FooterComponent,
    LayoutComponent,
    SpinnerComponent,
    SpinnerOverlayComponent,
  ],
  imports: [
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient],
      }
    }),
    OverlayModule,
    BrowserModule,
    HttpClientModule,
    RouterModule.forRoot(routes),
    AuthModule.forRoot(),
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    NgxDropzoneModule,
    DndModule.forRoot(),
    DragDropModule,
    CdkTableModule,
    NotifierModule.withConfig({
      position: {
        horizontal: { position: 'right' },
        vertical: { position: 'top' }
      }
    }),

    BsDropdownModule.forRoot()
  ],
  providers: [
    OidcConfigService,
    {
      provide: APP_INITIALIZER,
      useFactory: loadConfig,
      deps: [OidcConfigService],
      multi: true,
    },
    AppApiService,
    DatePipe
  ],
  bootstrap: [AppComponent]
})

export class AppModule {
  constructor(
     public oidcSecurityService: OidcSecurityService,
     public oidcConfigService: OidcConfigService
  ) {
     this.oidcConfigService.onConfigurationLoaded.subscribe(
        (configResult: ConfigResult) => {
           if (configResult && configResult.customConfig) {
              this.oidcSecurityService.setupModule(
                 configResult.customConfig,
                 configResult.authWellknownEndpoints
              );
           } else {
              console.error('Unable to reach authentication server.');
           }
        }
     );
  }
}
