import {
  ChangeDetectorRef,
  Component,
  OnChanges,
  OnDestroy,
  SimpleChanges,
} from "@angular/core";
import { ReplaySubject, BehaviorSubject } from "rxjs";
import { IgxGridCell } from "@infragistics/igniteui-angular";
import { takeUntil } from "rxjs/operators";
import { NgUnsubscribe } from "../../../ng-unsubscribe";
import {
  WidgetComponent,
  WidgetConfiguration,
  WidgetConfigure,
  WidgetId,
  WidgetInput,
} from "../../widget.metadata";
import { CellWidget } from "../../../components/list-cell";
import { WidgetConfig } from "../../widget.configuration";
import { Column } from "../../interfaces/list.interfaces";

@WidgetComponent("nm-list-cell-chip-select")
@Component({
  selector: "nm-list-cell-chip-select",
  templateUrl: "./list-cell-chip-select-widget.component.html",
})
export class ListCellChipSelect implements CellWidget, OnDestroy, OnChanges {
  @WidgetId()
  public _id;

  @WidgetConfiguration()
  public configuration: WidgetConfig;

  public value: any;
  public row: any;
  public isEditing: boolean;
  public cellComponent: IgxGridCell;
  public columnDefinition: Column;

  public chipColors: any;
  public identifier: string;
  public description: string;

  public color: string;

  private unsubscribe = NgUnsubscribe.create();

  constructor(private cdr: ChangeDetectorRef) {}

  ngOnChanges(changes: SimpleChanges) {
    if (changes.value) {
      let value = this.value || this.cellComponent.value;
      this.identifier = value.source[0].value;
      this.description = value.source[0].description;
      this.updateColor();
    }
  }

  private updateColor() {
    if (this.chipColors && this.identifier) {
      this.color = this.chipColors[this.identifier];
    } else {
      this.color = null;
    }
    this.cdr.markForCheck();
  }

  @WidgetInput()
  public lookupValues: any = new BehaviorSubject<any>([]);

  @WidgetConfigure()
  protected configureWidget(configuration: WidgetConfig) {
    this.chipColors = configuration.configuration.chipColors;

    this.lookupValues.pipe(takeUntil(this.unsubscribe)).subscribe((data) => {
      this.setOptionValueAndDescription(
        this.value ? this.value.source[0].value : this.value
      );
    });
  }

  onValueChange(event) {
    this.setOptionValueAndDescription(event.value);
  }

  private setOptionValueAndDescription(selectedOption) {
    this.lookupValues.value.forEach((option) => {
      if (
        option.identifier !== selectedOption &&
        option.description !== selectedOption
      ) {
        return;
      }
      this.identifier = option.identifier;
      this.description = option.description;

      this.updateColor();

      this.value = {
        identifier: this.columnDefinition.field,
        description: this.description,
        value: this.description,
        tooltip: this.description,
        type: "LOOKUP",
        source: [{ value: this.identifier, description: this.description }],
      };
      this.cellComponent.editValue = this.value;
    });
  }

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