import { Component, Input, ElementRef, Output, EventEmitter, AfterViewInit, OnChanges } from '@angular/core';
import { RdLib } from '../../../base/rdLib';
import { BaseChart, IDevChartSerieItem } from "./baseChart";
import { Portlet } from "../../portlet/portlet";

@Component({
  selector: 'rd-bar-chart',
  template: `
    <div id="dxElement" style="width:100%" [style.height.px]="height"></div>
  `
})
export class BarChart extends BaseChart implements OnChanges, AfterViewInit {
  @Input("rd-text") text: string;
  @Input("rd-sub-text") subText: string;
  @Input("rd-data") data: Array<object>;
  @Input("rd-type") type: string = "bar";
  @Input('rd-series') series: Array<IDevChartSerieItem>;
  @Input("rd-key-field") keyField: string = "key";
  @Input("rd-value-field") valueField: string = "value";
  @Input("rd-rotated") rotated: boolean = false;
  @Input("rd-height") height: number | string = 'auto';

  @Output("rd-click") clickEvent: EventEmitter<string> = new EventEmitter<string>();

  constructor(public element: ElementRef, portlet: Portlet) {
    super(element, portlet);
  }

  ngAfterViewInit() {
    this.render();
  }

  ngDoCheck() {
    if (this.container && this.previousWidth != this.container[0].clientWidth) {
      this.previousWidth = this.container[0].clientWidth;
      this.render();
    }
  }

  ngOnChanges(changes) {
    if (this.initialized) {
      if (changes.keyField || changes.valueField || changes.type) this.render();
      if (changes.data) {
        this.dxElement.option('dataSource', this.data);
        this.render();
      }
      if (changes.text || changes.subText) {
        this.dxElement.option('title', {
          text: this.text,
          subtitle: { text: this.subText }
        });
      }
    }
  }

  public render() {
    if (this.container[0].clientWidth > 0) {
      this.initialized = true;
      this.container.dxChart(this.getChartOptions());
      this.dxElement = this.container.dxChart('instance');
      this.dxElement.render();
    }
  }

  private getKeyOptions(valueKey: string) {
    for (var i in this.series) {
      var item = this.series[i]
      if (item.valueField == valueKey) return this.palette[Number(i) % this.palette.length]
    }
  }

  private getChartOptions() {
    let defaultSeries = {
      type: this.type,
      argumentField: this.keyField,
      valueField: this.valueField,
    }

    return {
      dataSource: this.data ? this.data : [],
      commonSeriesSettings: {
        argumentField: this.keyField,
        type: this.type,
        barPadding: 0.5,
        hoverStyle: { hatching: { opacity: 0.3, step: 6, width: 2 } }
      },
      rotated: this.rotated,
      series: this.series ? this.series : defaultSeries,
      palette: this.palette,
      title: {
        text: this.text,
        subtitle: { text: this.subText },
        font: { size: 14 }
      },
      export: { enabled: this.export },
      legend: {
        verticalAlignment: "bottom",
        horizontalAlignment: "center",
        itemTextPosition: 'bottom',
        columnCount: 4,
        font: { size: 8 }
      },
      crosshair: {
        enabled: true,
        color: "#4BACC6",
        width: 1,
        dashStyle: "solid",
        horizontalLine: { visible: false },
        label: {
          visible: true,
          backgroundColor: "#4BACC6",
          font: { color: "#fff", size: 12 }
        }
      },
      tooltip: {
        enabled: true,
        border: { visible: false },
        color: "#fff",
        font: {
          color: "gray",
          opacity: 1,
          size: 12
        },
        paddingTopBottom: 8,
        zIndex: 9999999999999,
        customizeTooltip: function (arg) {
          if (this.type == 'bar') {
            return {
              text: "<span style='font-size: 12px; font-weight: 600; color:#4BACC6;'>" + arg.argument +
                "</span> : " + "<span>" + arg.originalValue + "</span>"
            };
          } else {
            let text = '';
            var object;
            for (var item of this.data) {
              if (item[this.keyField] == arg.argument) { object = item; break; }
            }
            text = "<span style='font-size: 12px; font-weight: 600; color:#4BACC6;'>" + arg.argument + "</span>";
            for (let key of Object.keys(object)) {
              if (key != this.keyField && this.getKeyOptions(key)) {
                if (this.series) {
                  var color = this.getKeyOptions(key) || 'orangered';
                  text += "<br /><span style='color:" + color + "'>" + key + "</span>: " + object[key];
                } else {
                  text += "<span style='font-size: 14px; font-weight: 600; color:#4BACC6;'>" + key +
                    "</span> " + ":" + " <span>" + object[key] + "</span>";
                }
              }
            }
            return { text };
          }
        }.bind(this),
        shadow: {
          opacity: 0.15,
          blur: 0,
          color: "#000000",
          offsetX: 3,
          offsetY: 3
        }
      },
      onLegendClick: function (info) {
        this.clickEvent.emit(info.target);
        if (info.target.isVisible()) {
          info.target.hide();
        } else {
          info.target.show();
        }
      }.bind(this),
      onPointClick: function (info) {
        if (info.target.isSelected()) info.target.clearSelection();
        else {
          info.target.select();
          this.clickEvent.emit(info.target.argument);
        }
      }.bind(this)
    };
  }
}