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


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

  war: War = {players: []};

  fractionRadioSelect: string;

  playerChart: any[] = [];

  cellHeight = 40;

  rows = [];

  reorderable: boolean = false;

  customClasses = {
    sortAscending: 'glyphicon glyphicon-triangle-top',
    sortDescending: 'glyphicon glyphicon-triangle-bottom',
  };

  constructor(private route: ActivatedRoute,
              private router: Router,
              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.rows = war.players;
        this.playerChart = [
          {
            "name": "CSAT",
            "value": war.playersOpfor
          },
          {
            "name": "NATO",
            "value": war.playersBlufor
          }
        ];
      });
  }

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

  selectPlayerDetail(player) {
    if (player && player.selected && player.selected.length > 0) {
      this.router.navigate(['../../campaign-player/' + this.war.campaign + '/' + player.selected[0].name],
        {relativeTo: this.route});
    }
  }

}