import {Component, ElementRef, SimpleChanges, ViewChild} from "@angular/core";
import {ActivatedRoute, Router} from "@angular/router";
import {War} from "../../models/model-interfaces";
import {Fraction} from "../../utils/fraction.enum";


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

  readonly fraction = Fraction;

  @ViewChild('overview') private overviewContainer: ElementRef;

  war: War;

  fractionFilterSelected: string;

  cellHeight = 40;

  rows = [];

  reorderable: boolean = false;

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

  constructor(private route: ActivatedRoute,
              private router: Router) {
  }

  ngOnInit() {
  }

  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});
    }
  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes.war) {
      this.rows = changes.war.currentValue.players;
    }
    if (changes.fractionFilterSelected) {
      this.filterPlayersByFraction(this.fractionFilterSelected)
    }
    this.scrollOverviewTop();
  }

  scrollOverviewTop() {
    try {
      this.overviewContainer.nativeElement.scrollTop = 0;
    } catch (err) {
    }
  }

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

}