import { NgModule, ApplicationRef } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { removeNgStyles, createNewHosts } from '@angularclass/hmr';

/*
 * Platform and Environment providers/directives/pipes
 */
import { ENV_PROVIDERS } from './environment';
import { ROUTES } from './app.routes';


// import { HighlightJsModule, HighlightJsService } from 'angular2-highlight-js';
import { Ng2BootstrapModule } from 'ng2-bootstrap';

// App is our top level component
import { APP_RESOLVER_PROVIDERS } from './app.resolver';
import { AlertsPreviewComponent } from './element-list/elements/alerts-preview/alerts-preview.component';
import { AppState } from './app.service';
import { App } from './app.component';
import { AvatarsPreviewComponent } from './element-list/elements/avatars-preview/avatars-preview.component';
import { ButtonsPreviewComponent } from './element-list/elements/buttons-preview/buttons-preview.component';
import { DropdownsPreviewComponent } from './element-list/elements/dropdowns-preview/dropdowns-preview.component';
import { ElementListComponent } from './element-list/element-list.component';
import { EnCRMComponentsModule, EN_COMPONENTS, } from "../../index";
import { ExampleFormComponent } from './example-form/example-form.component';
import { FormsPreviewComponent } from './element-list/elements/forms-preview/forms-preview.component';
import { ModalsPreviewComponent } from './element-list/elements/modals-preview/modals-preview.component';
import { NoContent } from './no-content';
import { PageScroll } from 'ng2-page-scroll/src/ng2-page-scroll.directive';
import { PopoverPreviewComponent } from './element-list/elements/popover-preview/popover-preview.component';
import { TablePreviewComponent } from './element-list/elements/table-preview/table-preview.component';
import { TabsPreviewComponent } from './element-list/elements/tabs-preview/tabs-preview.component';
import { TagsPreviewComponent } from './element-list/elements/tags-preview/tags-preview.component';
import { TooltipsPreviewComponent } from './element-list/elements/tooltips-preview/tooltips-preview.component';
import { Ng2PageScrollModule } from 'ng2-page-scroll';
import { HighlightCodeDirective } from './directives/code-highlight.directive';
import { AccordionPreviewComponent } from './element-list/elements/accordions-preview/accordion-preview.component';

// Application wide providers
const APP_PROVIDERS = [
  ...APP_RESOLVER_PROVIDERS,
  AppState
];

/**
 * `AppModule` is the main entry point into Angular2's bootstraping process
 */
@NgModule({
  bootstrap: [ App ],
  declarations: [
    AccordionPreviewComponent,
    AlertsPreviewComponent,
    App,
    AvatarsPreviewComponent,
    ButtonsPreviewComponent,
    DropdownsPreviewComponent,
    ElementListComponent,
    ExampleFormComponent,
    FormsPreviewComponent,
    HighlightCodeDirective,
    ModalsPreviewComponent,
    NoContent,
    PopoverPreviewComponent,
    TablePreviewComponent,
    TabsPreviewComponent,
    TagsPreviewComponent,
    TooltipsPreviewComponent,
  ],
  imports: [ // import Angular's modules
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    RouterModule.forRoot(ROUTES, { useHash: false }),
    // HighlightJsModule,
    Ng2BootstrapModule,
    Ng2PageScrollModule,
    EnCRMComponentsModule,
  ],
  providers: [ // expose our Services and Providers into Angular's dependency injection
    ENV_PROVIDERS,
    APP_PROVIDERS,
  ]
})
export class AppModule {
  constructor(public appRef: ApplicationRef, public appState: AppState) {}
  hmrOnInit(store) {
    if (!store || !store.state) return;
    console.log('HMR store', store);
    this.appState.state = store.state;
    delete store.state;
  }
  hmrOnDestroy(store) {
    var cmpLocation = this.appRef.components.map(cmp => cmp.location.nativeElement);
    // recreate elements
    store.state = this.appState.state;
    store.disposeOldHosts = createNewHosts(cmpLocation);
    // remove styles
    removeNgStyles();
  }
  hmrAfterDestroy(store) {
    // display new elements
    store.disposeOldHosts();
    delete store.disposeOldHosts;
  }
}