import {Component} from "@angular/core";
import {ActivatedRoute} from "@angular/router";
import {WarService} from "../../services/logs/war.service";
import {War} from "../../models/model-interfaces";
import {ChartUtils} from "../../utils/chart-utils";
import {Fraction} from "../../utils/fraction.enum";


@Component({
  selector: 'war-detail-header',
  templateUrl: './war-detail-header.component.html',
  styleUrls: ['./war-detail-header.component.css', '../../style/list-entry.css', '../../style/hide-scrollbar.css']
})
export class WarDetailHeaderComponent {

  readonly fraction = Fraction;

  war: War;

  fractionFilterSelected: string;

  playerChart: any[] = [];

  colorScheme = {
    domain: [Fraction.COLOR_OPFOR, Fraction.COLOR_BLUFOR]
  };

  constructor(private route: ActivatedRoute,
              private warService: WarService) {
  }

  ngOnInit() {
    this.route.params
      .map(params => params['id'])
      .filter(id => id != undefined)
      .flatMap(id => this.warService.getWar(id))
      .subscribe(war => {
        this.war = war;
        this.fractionFilterSelected = undefined;
        this.playerChart = ChartUtils.getSingleDataArray(Fraction.OPFOR, war.playersOpfor, Fraction.BLUFOR, war.playersBlufor);
        Object.assign(this, [this.playerChart]);
      })
  }

  filterPlayersByFraction(fraction?: string) {
    this.fractionFilterSelected = fraction;
  }

}