import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { NgModule, ApplicationRef } from '@angular/core';
import { removeNgStyles, createNewHosts, createInputTransfer } from '@angularclass/hmr';
import { RouterModule, PreloadAllModules, Router } from '@angular/router';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastyModule, ToastyService } from 'ng2-toasty';
import { ModalModule } from 'ngx-bootstrap/modal';
import { RlBlockUiModule, RlBlockUiService } from '@railinc/rl-block-ui';
import { RlBlockUiRequestInterceptorProvider } from '@railinc/rl-block-ui/dist/src/rl-block-ui.interceptor';
import { RailincCoreModule, RailincUserService, PermissionService, RAILINC_GUARDS } from '@railinc/rl-ngx-core';

// Environment Imports
import { ENV_PROVIDERS } from './environment';

// Root Level Routes
import { ROUTES } from './app.routes';

// App is our top level component
import { AppComponent } from './app.component';
import { AppState, InternalStateType } from './app.service';
import { AboutComponent } from './about';
import { NoContentComponent } from './no-content';

// Style Impoorts
import '../styles/index.scss';
import { HomeComponent } from './home/home.component';
import { HttpClientModule } from '@angular/common/http';

type StoreType = {
  state: InternalStateType,
  restoreInputValues: () => void,
  disposeOldHosts: () => void
};

@NgModule({
  bootstrap: [AppComponent],
  declarations: [
    AppComponent,
    AboutComponent,
    HomeComponent,
    NoContentComponent
  ],
  /**
   * Import Angular's modules.
   */
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    RailincCoreModule.forRoot(),
    RlBlockUiModule.forRoot(),
    ToastyModule.forRoot(),
    ModalModule.forRoot(),
    RouterModule.forRoot(ROUTES, {
      useHash: true,
      preloadingStrategy: PreloadAllModules
    })
  ],
  /**
   * Expose our Services and Providers into Angular's dependency injection.
   */
  providers: [
    ENV_PROVIDERS,
    AppState,
    ...RAILINC_GUARDS,
    RlBlockUiService,
    RlBlockUiRequestInterceptorProvider,
    ToastyService,
    PermissionService
  ]
})
export class AppModule {

  constructor(public appRef: ApplicationRef, public appState: AppState, private userService: RailincUserService, private blockuiService: RlBlockUiService, private router: Router) {
    userService.setSSOEndpoint('lookup/sso/userid');

    blockuiService.setIgnorePatterns([
      /chili\/s/
    ]);

  }

  public hmrOnInit(store: StoreType) {
    if (!store || !store.state) {
      return;
    }
    console.log('HMR store', JSON.stringify(store, null, 2));
    /**
     * Set state
     */
    this.appState._state = store.state;
    /**
     * Set input values
     */
    if ('restoreInputValues' in store) {
      let restoreInputValues = store.restoreInputValues;
      setTimeout(restoreInputValues);
    }

    this.appRef.tick();
    delete store.state;
    delete store.restoreInputValues;
  }

  public hmrOnDestroy(store: StoreType) {
    const cmpLocation = this.appRef.components.map((cmp) => cmp.location.nativeElement);
    /**
     * Save state
     */
    const state = this.appState._state;
    store.state = state;
    /**
     * Recreate root elements
     */
    store.disposeOldHosts = createNewHosts(cmpLocation);
    /**
     * Save input values
     */
    store.restoreInputValues = createInputTransfer();
    /**
     * Remove styles
     */
    removeNgStyles();
  }

  public hmrAfterDestroy(store: StoreType) {
    /**
     * Display new elements
     */
    store.disposeOldHosts();
    delete store.disposeOldHosts;
  }

}