// vim: set tw=80 ts=2 sw=2 sts=2 :

import { Component, ViewChild, OnInit } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';

import { Logger } from '@nsalaun/ng-logger';
import { jqxChartComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxchart';

import * as _ from 'underscore';

import { Category } from './category';
import { CategoryService } from './category.service';


@Component({
  selector: 'category-chart',
  template: `
<jqxChart #categoryChart
  [width]="'100%'"
  [height]="400"
  [title]="'Categories'"
  [description]="''"
  [showLegend]="false"
  [seriesGroups]="seriesGroups">
</jqxChart>
`
})
export class CategoryChartComponent implements OnInit {
  @ViewChild('categoryChart') chart: jqxChartComponent;

  public seriesGroups: any = [{
    type: 'donut',
    source: [],
    //showLabels: true,
    series: [{
      dataField: 'value',
      displayText: 'category',
      initialAngle: 90,
      radius: 130,
      innerRadius: 90,
      formatSettings: { sufix: '€', decimalPlaces: 2 },
      radiusDataField: 'category',
      colorFunction: (value, itemIndex, series, group) => {
        if(group.source[itemIndex].type === 'expenses') {
          return 'tomato';
        }

        return 'yellowgreen';
      },
      opacity: 0.5
    }]
  }, {
    type: 'donut',
    source: [],
    showLabels: true,
    series: [{
      dataField: 'value',
      displayText: 'name',
      initialAngle: 90,
      labelRadius: 50,
      radius: 85,
      innerRadius: 75,
      formatSettings: { sufix: '€', decimalPlaces: 2 },
      colorFunction: (value, itemIndex, series, group) => {
        if(group.source[itemIndex].name === 'Expenses') {
          return 'tomato';
        }

        return 'yellowgreen';
      }
    }]
  }];

  constructor(
    private activatedRoute: ActivatedRoute,
    private logger: Logger,
    private categoryService: CategoryService,
  ) {
    //this.data = [];
  }

  loadData() {
    let accountId = this.activatedRoute.snapshot.paramMap.get('accountId');
    let fromDay = this.activatedRoute.snapshot.queryParamMap.get('from');
    let toDay = this.activatedRoute.snapshot.queryParamMap.get('to');

    this.categoryService.query(
      +accountId,
      fromDay,
      toDay
    ).subscribe((results: Category[]) => {
      let expenses = _.filter(results, function(item: Category) {
        return item.expenses < 0;
      }).map(function(item: Category) {
        return {
          category: item.category,
          value: -item.expenses,
          type: 'expenses'
        };
      });

      expenses = _.sortBy(expenses, 'value').reverse();

      let revenues = _.filter(results, function(item: Category) {
        return item.revenues > 0;
      }).map(function(item: Category) {
        return {
          category: item.category,
          value: item.revenues,
          type: 'revenues'
        };
      });

      revenues = _.sortBy(revenues, 'value');

      this.seriesGroups[0].source = expenses.concat(revenues);

      let totals = [
        {name: 'Expenses', value: 0},
        {name: 'Revenues', value: 0}
      ];

      results.forEach(function(item: Category) {
        totals[0].value -= item.expenses;
        totals[1].value += item.revenues;
      });

      this.seriesGroups[1].source = totals;

      if(this.chart && this.chart.host) {
        this.chart.refresh();
      }
    });
  }

  ngOnInit() {
    this.activatedRoute.queryParamMap.subscribe(() => {this.loadData();});

    this.loadData();
  }
}