import { Component, OnInit } from "@angular/core";
import { Router } from "@angular/router";
import { PlayersService } from "../../services/players.service";
import { TranslateService } from "@ngx-translate/core";
import { UtilsService } from "../../services/utils.service";

@Component({
  selector: "app-player",
  templateUrl: "./player.page.html",
  styleUrls: ["./player.page.scss"],
})
export class PlayerPage implements OnInit {

  comms: "1";
  playersFilteredByCategory: any;
  time;

  constructor(private router: Router,
    public playersService: PlayersService,
    public translateService: TranslateService,
    public utilsService: UtilsService) { }

  ngOnInit() {
    this.time = new Date().getTime();
    this.utilsService.presentLoading(this.translateService.instant("all.loading"));
    this.playersService.getAllCategories().then(
      (resp) => {
        if (resp["status"] == "success") {
          this.playersService.getAllPositions().then(
            (resp1) => {
              if (resp1["status"] == "success") {
                this.playersService.getAllPlayers().then(
                  (resp2) => {
                    if (resp2["status"] == "success") {
                      this.changedCategory();
                    }
                    this.utilsService.dismissLoading();
                  },
                  (error) => {
                    console.log("error getAllPlayers", error);
                    this.utilsService.dismissLoading().catch();
                  }
                );
              } else {
                this.utilsService.dismissLoading();
              }
            },
            (error) => {
              console.log("error getAllPositions", error);
              this.utilsService.dismissLoading().catch();
            }
          );
        } else {
          this.utilsService.dismissLoading();
        }
      },
      (error) => {
        console.log("error getAllCategories", error);
        this.utilsService.dismissLoading().catch();
      }
    );
  }

  changedCategory(e?) {
    this.comms = "1";
    if (e) {
      this.comms = e.detail.value;
    }

    this.playersFilteredByCategory = [];
    const players = this.playersService.allPlayers;
    for (let i = 0; i < players.length; i++) {
      const p = players[i];
      if (p.inactive === 0) {
        if (p.equipment_categories_id === Number(this.comms)) {
          this.playersFilteredByCategory.push(p);
        }
      }
    }

    this.playersService.currentPositions = [];
    const positions = this.playersService.allPositions;
    for (let j = 0; j < positions.length; j++) {
      const pos = positions[j];
      pos.players = [];
      let validatPosition = false;
      for (let k = 0; k < this.playersFilteredByCategory.length; k++) {
        const playerByCategory = this.playersFilteredByCategory[k];
        if (pos.id === playerByCategory.position_id) {
          validatPosition = true;
          pos.players.push(playerByCategory);
        }
      }
      pos.scroll = 0;
      if (validatPosition) {
        this.playersService.currentPositions.push(pos);
      }
    }
    this.playersService.currentPositions.reverse();
  }

  goToDetailPlayer(player) {
    this.playersService.playerSelected = player;
    this.router.navigate(["/player-detail"]);
  }

  leftScroll(event, position?) {
    const left = event.target.parentElement.parentElement.parentElement.parentElement.children[1].children[0].children[0];
    left.scrollBy(-200, 0);
    position.scroll += -200;
    if (left.scrollWidth > position.scroll)
      position.disabledScrollRight = false;
  }

  rightScroll(event, position?) {
    const right = event.target.parentElement.parentElement.parentElement.parentElement.children[1].children[0].children[0];
    right.scrollBy(200, 0);
    position.scroll += 200;
    if (right.scrollWidth != 32 && (right.scrollWidth - 32) < position.scroll)
      position.disabledScrollRight = true;
    else
      position.disabledScrollRight = false;
  }

}