import { map, mergeMap } from "rxjs/operators";
import { Component } from "@angular/core";
import { DomSanitizer, SafeStyle } from "@angular/platform-browser";
import { Router } from "@angular/router";
import { AuthService, Client } from "../../components/auth/auth.service";
import {
  AppdataModules,
  AppdataStore,
} from "../../components/appdata/appdata.store";
import { FormBuilder, FormGroup } from "@angular/forms";
import { WidgetConfig } from "../widget.configuration";
import {
  WidgetComponent,
  WidgetConfiguration,
  WidgetConfigure,
  WidgetId,
  WidgetOutput,
} from "../widget.metadata";
import { Subject } from "rxjs";
import { User } from "../../components/auth/user";
import {
  LocalStorageEntry,
  LocalStorageService,
} from "../../components/local-storage/local-storage.service";
import {
  DeletionMode,
  Scope,
} from "../../components/local-storage/local-storage-constants";
import { ConfigService, themeLocalStorageConfig } from "../portal/config";

declare var contextPath: string;
declare var $;

@WidgetComponent("nm-login")
@Component({
  selector: "nm-login",
  templateUrl: "./login.component.html",
  styleUrls: ["./login.component.scss"],
})
export class LoginComponent {
  public user = new User("", "");
  public errorMsg = "";
  public errorHeadline = "";
  public response;
  public clients: Client[];
  public selectedClientId: string;
  public publicappdata: AppdataModules;
  public loginform: FormGroup;
  public backgroundImage: string;
  public welcomeText: string;
  public routerNavigate: string;
  public testNeeded = true;
  public showClientSelection = true;
  public themes;

  private selectedClientIdEntry: LocalStorageEntry;
  @WidgetConfiguration()
  public configuration: WidgetConfig;

  @WidgetId()
  public widgetId: string;

  @WidgetOutput("loggedIn")
  private loggedIn = new Subject<any>();

  constructor(
    private authService: AuthService,
    private _appdata: AppdataStore,
    private router: Router,
    private formBuilder: FormBuilder,
    private localStorageService: LocalStorageService,
    private sanitizer: DomSanitizer,
    private configService: ConfigService
  ) {
    this.clients = [];

    const themeEntry: LocalStorageEntry = this.localStorageService.getLocalStorageEntryByConfig(
      themeLocalStorageConfig
    );

    let currentTheme;
    this.configService.getThemes().subscribe((data) => {
      this.themes = data;
      if (
        themeEntry.exists() &&
        this.themes.map((entry) => entry.identifier).includes(themeEntry.value)
      ) {
        currentTheme = themeEntry.value;
      } else {
        let defaultheme = this.themes.find((entry) => entry.default);
        currentTheme = defaultheme.identifier;
      }
      window.setTimeout(() => {
        for (let entry of this.themes) {
          <any>$("body").removeClass(entry.identifer);
        }
        <any>$("body").addClass(currentTheme);
      }, 1);
    });
  }

  @WidgetConfigure()
  protected configureWidget(configuration: WidgetConfig) {
    this.backgroundImage =
      contextPath + this.configuration.configuration["backgroundImage"];
    this.welcomeText = this.configuration.configuration["welcomeText"];
    this.routerNavigate = this.configuration.configuration["routerNavigate"];
    this.showClientSelection =
      this.configuration.configuration["showClientSelection"] !== undefined
        ? this.configuration.configuration["showClientSelection"]
        : true;
  }

  getBackgroundImage(): SafeStyle {
    // sanitize the style expression
    return this.sanitizer.bypassSecurityTrustStyle(
      `url(${this.backgroundImage}`
    );
  }

  keyPressEvent(event) {
    if (event.keyCode === 13) {
      this.login();
    }
  }

  ngOnInit() {
    this.selectedClientIdEntry = this.localStorageService.getLocalStorageEntry(
      "selectedClientId",
      Scope.GLOBAL,
      DeletionMode.NEVER
    );
    this.loginform = this.formBuilder.group({
      name: "",
      password: "",
      clientselect: null,
    });

    if (this.showClientSelection) {
      this._appdata
        .getAppdata()
        .pipe(
          map((data) => data["ipim"]._links["clients"].href),
          mergeMap((data) => this.authService.getClients(data))
        )
        .subscribe(
          (data) => {
            this.clients = data._embedded.clients;
            if (this.selectedClientIdEntry.exists()) {
              window.setTimeout(() => {
                this.loginform.patchValue({
                  clientselect: Number(this.selectedClientIdEntry.value),
                });
              }, 1);
            } else if (this.clients && this.clients.length !== 0) {
              this.loginform.patchValue({
                clientselect: this.clients[0].clientId,
              });
            }
          },
          (err) => console.error(err)
        );
    }

    this._appdata.getPublicAppdata().subscribe(
      (data) => {
        this.publicappdata = data;
      },
      (err) => console.error(err)
    );
  }

  clientChanged(value) {
    this.selectedClientId = value;
    this.selectedClientIdEntry.value = value;
  }

  login() {
    this.user.name = this.loginform["value"].name;
    this.user.password = this.loginform["value"].password;
    this.selectedClientId = this.loginform["value"].clientselect;
    this.selectedClientIdEntry.value = this.selectedClientId;

    this.authService
      .doLogin(
        this.publicappdata._links["login"].href,
        this.user,
        this.selectedClientId,
        false
      )
      .subscribe(
        (response) => {
          this.authService.userLoggedIn(true, this.routerNavigate);
        },
        (error) => {
          this.errorHeadline = error.error.error;
          this.errorMsg = error.error.message;
        }
      );
  }
}