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";
import {Observable} from "rxjs/Observable";
import {Player} from "../../models/model-interfaces";


@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: Player = {};

  playersStored = {};

  cellHeight = 40;

  numberColWidth = 60;

  nameColWidth = 210;

  valueColWidth = 110;

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

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

    const searchTermStream = this.searchTerm.valueChanges.debounceTime(400);

    Observable.merge(searchTermStream)
              .distinctUntilChanged().map(query => this.filterPlayers())
              .subscribe();
  }

  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'),
        vehicle: this.filterPlayerAttribute('vehicle'),
        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().split('&');

    return this.playersStored[attribute].filter(player => {
      for (let i = 0; i < query.length; i++) {
        if (query[i].trim() != '' && player.name.toLowerCase().includes(query[i].trim())) {
          return true;
        }
      }
      return false;
    })
  }

}