import { DOCUMENT } from '@angular/common';
import { Component, Inject, OnInit } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import { StationLevelsPlaneFamilies } from '../equipment-location.component';

export interface StationViewDetailedLocation{
  idCoord: string;
  nameCoord: string;
  left: boolean,
  top: boolean;
  right: boolean;
  bottom: boolean;
}
@Component({
    selector: 'app-station-vew-position',
    templateUrl: './station-vew-position.component.html',
    styleUrl: './station-vew-position.component.css',
    standalone: false
})
export class StationVewPositionComponent implements OnInit {
  coordXStr: string;
  coordYStr: string;
  planeURL: string;
  selectedCoordLocation: string;
  locationCoords: StationViewDetailedLocation[];
  familiesSelected: StationLevelsPlaneFamilies[];

  constructor(
    @Inject(MAT_DIALOG_DATA) private _data: any,
    @Inject(DOCUMENT) private _document: Document,
  ) {
    this.coordXStr = '';
    this.coordYStr = '';
    this.planeURL = '';
    this.selectedCoordLocation = '';
    this.familiesSelected = [];
    this.locationCoords = [
      { idCoord: 'SI', nameCoord: 'Superior izquierda', left: true, top: true, right: true, bottom: true },
      { idCoord: 'SM', nameCoord: 'Superior media', left: false, top: true, right: true, bottom: true },
      { idCoord: 'SD', nameCoord: 'Superior derecha', left: false, top: true, right: true, bottom: true },
      { idCoord: 'CI', nameCoord: 'Central izquierda', left: true, top: false, right: true, bottom: true },
      { idCoord: 'CM', nameCoord: 'Central media', left: false, top: false, right: true, bottom: true },
      { idCoord: 'CD', nameCoord: 'Central derecha', left: false, top: false, right: true, bottom: true },
      { idCoord: 'II', nameCoord: 'Inferior izquierda', left: true, top: false, right: true, bottom: true },
      { idCoord: 'IM', nameCoord: 'Inferior media', left: false, top: false, right: true, bottom: true },
      { idCoord: 'ID', nameCoord: 'Inferior derecha', left: false, top: false, right: true, bottom: true },
    ];
  }

  ngOnInit(): void {
    this.coordXStr = this._data.detailedCoordXStr;
    this.coordYStr = this._data.detailedCoordYStr;
    this.planeURL = this._data.planeURL;
    this.familiesSelected = this._data.familiesSelected
    
    this.initPlane();
  }

  initPlane(){
    setTimeout(() => {
      let originalPlaneContainer = this._document.getElementById('original-location-plane-container')!;
      if(originalPlaneContainer == undefined){
        this.initPlane();
      }
      
      let locationPlaneHeight = this._data.coordYTotal * 1920;
      let locationPlaneWidth = this._data.coordXTotal * 1920;

      let planeSvgContainer = this._document.getElementById('plane-location-svg-container')! as HTMLElement;
      planeSvgContainer.style.minWidth = `${locationPlaneWidth}px`;
      planeSvgContainer.style.width = `${locationPlaneWidth}px`;
      planeSvgContainer.style.minHeight = `${locationPlaneHeight}px`;
      planeSvgContainer.style.height = `${locationPlaneHeight}px`;

      let leftSvg = (this._data.coordX * 1920) + (this._data.detailedCoordX * 192);
      let topSvg = (this._data.coordY * 1920) + (this._data.detailedCoordY * 192);

      planeSvgContainer.style.left = `-${leftSvg}px`;
      planeSvgContainer.style.top = `-${topSvg}px`;
    }, 100);
  }

  selectCoordLocation(location: string){
    this.selectedCoordLocation = location;
  }

  locationCoordBackground(idCoord: string): string{
    let coord = `${this._data.coordYStr}${this._data.coordXStr}${this.coordYStr}${this.coordXStr}${idCoord}`;
    let familiesSelected = this.familiesSelected.filter(item => (item.originCoords != null && item.originCoords == coord) || (item.destinyCoords != null && item.destinyCoords == coord));
    if(familiesSelected.length == 1){
      return familiesSelected[0].color;
    }else if(familiesSelected.length > 1){
      return "#E8559A";
    }

    if(idCoord == this.selectedCoordLocation) return '#CCC';
    return 'rgba(99,99,99,1)';
  }

  locationCoordTooltip(idCoord: string): string{
    let coord = `${this._data.coordYStr}${this._data.coordXStr}${this.coordYStr}${this.coordXStr}${idCoord}`;
    let familiesSelected = this.familiesSelected.filter(item => (item.originCoords != null && item.originCoords == coord) || (item.destinyCoords != null && item.destinyCoords == coord));
    
    if(familiesSelected.length == 1){
      return familiesSelected[0].name;
    }else if(familiesSelected.length > 1){
      return `${familiesSelected.length} familias`;
    }

    return '';
  }
}
