import { filter, map, mergeMap, tap } from "rxjs/operators";
import {
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  TemplateRef,
  ViewChild,
} from "@angular/core";
import { WidgetConfig } from "../../widget.configuration";
import {
  WidgetComponent,
  WidgetConfiguration,
  WidgetConfigure,
  WidgetId,
  WidgetInput,
} from "../../widget.metadata";
import { Subject } from "rxjs";
import { WidgetframeService } from "../../widgetframe/widgetframe.service";
import * as uriTemplates_ from "uri-templates";
import { Lightbox } from "ng-gallery/lightbox";
import { uuid } from "../../configuration";
import { Gallery } from "ng-gallery";
import { GalleryComponent } from "../../gallery";

const uriTemplates = uriTemplates_;

declare var contextPath: string;

@WidgetComponent("nm-lighttable")
@Component({
  selector: "nm-lighttable",
  templateUrl: "./lighttable.component.html",
  styleUrls: ["./lighttable.component.scss"],
  providers: [WidgetframeService],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class LightTableWidgetComponent {
  @ViewChild("itemTemplate", { static: true }) itemTemplate: TemplateRef<any>;

  @WidgetInput()
  public productNo = new Subject<any>();

  @WidgetId()
  public _id = uuid();

  @WidgetConfiguration()
  public configuration: WidgetConfig;

  public assets: any[] = [];

  constructor(
    private _widgetframeService: WidgetframeService,
    private gallery: Gallery,
    private lightbox: Lightbox,
    private cdr: ChangeDetectorRef
  ) {}

  @WidgetConfigure()
  protected configureWidget(configuration: WidgetConfig) {
    const lightboxRef = this.gallery.ref(this._id);
    lightboxRef.setConfig({
      itemTemplate: this.itemTemplate,
    });

    let href = configuration._links["assets"]["href"];
    let template = uriTemplates(href);

    this.productNo
      .asObservable()
      .pipe(
        map((number) => template.fill({ product: number })),
        mergeMap((href) => this._widgetframeService.getData(href)),
        tap(() => (this.assets = [])),
        filter((data) => data && data["_embedded"])
      )
      .subscribe(
        (response) => {
          const relations: any[] = response?._embedded?.["asset-relations"];
          if (relations == null) {
            return;
          }

          const mappedAssets = [];
          for (let relation of relations) {
            const relationAssets = relation?._embedded?.assets;
            if (relationAssets == null) {
              continue;
            }

            mappedAssets.push(
              ...relationAssets.map((data) => this.mapAssets(data))
            );
          }

          lightboxRef.load(GalleryComponent.toLightboxItems(mappedAssets));
          this.assets = mappedAssets;
          this.cdr.markForCheck();
        },
        (error) => {
          console.error(error);
        }
      );
  }

  openLightbox(index: number) {
    this.lightbox.open(index, this._id);
  }

  private mapAssets(data) {
    if (data.type === "image") {
      let image: any = data;
      if (image._links != undefined) {
        let src: any = {};
        if (image._links.thumbnail != undefined) {
          src.small = image._links.thumbnail.href;
        } else {
          src.small = image._links.default.href;
        }
        if (image._links.full != undefined) {
          src.medium = image._links.full.href;
          src.large = image._links.full.href;
        } else {
          src.medium = image._links.default.href;
          src.large = image._links.default.href;
        }

        image.src = src;
      }
    }

    if (data.type === "document") {
      data.placeholderimg = contextPath + "/assets/placeholder_pdf_281x202.jpg";
    }

    if (data.type === "video") {
      data.placeholderimg =
        contextPath + "/assets/placeholder_movie_281x202.jpg";
    }

    return data;
  }

  mapToTapEvent(event: MouseEvent) {
    return { center: { x: event.clientX, y: event.clientY } };
  }

  showDetails(asset) {
    return "/asset-search/asset/" + asset.title;
  }
}