import { tap, map, mergeMap } from "rxjs/operators";
import { Component, OnInit } from "@angular/core";
import { ModuleService } from "./module.service";
import { Subject } from "rxjs";
import { WidgetConfig } from "../../widget.configuration";
import {
  WidgetComponent,
  WidgetConfiguration,
  WidgetConfigure,
  WidgetId,
  WidgetInput,
} from "../../widget.metadata";
import { CurrentLocaleService } from "../../../components/i18n/currentLocale.service";
import { MatDialog } from "@angular/material/dialog";
import { AddModuleDialogComponent } from "./addModuleDialog.component";
import { HalService } from "../../../components/hal/hal.service";
import { CustomNotificationService } from "../../../components/notification/customnotification.service";
import { Module } from "./module";
import { TranslateService } from "@ngx-translate/core";
import { ConfirmationDialogComponent } from "../../../components/dialog/confirmationDialog.component";
import { DragulaService } from "ng2-dragula";
import { deepCopy } from "../../../components/util";
import { BaseConfiguration } from "../../widgetframe/widgetframe.component";

declare var contextPath: string;

export interface ModulesConfiguration extends BaseConfiguration {
  formData: any;
  formData_rootconfig: any;
  disableAddModule: boolean;
}

/**
 * This class represents ModuleListComponent.
 */
@WidgetComponent("nm-modules")
@Component({
  selector: "nm-modules",
  templateUrl: "./modules.component.html",
  styleUrls: ["./modules.component.scss"],
})
export class ModulesComponentWidget implements OnInit {
  @WidgetInput()
  public productNo = new Subject<any>();

  @WidgetConfiguration()
  public configuration: WidgetConfig<ModulesConfiguration>;

  @WidgetId()
  public _id;

  public modules: Module[];
  public tempModule: Module;
  public formData: any;
  public formData_rootconfig: any;
  public currentlocale: string;
  public title: string;
  public infoText: string;
  public wikiLink: string;
  public disableAddModule: string;

  constructor(
    private moduleService: ModuleService,
    private currentLocaleService: CurrentLocaleService,
    private halService: HalService,
    private _notificationService: CustomNotificationService,
    private translateService: TranslateService,
    public dialog: MatDialog,
    private dragulaService: DragulaService
  ) {}

  @WidgetConfigure()
  protected configureWidget(configuration: WidgetConfig<ModulesConfiguration>) {
    this.title = configuration.configuration.title;
    this.formData = configuration.configuration.formData;
    this.formData_rootconfig = configuration.configuration.formData_rootconfig;
    this.infoText = configuration.configuration.infoText;
    this.wikiLink = this.configuration.configuration.wikiLink;
    if (configuration.configuration.disableAddModule) {
      this.disableAddModule = "--disable";
    }
  }

  ngOnInit() {
    const bag: any = this.dragulaService.find("bag");
    if (bag !== undefined) this.dragulaService.destroy("bag");
    this.dragulaService.createGroup("bag", {
      accepts: (el, target, source, sibling) => {
        // From the doc "The sibling can be null, which would mean that the element would be placed as the last element in the container."
        // This means that if the sibling is null the user is trying to place the element last => after the add, which we want to prevent
        if (sibling == null) {
          return false;
        }
        return true;
      },
      moves: (el, source, handle, sibling) => {
        // Dont allow moving the nm-add-new-app
        if (el.classList.contains("nm-add-new-app")) {
          return false;
        }
        return true;
      },
    });

    this.dragulaService.dropModel().subscribe((event: any) => {
      const ids = event?.targetModel?.map((module) => module.id);
      this.moduleService.updateModuleOrder(ids).subscribe();
    });

    this.currentLocaleService
      .getCurrentLocale()
      .pipe(
        tap((locale) => {
          this.currentlocale = locale;
        }),
        mergeMap((locale) => this.moduleService.getModules())
      )
      .subscribe(
        (data) => {
          let links = data._links;
          for (let module in data._embedded.modules) {
            if (data._embedded.modules[module].image !== undefined) {
              if (data._embedded.modules[module].image.startsWith("data")) {
                data._embedded.modules[module].image =
                  data._embedded.modules[module].image;
              } else {
                data._embedded.modules[module].image =
                  contextPath + data._embedded.modules[module].image;
              }
            }
          }
          this.modules = data._embedded.modules;
        },
        (err) => console.error(err)
      );
  }

  storeLocalTiles(toSave) {
    if (toSave && toSave["_actions"] != undefined) {
      this.halService
        .execute("edit", toSave["_actions"]["edit"])
        .pipe(map((response) => <any>response))
        .subscribe((response) => {
          this._notificationService.fromJson(response.response);
          this.currentLocaleService.setLocale(this.currentlocale);
        });
    } else {
      this.moduleService
        .postModule("/api/portal/modules", JSON.stringify(toSave))
        .subscribe((response) => {
          this._notificationService.fromJson(response);
          this.currentLocaleService.setLocale(this.currentlocale);
        });
    }
  }

  editCustomTile(module) {
    this.openTilePopup(module);
  }

  deleteCustomTile(module) {
    let dialogRef = this.dialog.open(ConfirmationDialogComponent);
    dialogRef.componentInstance["title"] =
      this.translateService.instant("hl.confirmation");
    dialogRef.componentInstance["message"] = this.translateService.instant(
      "message.confirmation.delete"
    );
    dialogRef.componentInstance["buttonAcceptTitle"] =
      this.translateService.instant("button.accept");
    dialogRef.componentInstance["buttonCancelTitle"] =
      this.translateService.instant("button.cancel");

    dialogRef.afterClosed().subscribe((confirmed) => {
      if (confirmed) {
        this.halService
          .execute("delete", module._actions.delete)
          .subscribe((response) => {
            this._notificationService.fromJson(response.response);
            if (response.response.body.level === "SUCCESS") {
              this.modules.splice(
                this.modules.findIndex((mod) => mod === module),
                1
              );
            }
          });
      }
    });
  }

  openTilePopup(module) {
    let dialogRef = this.dialog.open(AddModuleDialogComponent, {
      minWidth: "550px",
      height: "800px",
    });
    dialogRef.componentInstance["title"] =
      module !== null
        ? this.translateService.instant("module.edit")
        : this.translateService.instant("module.create");
    dialogRef.componentInstance["module"] =
      module !== undefined ? module : <Module>{};
    dialogRef.componentInstance["form"] = this.formData;
    dialogRef.componentInstance["rootconfig"] = this.formData_rootconfig;

    dialogRef.afterClosed().subscribe((module) => {
      if (module) {
        this.storeLocalTiles(module);
      }
    });
  }
}