import {
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
} from "@angular/core";
import { Subject } from "rxjs";
import { takeUntil } from "rxjs/operators";
import { WidgetConfig } from "../../../widget.configuration";
import { NgUnsubscribe } from "../../../../ng-unsubscribe";
import {
  WidgetComponent,
  WidgetConfiguration,
  WidgetConfigure,
  WidgetInput,
  WidgetOutput,
} from "../../../widget.metadata";
import { WidgetframeService } from "../../../widgetframe/widgetframe.service";
import * as uriTemplates_ from "uri-templates";
import { BaseConfiguration } from "../../../widgetframe/widgetframe.component";

const uriTemplates = uriTemplates_;

export interface TypePickerConfiguration extends BaseConfiguration {
  countsLink: string;
  types: {
    identifier: string;
    descriptionKey: string;
  }[];
}

/**
 * Component which lets user select data types on a product or article, such as attribute, asset, text, price.
 */
@WidgetComponent("nm-type-picker")
@Component({
  selector: "nm-type-picker",
  templateUrl: "./type-picker.component.widget.html",
  styleUrls: ["./type-picker.component.widget.scss"],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TypePickerWidgetComponent {
  private unsubscribe = NgUnsubscribe.create();

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

  @WidgetInput("article")
  public article = new Subject<{ identifier; type }>();

  @WidgetOutput("selectedTypes")
  public selectedTypes = new Subject<string[]>();

  public selectableItems = [];

  constructor(
    private widgetframeService: WidgetframeService,
    private changeDetector: ChangeDetectorRef
  ) {}

  @WidgetConfigure()
  public configureWidget(config: WidgetConfig<TypePickerConfiguration>) {
    this.selectableItems = this.configuration.configuration.types;
    this.selectedTypes.next([]);
  }

  public selectedTypesChanged(types: any[]) {
    this.selectedTypes.next(types.map((entry) => entry.identifier));
  }

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