import {AfterViewInit, Component, Input} from "@angular/core";
import {Server} from "../../entities/servers/Server";
import * as L from 'leaflet';
import {LatLng, LatLngBoundsLiteral, Layer, Marker} from "leaflet";
import {HttpClient} from "@angular/common/http";
import {Player} from "../../entities/servers/Player";
import {of} from "rxjs";
import {Tf2dataService} from "../../services/tf2data.service";
import {MatExpansionPanel} from "@angular/material/expansion";

interface MapOverlayConfig {
  x: number;
  y: number;
  hu: number;
}

@Component({
  selector: "app-live-time-server-map",
  template: `
    <div class="container responsive-grid-250">
      <mat-form-field appearance="fill">
        <mat-label>Команда</mat-label>
        <mat-select [(ngModel)]="teams_select">
          <mat-option *ngFor="let team of teams" [value]="team.id">
            {{team.name}}
          </mat-option>
        </mat-select>
      </mat-form-field>

      <mat-form-field appearance="fill">
        <mat-label>Класс</mat-label>
        <mat-select [(ngModel)]="classes_select">
          <mat-option *ngFor="let clz of classes" [value]="clz.id">
            {{clz.name}}
          </mat-option>
        </mat-select>
      </mat-form-field>

      <mat-form-field appearance="fill">
        <mat-label>Игрок</mat-label>
        <mat-select [(ngModel)]="player_select" multiple>
          <mat-option *ngFor="let m of markers | keyvalue" [value]="m.key">
            {{m.value.player.name}}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </div>
    <div [id]="server.name+'_map'" style="height: 500px;width: 100%;">
      <div *ngIf="allow_processing"><p hidden *ngFor="let player of server.players">{{updatePlayerPos(player)}}</p></div>
    </div>
  `,
  styleUrls: ["servers-page.component.scss"]
})
export class LivetimeServerMap implements AfterViewInit {
  @Input("server")
  server!: Server;
  map!: L.Map;
  canShow: boolean = false;
  markers: {[player_id: string]: {
    marker: L.Marker,
      player: Player,
      hidden_via_team: boolean,
      hidden_via_class: boolean,
      hidden_via_player: boolean
  }} = {};
  config: MapOverlayConfig = {
    x: 0, y: 0, hu:0
  }

  teams:{id:number, name:string}[] = [];
  teams_select: number = 0;
  classes:{id:number, name:string}[] = []
  classes_select: number = 0;
  player_select: string[] = [];
  allow_processing: boolean = false;

  constructor(private http: HttpClient,
              private tf2service: Tf2dataService) {
    this.classes = tf2service.TFClassType.map(clz => {
      return {id: tf2service.TFClassType.indexOf(clz), name: clz}
    })
    this.teams = tf2service.TFTeam.map(t => {
      return {id: tf2service.TFTeam.indexOf(t), name: t}
    })
  }

  ngAfterViewInit(): void {
  }

  prepareMap(serverMap: MatExpansionPanel) {
    this.allow_processing = serverMap.hideToggle;
    if (this.canShow) return;

    this.http.head(this.generateUrl()).subscribe(
      () => {
        console.log(`Map overlay ${this.server?.map} found!`)
        this.http.get(this.generateUrl('cfg')).subscribe(
          (config) => {
            console.log(`Config to map ${this.server?.map} found!`)
            this.canShow = true;
            this.createMap(config, [[0,0],[2160,3840]]);
          }
        )
      }
    )
  }

  private createMap(config: MapOverlayConfig|any, bounds: LatLngBoundsLiteral) {
    this.config = config;
    this.map = L.map(this.server.name+'_map', {crs: L.CRS.Simple, minZoom:-2, zoom: 0, center: [config.y,config.x]});
    L.imageOverlay(this.generateUrl(), bounds).addTo(this.map)
    of(this.server).subscribe(
      (server) => {console.log("ii")}
    )
    //L.marker(this.getRektPos(player)).addTo(this.map)
  }

  private generateUrl(ext: string = "jpg") {
    // @ts-ignore
    let map = this.server.map.split("workshop/").pop().split(".ugc").shift()
    return `https://tf2.pblr-nyk.pro/site_content/images/maps/${map}.${ext}`
  }

  private getRektPos(player: Player) {
    const x = this.config.x + (player.pos[0] / this.config.hu);
    const y = this.config.y + (player.pos[1] / this.config.hu);
    return new LatLng(y, x);
  }

  //это пиздец какой кастыль А ВОТ А ВЬЮЮЮЮЮ А ТАМ....
  updatePlayerPos(player:Player) {
    if (!this.map) return;
    if (!this.allow_processing) return;

    const ids = Object.keys(this.markers);
    const id: string = `${player.id}`;

    if (ids.indexOf(id) != -1) {
      this.markers[id].marker.setLatLng(this.getRektPos(player));
      this.markers[id].marker.setIcon(this.getPlayerEmblem(player))

      this.markers[id].player = player;
    } else {
      this.markers[id] = {
        marker: L.marker(this.getRektPos(player)),
        player: player,
        hidden_via_team: false,
        hidden_via_class: false,
        hidden_via_player: false
      };
      this.markers[id].marker.addTo(this.map);
      this.markers[id].marker.setIcon(this.getPlayerEmblem(player));
    }

    //проверяем фильтр выбора команды
    switch (this.teams_select) {
      case 0: {
        if (this.markers[id].hidden_via_team && !this.markers[id].hidden_via_class && !this.markers[id].hidden_via_player) {
          this.markers[id].marker.addTo(this.map);
          this.markers[id].hidden_via_team = false;
        }
        break;
      }
      default: {
        if (this.markers[id].player.team == this.teams_select && this.markers[id].hidden_via_team && !this.markers[id].hidden_via_class && !this.markers[id].hidden_via_player) {
          this.markers[id].marker.addTo(this.map);
          this.markers[id].hidden_via_team = false;
        }

        if (this.markers[id].player.team != this.teams_select && !this.markers[id].hidden_via_team && !this.markers[id].hidden_via_class && !this.markers[id].hidden_via_player) {
          this.markers[id].marker.remove();
          this.markers[id].hidden_via_team = true;
        }
        break;
      }
    }

    //проверяем фильтр класса
    switch (this.classes_select) {
      case 0: {
        if (this.markers[id].hidden_via_class && !this.markers[id].hidden_via_team && !this.markers[id].hidden_via_player) {
          this.markers[id].marker.addTo(this.map);
          this.markers[id].hidden_via_class = false;
        }
        break;
      }
      default: {
        if (this.markers[id].player.clz == this.classes_select && this.markers[id].hidden_via_class && !this.markers[id].hidden_via_team && !this.markers[id].hidden_via_player) {
          this.markers[id].marker.addTo(this.map);
          this.markers[id].hidden_via_class = false;
        }

        if (this.markers[id].player.clz != this.classes_select && !this.markers[id].hidden_via_class && !this.markers[id].hidden_via_team && !this.markers[id].hidden_via_player) {
          this.markers[id].marker.remove();
          this.markers[id].hidden_via_class = true;
        }
        break;
      }
    }

    //проверяем челикса по имени
    switch (this.player_select.length) {
      case 0: {
        if (this.markers[id].hidden_via_player && !this.markers[id].hidden_via_class && !this.markers[id].hidden_via_team) {
          this.markers[id].marker.addTo(this.map);
          this.markers[id].hidden_via_player = false;
        }
        break;
      }
      default: {
        if (this.player_select.indexOf(id) != -1 && this.markers[id].hidden_via_player && !this.markers[id].hidden_via_class && !this.markers[id].hidden_via_team) {
          this.markers[id].marker.addTo(this.map);
          this.markers[id].hidden_via_player = false;
        }

        if (this.player_select.indexOf(id) == -1 && !this.markers[id].hidden_via_player && !this.markers[id].hidden_via_class && !this.markers[id].hidden_via_team) {
          this.markers[id].marker.remove();
          this.markers[id].hidden_via_player = true;
        }
        break;
      }
    }
  }

  private getPlayerEmblem(player: Player): L.Icon {
    const c = Player.getClassName(player.clz);
    const t = Player.getTeamName(player.team);
    if (c == null || t == null) {
      return new L.Icon({iconUrl: "assets/images/emblems/unknown/Unk_emblem_UNK.png", className: 'pm_icon'});
    }
    return new L.Icon({iconUrl: `assets/images/emblems/${t.toLowerCase()}/${c}_emblem_${t}.png`, className: 'pm_icon'});
  }
}