import {Component, OnChanges, AfterViewInit, ElementRef} from 'angular2/core';
import 'chartjs';

var inputs = ['data', 'options', 'height', 'width'];
var chartTemplate = '<canvas [style.height.px]="height" [style.width.px]="width"></canvas>';

class Charts {
  private   cvs     : any;
  private   ctx     : any;
  private   chart   : any;
  protected data    : any;
  protected options : any;

  updateBars()    : void {}
  updatePoints()  : void {}
  updateSegments(): void {}

  constructor(private el: ElementRef) {}

  private _setCtx(): void {
    this.cvs = this.el.nativeElement;
    this.ctx = this.cvs.firstChild.getContext("2d");
  }

  protected getCtx(): any {
    return this.ctx;
  }

  protected setChart(chart: any): void {
    this.chart = chart;
  }

  public getChart(): any {
    return this.chart;
  }

  private getChartType() {
    return this.cvs.tagName.split('-')[0].toLowerCase();
  }

  ngOnChanges() {
    if (this.chart)
      this.updateChart();
  }

  protected ngAfterViewInit() {
    this._setCtx();
  }

  private updateDataset(): void {
    var chart = this.getChart();
    chart.datasets.forEach((data, index, datasets) => {
      var newData = this.data.datasets[index];
      for (let prop in data) {
        if (prop == 'points' || prop == 'bars') continue;
        data[prop] = newData[prop];
      }
    });
  }

  private updateChart(): void {
    switch (this.getChartType()) {
      case 'line':
      case 'radar':
        this.updatePoints();
      case 'bar':
        this.updateBars();
      case 'pie':
      case 'polar':
      case 'doughnut':
        this.updateSegments();
        break;
      default:
        this.updateDataset();
    }
    this.chart.update();
  }
}

class BarsCharts extends Charts {
  updateBars(): void {
    var chart = this.getChart();
    chart.datasets.forEach((data, index) => {
      var newData = this.data.datasets[index];
      data.bars.forEach((value, bar) => {
        value.value           = newData.data[bar];
        value.fillColor       = newData.fillColor;
        value.strokeColor     = newData.strokeColor;
        value.datasetLabel    = newData.label;
        value.hightlightFill  = newData.hightlightFill;
        value.highlightStroke = newData.hightlightFill;
      });
    });
  }
}
class PointsCharts extends Charts {
  updatePoints(): void {
    var chart = this.getChart();
    chart.datasets.forEach((data, index) => {
      var newData = this.data.datasets[index];
      data.points.forEach((value, point) => {
        value.value           = newData.data[point];
        value.fillColor       = newData.fillColor;
        value.strokeColor     = newData.pointStrokeColor;
        value.datasetLabel    = newData.label;
        value.hightlightFill  = newData.pointHighlightFill;
        value.highlightStroke = newData.pointHighlightStroke;
      });
    });
  }
}
class SegementsCharts extends Charts {
  updateSegments(): void {
    var chart = this.getChart();
    chart.segments.forEach((data, index) => {
      var newData         = this.data[index];
      data.value          = newData.value;
      data.label          = newData.label;
      data.fillColor      = newData.color;
      data.highlightColor = newData.highlight;
    });
  }
}

@Component({
  selector: 'line-chart',
  template: chartTemplate,
  inputs: inputs
})
export class LINE_CHART extends PointsCharts {
  constructor(el: ElementRef) { super(el) }

  ngAfterViewInit() {
    super.ngAfterViewInit();
    this.setChart(new Chart(this.getCtx()).Line(this.data, this.options));
  }
}

@Component({
  selector: 'bar-chart',
  template: chartTemplate,
  inputs: inputs
})
export class BAR_CHART extends BarsCharts {
  constructor(el: ElementRef) { super(el) }

  ngAfterViewInit() {
    super.ngAfterViewInit();
    this.setChart(new Chart(this.getCtx()).Bar(this.data, this.options));
  }
}

@Component({
  selector: 'radar-chart',
  template: chartTemplate,
  inputs: inputs
})
export class RADAR_CHART extends PointsCharts {
  constructor(el: ElementRef) { super(el) }

  ngAfterViewInit() {
    super.ngAfterViewInit();
    this.setChart(new Chart(this.getCtx()).Radar(this.data, this.options));
  }
}

@Component({
  selector: 'polar-chart',
  template: chartTemplate,
  inputs: inputs
})
export class POLAR_CHART extends SegementsCharts {
  constructor(el: ElementRef) { super(el) }

  ngAfterViewInit() {
    super.ngAfterViewInit();
    this.setChart(new Chart(this.getCtx()).PolarArea(this.data, this.options));
  }
}

@Component({
  selector: 'pie-chart',
  template: chartTemplate,
  inputs: inputs
})
export class PIE_CHART extends SegementsCharts {
  constructor(el: ElementRef) { super(el) }

  ngAfterViewInit() {
    super.ngAfterViewInit();
    this.setChart(new Chart(this.getCtx()).Pie(this.data, this.options));
  }
}

@Component({
  selector: 'doughnut-chart',
  template: chartTemplate,
  inputs: inputs
})
export class DOUGHNUT_CHART extends SegementsCharts {
  constructor(el: ElementRef) { super(el) }

  ngAfterViewInit() {
    super.ngAfterViewInit();
    this.setChart(new Chart(this.getCtx()).Doughnut(this.data, this.options));
  }
}