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

import * as moment from 'moment';

import {
  Component,
  Inject, Input, Output, EventEmitter,
  OnChanges
} from '@angular/core';

import { Account } from '../accounts/account';
import { DailyBalance } from './dailyBalance';
import { DailyBalanceService } from '../accounts/dailyBalance.service';

class DateRange {
  minDate: Date;
  maxDate: Date;
}

@Component({
  selector: 'balance-chart',
  template:  `
<jqxChart #balanceChart
  [width]="'100%'"
  [height]="'100%'"
  [title]="'Balance evolution'"
  [description]="''"
  [source]="data"
  [xAxis]="xAxis"
  [seriesGroups]="seriesGroups"
  (onRangeSelectionChanged)="select($event)">
</jqxChart>
`
})
export class BalanceChartComponent implements OnChanges {
  @Input() account: Account;
  @Output() onUpdate: EventEmitter<DateRange> = new EventEmitter<DateRange>();

  public data;

  public xAxis: any = {
    dataField: 'operation_date',
    type: 'date',
    baseUnit: 'day',
    //unitInterval: 10,

    rangeSelector: {
      size: 80,
      padding: { /*left: 0, right: 0,*/top: 0, bottom: 0 },
      backgroundColor: 'white',
      dataField: 'balance',
      baseUnit: 'month',
      gridLines: { visible: false },
      serieType: 'line',
      //labels: {
      //  formatFunction: (value: any): any => {
      //    return this.months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
      //  }
      //}
    }
  };

  public seriesGroups: any = [{
    type: 'stackedcolumn',
    series: [{
      dataField: 'expenses',
      fillColor: 'red'
    }, {
      dataField: 'revenues',
      fillColor: 'green'
    }]
  }, {
    type: 'line',
    series: [{
      dataField: 'balance',
      fillColor: 'blue'
    }],
    bands: [{
      minValue: 0, maxValue: 0, fillColor: 'orange', lineWidth: 1
    }, {
      minValue: 0, maxValue: 0, fillColor: 'red', lineWidth: 1
    }]
  }];

  constructor(
    private dailyBalanceService: DailyBalanceService,
  ) {
    this.data = [];
  }

  loadData(account: Account) {
    this.dailyBalanceService.query(
      account.id
    ).subscribe((results) => {
      this.data = results;

      this.onUpdate.emit({
        minDate: moment(results[0].operation_date).toDate(),
        maxDate: moment(results[results.length - 1].operation_date).toDate()
      });
    });
  }

  setLines(account: Account) {
    if (account) {
      this.seriesGroups[1].bands[1].minValue = account.authorized_overdraft;
      this.seriesGroups[1].bands[1].maxValue = account.authorized_overdraft;
    }
  }

  ngOnChanges(changes) {
    if('account' in changes && changes.account.currentValue) {
      this.loadData(changes.account.currentValue);
      this.setLines(changes.account.currentValue);
    } else {
      this.setLines(this.account);
    }
  }

  select(event: any) {
    let args = event.args;
    this.onUpdate.emit({minDate: args.minValue, maxDate: args.maxValue});
  }
}