import { Component, OnDestroy } from "@angular/core";
import {
  WidgetComponent,
  WidgetConfiguration,
  WidgetConfigure,
} from "../../widget.metadata";
import { WidgetConfig, getOrDefault } from "../../widget.configuration";
import { CellWidget } from "../../../components/list-cell";
import { takeUntil } from "rxjs/operators";
import { NgUnsubscribe } from "../../../ng-unsubscribe";
import { BaseConfiguration } from "../../../widgets/widgetframe/widgetframe.component";
import { CurrentLocaleService } from "../../../components/i18n/currentLocale.service";

export interface NumberAndCurrencyConfiguration extends BaseConfiguration {
  /**
   * Accepts either 'number' or 'currency' or 'percentage' type
   */
  dataType: string;
  /**
   * The format expected for the number shown
   */
  numberFormat: string;
  /**
   * A boolean, which aligns number right if true
   */
  alignNumbersRight: boolean;
  /**
   * If dataType is currency, this configuration should determine the name of the currencyField in the row returned
   */
  currencyField: string;
  /**
   * A boolean, which allows showing zero values if value is null
   */
  showZeroValues: boolean;
  /**
   * A boolean, which shows dash(-) on empty value
   */
  showDashOnEmpty?: boolean;
  /**
   * If value is dash(-), this tooltip appears when hovering over it
   */
  emptyDashTooltip?: string;
}

@WidgetComponent("nm-number-and-currency-cell")
@Component({
  selector: "nm-number-and-currency-cell",
  templateUrl: "./number-and-currency-widget.component.html",
  styleUrls: ["./number-and-currency-widget.component.scss"],
})
export class NumberAndCurrencyWidgetComponent implements CellWidget, OnDestroy {
  public row: any;
  public value: any;

  public dataType: string;
  public numberFormat: string;
  public alignNumbersRight: boolean;
  public selectedUiLocaleString: string;
  public currencyField: string;
  public showZeroValues: boolean;
  public percentageSign: string = "%";
  public showDashOnEmpty: boolean;
  public emptyDashTooltip: string;

  private unsubscribe = NgUnsubscribe.create();

  constructor(private currentLocaleService: CurrentLocaleService) {}

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

  @WidgetConfigure()
  protected configureWidget(
    configuration: WidgetConfig<NumberAndCurrencyConfiguration>
  ) {
    this.dataType = getOrDefault(
      this.configuration.configuration.dataType,
      "number"
    );
    this.numberFormat = getOrDefault(
      this.configuration.configuration.numberFormat,
      "1.2-2"
    );
    this.alignNumbersRight = getOrDefault(
      this.configuration.configuration.alignNumbersRight,
      true
    );
    this.currencyField = getOrDefault(
      this.configuration.configuration.currencyField,
      "currency"
    );
    this.showZeroValues = getOrDefault(
      this.configuration.configuration.showZeroValues,
      false
    );
    this.showDashOnEmpty = getOrDefault(
      this.configuration.configuration.showDashOnEmpty,
      false
    );
    this.emptyDashTooltip = getOrDefault(
      this.configuration.configuration.emptyDashTooltip,
      "imarket.tooltip.empty-data"
    );

    this.currentLocaleService
      .getCurrentLocale()
      .pipe(takeUntil(this.unsubscribe))
      .subscribe((locale) => {
        this.selectedUiLocaleString = locale;
      });
  }

  nonNullValue() {
    return this.showZeroValues || this.showDashOnEmpty
      ? this.value != null
      : !!this.value;
  }

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