import {
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  OnChanges,
} from "@angular/core";
import {
  WidgetComponent,
  WidgetConfigure,
  WidgetConfiguration,
} from "../../../widget.metadata";
import { CellWidget } from "../../../../components/list-cell";
import { WidgetConfig } from "../../../widget.configuration";

export interface StatusMapping {
  /**
   * Defines the status value
   */
  status: string;

  /**
   * Defines the icon name to be displayed for the configured status value
   */
  icon: string;

  /**
   * Defines the color of the icon to be displayed for the configured status value
   */
  color: string;
}

export interface ListCellSentimentsConfiguration {
  /**
   * Defines the field from which the value of the cell will be extracted
   */
  "value-field"?: string;

  /**
   * Enables the display of a tooltip message when hovering over the info icon in the cell @default(false)
   */
  "show-message"?: boolean;

  /**
   * Enables the display of an svg icon in the cell @default(false)
   */
  "svg-icon"?: boolean;

  /**
   * Defines the field from which the message of the tooltip will be extracted
   */
  "message-field"?: string;

  /**
   * Defines the mapping of the cell value to the corresponding icon and color @default([])
   */
  "status-mapping"?: StatusMapping[];
}

@WidgetComponent("list-cell-sentiments")
@Component({
  selector: "list-cell-sentiments",
  templateUrl: "./list-cell-sentiments-widget.component.html",
  styleUrls: ["./list-cell-sentiments-widget.component.scss"],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ListCellSentimentsWidgetComponent
  implements CellWidget, OnChanges {
  public row: any;
  public value;

  private valueField: string;
  private messageField: string;
  private statusMapping: StatusMapping[];

  public showMessage: boolean;
  public svgIcon: boolean;
  public status;
  public message;
  public icon: string;
  public color: string;

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

  constructor(private cdr: ChangeDetectorRef) {}

  @WidgetConfigure()
  protected configureWidget(
    configuration: WidgetConfig<ListCellSentimentsConfiguration>
  ) {
    this.valueField = configuration.configuration["value-field"] || null;
    this.showMessage = configuration.configuration["show-message"] || false;
    this.svgIcon = configuration.configuration["svg-icon"] || false;
    this.messageField = configuration.configuration["message-field"] || null;
    this.statusMapping =
      <StatusMapping[]>configuration.configuration["status-mapping"] || [];
  }

  public ngOnInit() {
    this.updateIcon();
  }

  public ngOnChanges() {
    this.updateIcon();
  }

  private updateIcon() {
    if (this.value == null) {
      this.status = null;
      this.message = null;
      this.icon = null;
      this.message = null;
      return;
    }

    this.status = this.valueField ? this.value[this.valueField] : this.value;
    this.message = this.messageField
      ? this.value[this.messageField]
      : this.value;

    let status = (this.status == null ? "" : this.status).toString();

    for (let config of this.statusMapping) {
      if (config.status == status) {
        this.icon = config.icon;
        this.color = config.color.toUpperCase();

        this.cdr.markForCheck();
        return;
      }
    }
  }
}