import {
  WidgetComponent,
  WidgetConfiguration,
  WidgetConfigure,
  WidgetId,
  WidgetInput,
} from "../widget.metadata";
import { Component } from "@angular/core";
import { getOrDefault, WidgetConfig } from "../widget.configuration";
import { BaseConfiguration } from "../widgetframe/widgetframe.component";
import { Subject } from "rxjs";
import { NgUnsubscribe } from "../../ng-unsubscribe";
import { takeUntil } from "rxjs/operators";

export interface ChartConfiguration extends BaseConfiguration {
  /**
   * The cart options
   */
  chartOptions?: ChartOptions;
}

export interface ChartOptions {
  /**
   * Fill elements with a gradient instead of a solid color. @default(true)
   */
  gradient?: boolean;

  /**
   * Show or hide the x axis. @default(true)
   */
  xAxis?: boolean;

  /**
   * Show or hide the y axis. @default(true)
   */
  yAxis?: boolean;

  /**
   * Show or hide the grid lines. @default(true)
   */
  showGridLines?: boolean;

  /**
   * Round domains for aligned gridlines. @default(true)
   */
  roundDomains?: boolean;

  /**
   * Show or hide the x axis label. @default(false)
   */
  showXAxisLabel?: boolean;

  /**
   * Show or hide the y axis label. @default(true)
   */
  showYAxisLabel?: boolean;

  /**
   * The y axis label text.
   */
  yAxisLabel?: string;

  /**
   * The x axis label text.
   */
  xAxisLabel?: string;

  /**
   * Trim or not ticks on the x axis. @default(true)
   */
  trimXAxisTicks?: boolean;

  /**
   * Trim or not ticks on the Y axis. @default(true)
   */
  trimYAxisTicks?: boolean;

  /**
   * Displays the value number next to the bar. @default(false)
   */
  showDataLabel?: boolean;

  /**
   * Hide bar if value is 0 and setting is true. @default(false)
   */
  noBarWhenZero?: boolean;

  /**
   * Show or hide the legend. @default(false)
   */
  legend?: boolean;

  /**
   * The legend title.
   */
  legendTitle?: string;

  /**
   * The legend position 'right' or 'below'. @default(right)
   */
  legendPosition?: string;

  /**
   * Padding between bars in px. @default(8)
   */
  barPadding?: number;

  /**
   * Padding between group in px. @default(16)
   */
  groupPadding?: number;

  /**
   * Enable or disable animations. @default(true)
   */
  animations?: boolean;

  /**
   * The color scheme of the chart.
   */
  colorScheme?: ColorScheme;
}

export interface ColorScheme {
  /**
   * Array of css colors. @default(["#e57e99", "#ffc699", "#cedbaf", "#cdcdcd", "blue", "orange", "##a20ee7", "aqua", "black"])
   */
  domain: string[];
}

const DEFAULT_BAR_CHART_OPTIONS: any = {
  gradient: true,
  xAxis: true,
  yAxis: true,
  showGridLines: true,
  roundDomains: true,
  showXAxisLabel: false,
  showYAxisLabel: true,
  yAxisLabel: "",
  xAxisLabel: "",
  trimXAxisTicks: true,
  trimYAxisTicks: true,
  showDataLabel: false,
  noBarWhenZero: false,
  legend: false,
  legendTitle: "",
  legendPosition: "right",
  barPadding: 8,
  groupPadding: 16,
  animations: true,
  colorScheme: {
    domain: [
      "#e57e99",
      "#ffc699",
      "#cedbaf",
      "#cdcdcd",
      "blue",
      "orange",
      "##a20ee7",
      "aqua",
      "black",
    ],
  },
};

/**
 * Displays a Stacked Vertical Bar Chart from ngx-charts.
 * Default chart options can be overwritten from json config.
 * https://swimlane.gitbook.io/ngx-charts/examples/bar-charts/stacked-vertical-bar-chart
 */
@WidgetComponent("nm-vertical-bar-chart-stacked")
@Component({
  selector: "nm-vertical-bar-chart-stacked",
  templateUrl: "./vertical-bar-chart-stacked.component.html",
  styleUrls: ["./vertical-bar-chart-stacked.component.scss"],
})
export class VerticalBarChartStackedWidgetComponent {
  public header: string;
  public withHeader: boolean;
  public chartOptions: any;

  @WidgetId()
  public id;

  /**
   * The chart data
   */
  @WidgetInput()
  public data = new Subject<any>();

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

  @WidgetConfigure()
  public configureWidget(configuration: WidgetConfig<ChartConfiguration>) {
    this.header = getOrDefault(
      this.configuration.configuration.header,
      "primary"
    );
    this.withHeader = getOrDefault(
      this.configuration.configuration.withHeader,
      true
    );
    this.chartOptions = getOrDefault(
      this.configuration.configuration.chartOptions,
      DEFAULT_BAR_CHART_OPTIONS
    );
  }
}