import { Component } from "@angular/core";
import { WidgetConfig } from "../../widget.configuration";
import {
  WidgetComponent,
  WidgetConfiguration,
  WidgetConfigure,
  WidgetId,
} from "../../widget.metadata";
import { WidgetframeService } from "../../widgetframe/widgetframe.service";
import { getOrDefault } from "../../widget.configuration";
import { TranslateService } from "@ngx-translate/core";
import { CurrentLocaleService } from "../../../components/i18n/currentLocale.service";
import { takeUntil, tap } from "rxjs/operators";
import { of as observableOf, zip } from "rxjs";
import { BaseConfiguration } from "../../widgetframe/widgetframe.component";
import { NgUnsubscribe } from "../../../ng-unsubscribe";
import * as uriTemplates_ from "uri-templates";
import { deepCopy } from "../../../components/util";
const uriTemplates = uriTemplates_;

declare var contextPath: string;

export interface Documentation {
  /**
   * Icon for the documentation entry.
   */
  icon: string;

  /**
   * Base link for the documented object.
   */
  baseLink: string;

  /**
   * link for the documented object.
   */
  link: string;

  /**
   * Label for the documented object.
   */
  label: string;

  /**
   * Translated label for the documented object.
   */
  translatedLabel: string;

  /**
   * Boolean to refer if the documentation is internal or external.
   */
  internal: boolean;

  /**
   * Used to add <mat-divider> after each entry @default(false)
   */
  module: boolean;

  /**
   * Children for the entry.
   */
  children: Documentation[];
}
export interface DocumentationListWidgetConfiguration
  extends BaseConfiguration {
  /**
   * Enables/Disables sorting by alphabet @default("false")
   */
  enableAlphabeticSort?: boolean;

  /**
   * Appends language to link @default("false")
   */
  appendLanguage?: boolean;

  /**
   * Documentations to be displayed
   */
  documentations: Documentation[];
}
@WidgetComponent("nm-documentation-list")
@Component({
  selector: "nm-documentation-list",
  templateUrl: "./documentationlist.component.html",
  styleUrls: ["./documentationlist.component.scss"],
  providers: [WidgetframeService],
})
export class DocumentationListWidgetComponent {
  public documentations: Documentation[];
  public enableAlphabeticSort: boolean;
  public appendLanguage: boolean;

  private unsubscribe = NgUnsubscribe.create();

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

  @WidgetId()
  public _id;

  constructor(
    public translateService: TranslateService,
    private currentLocaleService: CurrentLocaleService
  ) {
    this.documentations = [];
  }

  @WidgetConfigure()
  protected configureWidget(
    configuration: WidgetConfig<DocumentationListWidgetConfiguration>
  ) {
    this.documentations = configuration.configuration.documentations;
    this.enableAlphabeticSort = getOrDefault(
      configuration.configuration.enableAlphabeticSort,
      false
    );
    this.appendLanguage = getOrDefault(
      configuration.configuration.appendLanguage,
      false
    );
    this.documentations.forEach((doc: Documentation, index) => {
      if (doc.icon) {
        doc.icon = contextPath + doc.icon;
      }
      if (this.appendLanguage) {
        doc.baseLink = doc.link;
        doc.children.forEach((child) => {
          child.baseLink = child.link;
        });
      }
    });

    if (configuration._links) {
      this.externalizeLinks(this.documentations, configuration._links);
    }

    this.currentLocaleService
      .getCurrentLocale()
      .pipe(takeUntil(this.unsubscribe))
      .subscribe((selectedLocale) => {
        this.documentations.forEach((documentation) => {
          if(documentation.children){
          const observableArray = documentation.children.map((child) =>
            this.translateService
              .get(child.label)
              .pipe(tap((translation) => (child.translatedLabel = translation)))
          );
          const zipped = zip(...observableArray);
          if (this.appendLanguage) {
            documentation = this.appendLanguageToLinks(
              documentation,
              selectedLocale.substring(0, 2)
            );
          }
          zipped.subscribe(() => {
            if (this.enableAlphabeticSort) {
              documentation.children = this.sortChildrenLabels(
                documentation.children
              );
            }
          });
          return;
        }});
      });
  }

  private externalizeLinks(config: Documentation[], links: any) {
    config.forEach((conf) => {
      if (conf.link && !conf.link.startsWith("/") && !conf.internal) {
        conf.link = links[conf.link].href;
      } else if (conf.link && conf.internal) {
        conf.link = contextPath + conf.link;
      }

      if (conf.children) {
        this.externalizeLinks(conf.children, links);
      }
    });
  }

  sortChildrenLabels(children) {
    return children.sort(function (a, b) {
      return a.translatedLabel.localeCompare(b.translatedLabel);
    });
  }

  appendLanguageToLinks(documentation: Documentation, selectedLocale: string) {
    documentation.link = this.getLinkWithAppendedLocale(
      documentation,
      selectedLocale
    );
    documentation.children.forEach((child) => {
      child.link = this.getLinkWithAppendedLocale(child, selectedLocale);
    });
    return documentation;
  }

  getLinkWithAppendedLocale(parentElement, selectedLocale) {
    if (parentElement.link) {
      return uriTemplates(parentElement.baseLink).fill({
        language: selectedLocale,
      });
    }
  }

  ngOnDestroy() {
    this.unsubscribe.destroy();
  }
}