import {
  SeriesProperities, ColumnProperties, PlotOptionsTooltip, BarProperties, ScatterProperties, Style,
  Marker, PieProperties, DataLabels
} from '../types/plotOptions/series';
import {HighChartSeries} from '../types/high-chart-series';

import {
  ChartTemplate,
  ChartProperties,
  LegendProperties,
  XAxisProperties,
  PlotOptionsProperties,
  CreditsProperties,
  YAxisProperties,
  Title,
  Labels,
  NavigationProperties,
  XAxisStyleProperties,
  StyleXAxisLabels,
  YAxisPlotLines,
  LegendItemStyle,
  TooltipTemplate
} from '../types/chart';

export class ICSHighChartDefaults extends ChartTemplate {
  public exporting: any;

  constructor() {
    super();
    this.title = this.getTitle();
    this.chart = this.getChart();
    this.tooltip = this.getTooltip();
    this.series = this.getSeries();
    this.xAxis = this.getXAxis();
    this.yAxis = this.getYAxis();
    this.plotOptions = this.getPlotOptions();
    this.legend = this.getLegend();
    this.colors = this.getColors();
    this.credits = this.getCredits();
    this.navigation = this.getNavigation();
    this.exporting = {
      buttons: {
        contextButton: {
          menuItems: ['downloadXLS', 'downloadCSV', 'downloadPNG']
        }
      }
    };
  }

  private getTooltip() {

    const tooltip = new TooltipTemplate();
    tooltip.formatter = function () {
      return '' + this.series.name + ' <br> ' + this.x + ':  <b>' + this.y + '</b>';
    };
    return tooltip;
  }

  private getNavigation() {

    const nav = new NavigationProperties();
    nav.buttonOptions.y = 0;
    nav.buttonOptions.x = 0;
    nav.buttonOptions.verticalAlign = 'top';
    return nav;
  }

  private getCredits() {

    const cp: CreditsProperties = new CreditsProperties();
    cp.enabled = false;
    return cp;
  }

  private getColors() {
    const colors: Array<String> = ['#00B19D', '#4E3363', '#3A99D5', '#00AE84', '#49494A', '#318ACA'];
    return JSON.parse(JSON.stringify(colors));
  }

  private getChart() {

    const cp: ChartProperties = new ChartProperties();
    cp.type = '';
    cp.fontFamily = 'Roboto Condensed';
    cp.plotBorderWidth = 0;
    cp.plotBorderColor = '#EAF0F4';
    cp.height = null;
    cp.width = null;
    cp.inverted = null;


    return cp;
  }

  private getTitle() {

    const title: Title = new Title();
    title.align = 'center';
    title.text = '';
    return title;
  }

  private getSeries() {

    const hc: HighChartSeries[] = new Array<HighChartSeries>();

    const series: HighChartSeries = new HighChartSeries();
    series.name = '';
    series.type = '';

    series.color = '';
    series.data = null;
    hc.push(series);
    return hc;
  }

  private getXAxis() {

    const x: XAxisProperties = new XAxisProperties();
    x.categories = new Array();
    x.gridLineWidth = 0;
    x.lineColor = 'transparent';
    x.tickLength = 0;
    x.minorGridLineWidth = 0;
    x.labels = new StyleXAxisLabels();
    x.labels.enabled = true;
    x.labels.step = 1;
    x.labels.style = new XAxisStyleProperties();
    x.labels.style.fontSize = '13px';
    x.labels.style.lineHeight = 11;
    x.title = {
      align: 'middle',
      enabled: 'middle',
      margin: undefined,
      offset: undefined,
      position3d: null,
      reserveSpace: true,
      rotation: 0,
      skew3d: null,
      style: {},
      text: null,
      useHTML: false,
      x: 0,
      y: undefined
    };
    return x;
  }

  private getYAxis() {

    const y: YAxisProperties = new YAxisProperties();
    y.labels = this.getLabels();
    y.max = undefined;
    y.min = undefined;
    y.gridLineWidth = 0;
    y.lineColor = 'transparent';
    y.tickLength = 0;
    y.tickAmount = undefined;
    y.lineWidth = 1;
    y.minorGridLineWidth = 0;
    y.plotLines = new Array<YAxisPlotLines>();
    y.title = {
      align: 'middle',
      enabled: 'middle',
      margin: undefined,
      offset: undefined,
      position3d: null,
      reserveSpace: true,
      rotation: 270,
      skew3d: null,
      style: {},
      text: null,
      useHTML: false,
      x: 0,
      y: undefined
    };
    return y;
  }

  private getLabels() {

    const label: Labels = new Labels();
    label.enabled = true;
    label.format = '{value}';
    return label;
  }

  private getPlotOptions() {

    const p: PlotOptionsProperties = new PlotOptionsProperties();
    p.series = this.getSeriesPlotOptions();
    p.bar = this.getBarPlotOptions();
    p.column = this.getColumnPlotOptions();
    p.scatter = this.getScatterPlotOptions();
    p.pie = this.getPiePlotOptions();
    return p;
  }

  private getSeriesPlotOptions() {

    const series: SeriesProperities = new SeriesProperities();
    series.colorByPoint = false;
    series.minPointLength = 20;
    series.innerSize = undefined;
    series.tooltip = this.getTooltipPlotOptions();


    return series;
  }

  private getSeriesDataLabels() {

    const dataLabels: DataLabels = new DataLabels();
    dataLabels.enabled = false;
    dataLabels.y = 0;
    dataLabels.x = 0;
    dataLabels.fontSize = '18px';
    dataLabels.align = 'right';
    dataLabels.color = 'white';
    dataLabels.formatter = function () {
      return this.y;
    };
    return dataLabels;

  }

  private getBarPlotOptions() {


    const bar: BarProperties = new BarProperties();
    bar.pointPadding = 0;
    bar.pointWidth = 40;
    bar.groupPadding = 0;

    bar.dataLabels = this.getDataLabelsBarPlotOptions();
    bar.tooltip = this.getTooltipPlotOptions();

    return bar;
  }

  private getPiePlotOptions() {

    const pie = new PieProperties();
    pie.allowPointSelect = true;
    pie.cursor = 'pointer';
    pie.showInLegend = false;
    pie.dataLabels = new DataLabels();
    pie.dataLabels.enabled = false;
    pie.dataLabels.color = '#FFFFFF';
    pie.dataLabels.distance = 0;
    pie.dataLabels.style = new Style();
    pie.tooltip = new PlotOptionsTooltip();
    return pie;
  }

  private getDataLabelsBarPlotOptions() {

    const dataLabels: DataLabels = new DataLabels();
    dataLabels.enabled = true;
    dataLabels.y = 0;
    dataLabels.x = 0;
    dataLabels.fontSize = '18px';
    dataLabels.align = 'right';
    dataLabels.color = 'white';

    const style: Style = new Style();
    style.textShadow = 'none';
    style.fontSize = '14px';
    style.fontWeight = 'light';
    dataLabels.style = style;
    dataLabels.formatter = function () {
      return this.y;
    };
    return dataLabels;
  }

  private getTooltipPlotOptions() {

    const tooltip: PlotOptionsTooltip = new PlotOptionsTooltip();
    tooltip.pointFormatter = function () {
      return this.y;
    };
    return tooltip;
  }

  private getLegend() {

    const legend: LegendProperties = new LegendProperties();
    legend.align = 'left';
    legend.enabled = true;
    legend.y = 5;
    legend.x = 0;
    legend.verticalAlign = 'bottom';
    legend.layout = 'horizontal';


    legend.labelFormatter = function () {
      return this.name;
    };

    const itemStyle = new LegendItemStyle();
    itemStyle.fontSize = '12px';

    legend.itemStyle = itemStyle;

    return legend;
  }

  private getColumnPlotOptions() {

    const column: ColumnProperties = new ColumnProperties();
    column.pointPadding = 0;
    column.groupPadding = 0;
    column.minPointLength = 0;
    column.tooltip = this.getTooltipPlotOptions();
    column.pointWidth = 40;
    column.dataLabels = this.getDataLabelsColumnPlotOptions();
    column.stacking = null;
    return column;
  }


  private getDataLabelsColumnPlotOptions() {

    const dataLabels: DataLabels = new DataLabels();
    dataLabels.enabled = true;
    dataLabels.y = 50;
    dataLabels.x = 0;
    dataLabels.fontSize = '18px';
    dataLabels.align = 'center';
    dataLabels.color = 'white';

    const style: Style = new Style();
    style.textShadow = 'none';
    style.fontSize = '14px';
    style.fontWeight = 'light';
    dataLabels.style = style;
    dataLabels.formatter = function () {
      return this.y;
    };
    return dataLabels;
  }

  private getScatterPlotOptions() {

    const scatter: ScatterProperties = new ScatterProperties();
    scatter.tooltip = this.getTooltipPlotOptions();
    scatter.dataLabels = this.getDataLabelsScatterPlotOptions();

    const marker: Marker = new Marker();
    marker.radius = 8;
    marker.fillColor = 'green';
    marker.symbol = 'diamond';
    scatter.marker = marker;
    return scatter;
  }

  private getDataLabelsScatterPlotOptions() {

    const dataLabels: DataLabels = new DataLabels();
    dataLabels.enabled = false;
    dataLabels.y = 12;
    dataLabels.x = 17;
    dataLabels.fontSize = '18px';

    dataLabels.color = 'white';

    const style: Style = new Style();
    style.textShadow = 'none';
    style.fontSize = '14px';
    style.fontWeight = 'light';
    dataLabels.style = style;
    dataLabels.formatter = function () {
      return this.y;
    };
    return dataLabels;
  }

}