import { Component, OnDestroy } from "@angular/core";
import { BehaviorSubject, Observable, Subject } from "rxjs";
import { getOrDefault, WidgetConfig } from "../../widget.configuration";
import {
  WidgetComponent,
  WidgetConfiguration,
  WidgetConfigure,
  WidgetInput,
  WidgetOutput,
} from "../../widget.metadata";
import { NgUnsubscribe } from "../../../ng-unsubscribe";
import { filter, startWith, takeUntil } from "rxjs/operators";
import { Selectors } from "../../../components/app-context/api";

export interface MenuConfiguration {
  /** Sets the menu item icon. @default(more_vert) */
  icon?: string;

  /** Specifies the selector to add the menu items (ex: {target: menu-example}) */
  selectors?: any;
}
/**
 * Used in iPIM Buy.
 * No Widgetframe.
 *
 * mat-menu
 */
@WidgetComponent("nm-menu")
@Component({
  selector: "nm-menu",
  templateUrl: "./menuwidget.component.html",
  styleUrls: ["./menuwidget.component.scss"],
})
export class MenuWidgetComponent implements OnDestroy {
  unsubscribe = NgUnsubscribe.create();

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

  /**
   * Sets the menu options
   */
  @WidgetInput("selectors")
  selectorsInput = new BehaviorSubject<Event>(null);

  @WidgetInput()
  parameter = new Subject<any>();

  /**
   * Emits the selected option
   */
  @WidgetOutput("selection")
  selection = new Subject<Event>();

  icon: string;
  selectors: Observable<Selectors>;

  constructor() {}

  @WidgetConfigure()
  protected configureWidget(configuration: WidgetConfig<MenuConfiguration>) {
    this.icon = getOrDefault(configuration.configuration.icon, "more_vert");

    this.selectors = this.selectorsInput.pipe(
      startWith(configuration.configuration.selectors),
      filter((selectors) => !!selectors),
      takeUntil(this.unsubscribe)
    );
  }

  ngOnDestroy() {}
}