import { timer as observableTimer, ReplaySubject, Subject } from "rxjs";
import { Component } from "@angular/core";
import { FormGroup, Validators } from "@angular/forms";
import { MatDialogRef } from "@angular/material/dialog";
import { FileUploader } from "ng2-file-upload";
import { Action } from "../../../components/hal/action";
import { Module } from "./module";
import { HttpXsrfTokenExtractor } from "@angular/common/http";
import { WidgetframeService } from "../../widgetframe/widgetframe.service";
import * as uriTemplates_ from "uri-templates";

const uriTemplates = uriTemplates_;

declare var contextPath: string;
const URL = contextPath + "/api/core/apps";

@Component({
  selector: "nm-addModule-dialog",
  templateUrl: "./addModuleDialog.component.html",
  styleUrls: ["./addModuleDialog.component.scss"],
})
export class AddModuleDialogComponent {
  public title: String;
  public form: any;
  public action;
  public rootconfig: any;
  public module;
  public href: Subject<String> = new ReplaySubject<String>(1);
  public formGroup: FormGroup;
  public uploader: FileUploader = new FileUploader({ url: URL });
  public hasBaseDropZoneOver: Boolean = false;

  public fileOverBase(e: any): void {
    this.hasBaseDropZoneOver = e;
  }

  constructor(
    public dialogRef: MatDialogRef<AddModuleDialogComponent>,
    private xsrfTokenExtractor: HttpXsrfTokenExtractor,
    private widgetframeService: WidgetframeService
  ) {
    this.formGroup = new FormGroup({});
    let timer = observableTimer(100);
    timer.subscribe((t) => {
      this.formGroup.controls["type"].valueChanges.subscribe((value) => {
        this.updateUserRoles(value);
      });
      this.formGroup.controls["linkType"].valueChanges.subscribe((value) => {
        this.linkTypeChanged(value);
      });
      this.formGroup.controls["app"].valueChanges.subscribe((value) => {
        this.appSelected(value);
      });

      if (this.module === null) {
        this.module = <Module>{};
        this.formGroup.patchValue({
          linkType: "link",
          type: "private",
          link_href: "http://",
        });
      } else {
        this.formGroup.patchValue({
          linkType: this.module["linkType"],
          app:
            this.module.links["0"].href.length > 0 &&
            this.module["linkType"] == "app"
              ? this.module.links["0"].href.substring("/apps/".length)
              : null,
          type: this.module["type"],
          userroles: this.module["userroles"],
          name: this.module["title"],
          description: this.module["description"],
          link_href:
            this.module.links["0"].href.length > 0
              ? this.module.links["0"].href
              : "http://",
          link_name: this.module.links["0"].title,
        });
      }
      this.formGroup.controls["link_href"].setValidators([
        Validators.required,
        Validators.pattern("https?://.+"),
      ]);
      this.formGroup.controls["link_href"].markAsTouched();

      this.formGroup.controls["app"].setValidators(Validators.required);
      this.formGroup.controls["app"].markAsTouched();
    });

    this.uploader.setOptions({
      url: URL,
      headers: [
        { name: "X-XSRF-TOKEN", value: this.xsrfTokenExtractor.getToken() },
      ],
    });

    this.uploader.onAfterAddingFile = (fileItem: any) => {
      let self = this;
      if (
        fileItem.file.size / 1024 / 1024 < 1 &&
        fileItem.file.type.startsWith("image")
      ) {
        var file = fileItem._file;
        // prints the base64 string
        let reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function () {
          self.module["image"] = reader.result;
        };
        reader.onerror = function (error) {
          console.log("Error: ", error);
        };
      } else {
        fileItem.isError = true;
      }
    };
  }

  updateUserRoles(permissionType) {
    if (permissionType === "userroles") {
      this.formGroup.controls["userroles"].enable();
    } else {
      this.formGroup.controls["userroles"].reset();
      this.formGroup.controls["userroles"].disable();
    }
  }

  private linkTypeChanged(linkType) {
    if (linkType === "app") {
      this.formGroup.patchValue({
        type: "private",
      });
      this.formGroup.controls["type"].disable();
      this.formGroup.controls["name"].disable();
      this.formGroup.controls["description"].disable();
      this.formGroup.controls["link_name"].disable();
      this.formGroup.controls["link_href"].disable();
      this.formGroup.controls["app"].enable();
    } else {
      this.formGroup.controls["type"].enable();
      this.formGroup.controls["name"].enable();
      this.formGroup.controls["description"].enable();
      this.formGroup.controls["link_name"].enable();
      this.formGroup.controls["link_href"].enable();
      this.formGroup.controls["app"].reset();
      this.formGroup.controls["app"].disable();
      this.module.icon = null;
    }
  }

  private appSelected(appIdentifier) {
    if (appIdentifier) {
      let resourceUri = uriTemplates(this.rootconfig.linkToAppResource).fill({
        identifier: appIdentifier,
      });
      this.widgetframeService.getData(resourceUri).subscribe((data) => {
        this.formGroup.patchValue({
          name: data.name,
          description: data.description,
          link_name: data.name,
          link_href: "/apps/" + appIdentifier,
        });
        this.module.icon = data.icon;
      });
    }
  }

  onClick() {
    let tempAction: Action = <Action>{};

    //getting values from controls directly, instead of subscribing to value changes.
    //this ensures that disabled controls will still give us the value being displayed to the user.
    this.module.id = this.formGroup.controls["name"].value;
    this.module.title = this.formGroup.controls["name"].value;
    this.module.type = this.formGroup.controls["type"].value;
    this.module.userroles = this.formGroup.controls["userroles"].value;
    this.module.description = this.formGroup.controls["description"].value;
    this.module.linkType = this.formGroup.controls["linkType"].value;
    this.module.app = this.formGroup.controls["app"].value;

    this.module.active = true;

    tempAction.href = this.formGroup.controls["link_href"].value;
    tempAction.title = this.formGroup.controls["link_name"].value;
    tempAction.type = "link";

    this.module.links = [];
    this.module["links"][0] = tempAction;

    if (this.module._actions !== undefined) {
      let payload = JSON.parse(JSON.stringify(this.module));
      delete payload._actions;
      this.module._actions["edit"]["payload"] = payload;
    }
    this.dialogRef.close(this.module);
  }
}