import {Component} from "@angular/core";
import {Army, War} from "../models/model-interfaces";
import {ArmyService} from "../services/army-service/army.service";
import {ActivatedRoute, Router} from "@angular/router";
import {WarService} from "../services/war-service/war.service";


@Component({
  selector: 'army',
  templateUrl: './army.component.html',
  styleUrls: ['./army.component.css']
})
export class ArmyComponent {

  army: Army = {NATO: {squads: [], memberCount: 0}, CSAT: {squads: [], memberCount: 0}};

  chartData: any[] = [];

  view: any[] = [700, 400];

  // options
  showXAxis = true;
  showYAxis = true;
  timeline=true;
  gradient = false;
  showLegend = true;
  legendTitle = "";
  showXAxisLabel = true;
  xAxisLabel = 'Schlachtdatum';
  showYAxisLabel = true;
  yAxisLabel = 'Punkte';

  colorScheme = {
    domain: ['#0000FF', '#B22222', '#C7B42C', '#AAAAAA']
  };

  // line, area
  autoScale = false;

  constructor(private router: Router,
              private route: ActivatedRoute,
              private armyService: ArmyService,
              private warService: WarService) {
    Object.assign(this, this.chartData)
  }

  ngOnInit() {
    this.armyService.getArmy()
      .subscribe(army => {
        this.army = army;
      });
    this.warService.getAllWars()
      .subscribe((wars) => {
      let updateObj = [{
          "name": "NATO",
          "series": []
        },
        {
          "name": "CSAT",
          "series": []
        }];
        for (let i = 0; i < wars.length; i++) {
          let warDateString = wars[i].date;
          let bluforData = {
            name: warDateString,
            value: wars[i].ptBlufor
          };
          updateObj[0].series.push(bluforData);
          let opforData = {
            name: warDateString,
            value: wars[i].ptOpfor
          };
          updateObj[1].series.push(opforData);
        }
        this.chartData = updateObj;
    })
  };

  select(memberId) {
    this.router.navigate(['member', memberId], {relativeTo: this.route});
  }

  onSelect(event) {
    console.log(event);
  }

}