import {
  combineLatest as observableCombineLatest,
  Subject,
  BehaviorSubject,
} from "rxjs";

import { takeUntil, mergeMap, distinctUntilChanged } from "rxjs/operators";
import { Component, NgZone } from "@angular/core";
import { AppdataStore } from "../../../components/appdata/appdata.store";
import { WidgetframeService } from "../../widgetframe/widgetframe.service";
import { getOrDefault, WidgetConfig } from "../../widget.configuration";
import { NgUnsubscribe } from "../../../ng-unsubscribe";
import {
  WidgetComponent,
  WidgetId,
  WidgetConfiguration,
  WidgetConfigure,
  WidgetInput,
  WidgetOutput,
} from "../../widget.metadata";
import * as uriTemplates_ from "uri-templates";

const uriTemplates = uriTemplates_;

export interface TextListConfiguration {
  /**
   * Sets the title shown in the text list header
   */
  title: string;
  /**
   * Sets CSS class name for the text list header
   */
  header: string;
  /**
   * Displays the text type and the text as two columns side by side @default(false)
   */
  twoColumns?: boolean;
  /**
   * Defines the context where the text list is used (e.g. the value 'content' is used in content management app)
   */
  context?: string;
  /**
   * Allows loading of the text in the text list from url @default(true)
   */
  remoteData?: boolean;
  /**
   * Hides the text list if there is no text @default(false)
   */
  hideOnEmpty?: boolean;
  /**
   * Shows a header for the text list @default(true)
   */
  withHeader?: boolean;
  /**
   * Sets a placeholder text in the text list when there is no text
   */
  placeholder: string;
  /**
   * Enables the editing of the text in the text list @default(false)
   */
  editable?: boolean;
}

@WidgetComponent("nm-product-text-list")
@Component({
  selector: "nm-product-text-list",
  templateUrl: "./textlist.component.html",
  styleUrls: ["./textlist.component.scss"],
  providers: [WidgetframeService],
})
export class TextListWidgetComponent {
  public cols: any[];
  public editable: boolean = false;
  public remoteData: boolean = true;
  public hideOnEmpty: boolean = false;
  public withHeader: boolean = true;
  public placeholder: string = "Text";

  private unsubscribe = NgUnsubscribe.create();
  public texts: BehaviorSubject<any[]> = new BehaviorSubject([]);

  viewmode: string = "html";

  /**
   * Sets product number for loading the product texts if 'remotedData' configuration option is enabled,
   * and sets the text data directly otherwise
   */
  @WidgetInput()
  public productNo = new Subject<any>();

  /**
   * Reloads the text list
   */
  @WidgetInput()
  public reload = new Subject<any>();

  /**
   * Clears the text list
   */
  @WidgetInput("reset")
  public resetChannel = new Subject<any>();

  /**
   * Emits the text value when it is changed
   */
  @WidgetOutput("changedValue")
  private changedValue: Subject<any> = new Subject<any>();

  @WidgetId()
  public _id;

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

  constructor(
    private _widgetframeService: WidgetframeService,
    private _appdataStore: AppdataStore
  ) {
    this.cols = [
      { field: "description", header: "tab.head.att.name" },
      { field: "value", header: "" },
    ];
  }

  @WidgetConfigure()
  protected configureWidget(
    configuration: WidgetConfig<TextListConfiguration>
  ) {
    this.remoteData = getOrDefault(
      configuration.configuration.remoteData,
      true
    );
    this.hideOnEmpty = configuration.configuration.hideOnEmpty;
    this.withHeader = getOrDefault(
      configuration.configuration.withHeader,
      true
    );
    this.placeholder = configuration.configuration.placeholder;
    let href = "";
    if (this.remoteData === true) {
      href = configuration._links["texts"]["href"];
    }
    let template = uriTemplates(href);
    this.editable = configuration.configuration.editable
      ? configuration.configuration.editable
      : false;

    observableCombineLatest(
      this.productNo.asObservable().pipe(distinctUntilChanged()),
      this.reload.asObservable(),
      (product, reloadEvent) => {
        this.viewmode = "html";
        if (this.remoteData) {
          return template.fill({ product: product });
        } else {
          return product;
        }
      }
    )
      .pipe(
        mergeMap((value) => {
          if (this.remoteData) {
            return this._widgetframeService.getData(value);
          } else {
            return [{ values: [value] }];
          }
        })
      )
      .subscribe(
        (data) => {
          this.texts.next(data["values"]);
        },
        (error) => {
          if (this.remoteData) {
            var err = JSON.parse(error.text());
          } else {
            var err = JSON.parse(error);
          }
        }
      );

    this.resetChannel
      .asObservable()
      .pipe(takeUntil(this.unsubscribe))
      .subscribe((reset) => {
        this.texts.next([]);
        this.viewmode = "html";
        return null;
      });
  }

  changeViewmode() {
    if (this.viewmode == "text") {
      this.viewmode = "html";
    } else {
      this.viewmode = "text";
    }
  }

  onChange() {
    let currentTexts: any[] = [];
    this.texts.subscribe((data) => (currentTexts = data));
    this.changedValue.next(currentTexts[0]);
  }

  onExternalModelChange(value) {
    if (this.texts) {
      let currentText = this.texts.value[0];
      currentText.value = value;
      this.changedValue.next(currentText);
    }
  }
}