import {
  Component,
  OnChanges,
  OnDestroy,
  Input,
  ChangeDetectorRef,
  Injector,
  SimpleChanges,
  SimpleChange,
  ChangeDetectionStrategy,
  NgModule,
} from "@angular/core";
import { Subject } from "rxjs";
import { WidgetConfig } from "../widget.configuration";
import { AppService, appServiceFactory } from "./app.service";
import { AppGlobalChannelsService } from "./app.global-channels.service";
import { AppParams } from "./app.controller";
import { HttpClient } from "@angular/common/http";
import {
  OverlayScrollbarsComponent,
  OverlayscrollbarsModule,
} from "overlayscrollbars-ngx";
import { CommonModule } from "@angular/common";
import { ContainerModule } from "../container/container.component";
import { TranslateModule } from "@ngx-translate/core";
import { CoreComponentsModule } from "../../components/core-components.module";
import { ScrollService } from "../../components/scroll";
import {
  animate,
  keyframes,
  style,
  transition,
  trigger,
} from "@angular/animations";

@Component({
  selector: "nm-app-root",
  templateUrl: "./app.root.component.html",
  styleUrls: ["./app.root.component.scss"],
  host: {
    "[attr.data-layout]":
      "overlayScrollbarActive ? 'scrollbar': 'no-scrollbar'",
  },
  providers: [
    {
      provide: AppService,
      useFactory: appServiceFactory,
      deps: [HttpClient, AppGlobalChannelsService, Injector],
    },
  ],
  animations: [
    trigger("fadeTrigger", [
      transition(":enter", [
        style({ opacity: 0 }),
        animate(
          "0.3s 0.7s",
          keyframes([
            style({ opacity: 0, transform: "translateZ(0)" }),
            style({ opacity: 1, transform: "translateZ(50px)" }),
          ])
        ),
      ]),
      transition(":leave", [animate("200ms ease-out", style({ opacity: 0 }))]),
    ]),
  ],
  // can't be activated, until PIMWEB-1219 is completed
  // changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppRootComponent implements OnChanges, OnDestroy {
  @Input("href")
  public href: string;

  @Input("param")
  public param: any;

  @Input("is-attached")
  public attached: boolean = true;

  @Input("overlayScrollbarActive")
  public overlayScrollbarActive: boolean;

  public configuration = new Subject<{
    id: string;
    pageTitle?: string;
    infoTitle?: string;
    infoText?: string;
    infoWidth?: string;
    infoHeight?: string;
    infoToolTip?: string;
    wikiLink?: string;
    overlayScrollbarActive?: boolean;
    config: WidgetConfig;
  }>();

  constructor(
    private service: AppService,
    private scrollService: ScrollService,
    private changeDetectorRef: ChangeDetectorRef
  ) {
    document.addEventListener(
      "scroll",
      (e) => {
        this.scrollService.setOnScroll(e);
      },
      true
    );
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes.param) {
      this.service.activeContext = changes.param.currentValue;
    }

    if (changes.attached) {
      if (changes.attached.currentValue === true) {
        this.service.attach();
      } else {
        this.service.detach();
      }
    }

    if (changes.href && changes.href.currentValue) {
      let appData: AppParams = {
        href: changes.href.currentValue,
      };

      this.configuration.next({ id: "empty", config: null });
      this.changeDetectorRef.detectChanges();

      this.service.reset();
      this.service.loadPage(appData).subscribe((pageConfiguration) => {
        let rootWidget = pageConfiguration["root-widget"];
        let widgetConfig = this.service.toWidgetConfig(rootWidget);

        let configuration = {
          id: rootWidget,
          pageTitle: pageConfiguration.pageTitle,
          infoTitle: pageConfiguration.infoTitle,
          infoText: pageConfiguration.infoText,
          infoWidth: pageConfiguration.infoWidth,
          infoHeight: pageConfiguration.infoHeight,
          infoToolTip: pageConfiguration.infoToolTip,
          wikiLink: pageConfiguration.wikiLink,
          overlayScrollbarActive:
            pageConfiguration.overlayScrollbarActive !== null
              ? pageConfiguration.overlayScrollbarActive
              : true,
          config: widgetConfig,
        };

        this.overlayScrollbarActive = !(
          this.overlayScrollbarActive === null ||
          this.overlayScrollbarActive === undefined
        )
          ? this.overlayScrollbarActive
          : configuration.overlayScrollbarActive;

        this.configuration.next(configuration);
      });
    }
  }

  onComponentInitialized(id: string) {
    this.service.initialized();
  }

  ngOnDestroy() {
    this.service.dispose();
  }
}

@NgModule({
  imports: [
    CommonModule,
    ContainerModule,
    TranslateModule,
    OverlayscrollbarsModule,
    CoreComponentsModule,
  ],
  declarations: [AppRootComponent],
  exports: [AppRootComponent],
})
export class AppRootModule {}