import {Component} from "@angular/core";
import {ActivatedRoute} from "@angular/router";
import {PlayerService} from "../../services/logs/player.service";
import {CampaignService} from "../../services/logs/campaign.service";
import {Fraction} from "../../utils/fraction.enum";
import {FormControl} from "@angular/forms";


@Component({
  selector: 'stats-highscore',
  templateUrl: './highscore.component.html',
  styleUrls: ['./highscore.component.css', '../../style/list-entry.css', '../../style/overview.css'],
  inputs: ['campaigns']
})
export class StatisticHighScoreComponent {

  id = '';

  title = '';

  searchTerm = new FormControl();

  players = {};

  playersStored = {};

  cellHeight = 40;

  numberColWidth = 60;

  nameColWidth = 210;

  valueColWidth = 110;

  emptyMessage = {emptyMessage: 'Keine Einträge'};

  reorderable = false;

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

  readonly fraction = Fraction;

  constructor(private route: ActivatedRoute,
              private playerService: PlayerService,
              private campaignService: CampaignService) {
  }

  ngOnInit() {
    this.route.params
      .map(params => params['id'])
      .subscribe((id) => {
        this.id = id;
        if (this.campaignService.campaigns) {
          this.initData();
        } else {
          this.campaignService.getAllCampaigns().subscribe(campaigns => {
            this.initData()
          })
        }
      });
  }

  initData() {
    this.title = this.campaignService.campaigns
      .filter(camp => camp._id === this.id).pop().title;

    this.playerService.getCampaignHighscore(this.id).subscribe(players => {
      this.players = players;
      this.playersStored = players;
    })
  }

  filterPlayers() {
    if (!this.searchTerm.value || this.searchTerm.value === '') {
      this.players = this.playersStored;
    } else {
      this.players = {
        kill: this.filterPlayerAttribute('kill'),
        friendlyFire: this.filterPlayerAttribute('friendlyFire'),
        death: this.filterPlayerAttribute('death'),
        respawn: this.filterPlayerAttribute('respawn'),
        revive: this.filterPlayerAttribute('revive'),
        flagTouch: this.filterPlayerAttribute('flagTouch')
      }
    }
  }

  private filterPlayerAttribute(attribute) {
    const query = this.searchTerm.value.toLowerCase();
    return this.playersStored[attribute].filter(p => p.name.toLowerCase().includes(query))
  }

}