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


@Component({
  selector: 'war-detail',
  templateUrl: './war-detail.component.html',
  styleUrls: ['./war-detail.component.css']
})
export class WarDetailComponent {

  war: War = {players: []};

  players: Player[] = [];

  fractionRadioSelect: string;

  sortBy = "kill";

  sortOrder = "desc";

  playerChart: any[] = [];

  constructor(private route: ActivatedRoute,
              private warService: WarService) {
    Object.assign(this, this.playerChart)
  }

  ngOnInit() {
    this.route.params
      .map(params => params['id'])
      .filter(id => id != undefined)
      .flatMap(id => this.warService.getWar(id))
      .subscribe(war => {
        this.war = war;
        this.players = war.players;
        this.playerChart = [
          {
            "name": "CSAT",
            "value": war.playersOpfor
          },
          {
            "name": "NATO",
            "value": war.playersBlufor
          }
        ];
      });
  }

  filterPlayersByFraction(fraction: string) {
    if (fraction) {
      this.players = this.war.players.filter((player) => {
        return player.fraction === fraction;
      })
    } else {
      this.players = this.war.players;
    }
  }

}