import {Component, OnInit} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {PlayerService} from '../../../services/logs/player.service';
import {FormControl} from '@angular/forms';
import {Observable} from 'rxjs/Observable';
import {Player} from '../../../models/model-interfaces';
import {PlayerUtils} from '../../../utils/player-utils';
import {FractionHelpers} from '../../../utils/global.helpers';


@Component({
  selector: 'cc-stats-highscore',
  templateUrl: './highscore.component.html',
  styleUrls: ['./highscore.component.scss']
})
export class StatisticHighScoreComponent implements OnInit {

  id = '';

  searchTerm = new FormControl();

  players: Player = {};

  playersStored = {};

  playerAttributeDisplayNames = PlayerUtils.attributeDisplayNames.slice(2, PlayerUtils.attributeDisplayNames.length);

  readonly fractionHelpers = FractionHelpers;

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

  ngOnInit() {
    this.playerAttributeDisplayNames.push({prop: 'warCount', head: 'stats.scoreboard.header.war.count'});

    this.route.params
        .map(params => params['id'])
        .subscribe((id) => {
          this.id = id;
          this.initData();
        });

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

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

  initData() {
    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 = {};
      for (let i = 0; i < this.playerAttributeDisplayNames.length; i++) {
        const attributeProperty = this.playerAttributeDisplayNames[i].prop;
        this.players[attributeProperty] = this.filterPlayerAttribute(attributeProperty);
      }
    }
  }

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