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

@Component({
    selector: 'app-station-view-detailed',
    templateUrl: './station-view-detailed.component.html',
    styleUrl: './station-view-detailed.component.css',
    standalone: false
})
export class StationViewDetailedComponent implements OnInit {
  coordXStr: string;
  coordYStr: string;
  detailedCoordsX: string[];
  detailedCoordsY: string[];
  planeURL: string;
  selectedXIndicator: string;
  familiesSelected: StationLevelsPlaneFamilies[];

  constructor(
    @Inject(MAT_DIALOG_DATA) private _data: any,
    @Inject(DOCUMENT) private _document: Document,
    private _dialog: MatDialog,
    private _dialogRef: MatDialogRef<StationViewDetailedComponent>,
  ) {
    this.coordXStr = '';
    this.coordYStr = '';
    this.detailedCoordsX = [];
    this.detailedCoordsY = [];
    this.planeURL = '';
    this.selectedXIndicator = '';
    this.familiesSelected = [];
  }

  ngOnInit(): void {
    this.familiesSelected = this._data.families;
    this.coordXStr = this._data.coordXStr;
    this.coordYStr = this._data.coordYStr;

    for(let i = 0; i < 10; i++){
      this.detailedCoordsX.push(i.toString());
      this.detailedCoordsY.push(i.toString());
    }

    this.detailedCoordsY.reverse();
    this.planeURL = this._data.planeURL;

    this.initDetailedCoords();
  }

  initDetailedCoords(){
    setTimeout(() => {
      let originalPlaneContainer = this._document.getElementById('original-plane-container')!;
      if(originalPlaneContainer == undefined){
        this.initDetailedCoords();
      }
      
      let detailedPlaneHeight = 320 * this._data.coordYTotal;
      let detailedPlaneWidth = 320 * this._data.coordXTotal;

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

      let leftSvg = 320 * this._data.coordX;
      let topSvg = 320 * this._data.coordY;

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

  selectXIndicator(coordX: string){
    if(this.selectedXIndicator == ''){
      this.selectedXIndicator = coordX;
    }else{
      this.selectedXIndicator = '';
    }
  }

  selectPlaneLocation(coordX: number, coordY: number){
    let dialogRef = this._dialog.open(StationVewPositionComponent, {
      width: '240px',
      minWidth: '240px',
      disableClose: true,
      data: {
        coordX: this._data.coordX,
        coordY: this._data.coordY,
        coordXStr: this._data.coordXStr,
        coordYStr: this._data.coordYStr,
        planeURL: this._data.planeURL,
        coordXTotal: this._data.coordXTotal,
        coordYTotal: this._data.coordYTotal,
        detailedCoordX: coordX,
        detailedCoordY: coordY,
        detailedCoordXStr: this.detailedCoordsX[coordX],
        detailedCoordYStr: this.detailedCoordsY[coordY],
        familiesSelected: this.familiesSelected,
      }
    });

    dialogRef.afterClosed().subscribe(res => {
      if(res != null && res != undefined && res != ''){
        if(res != 'MT'){
          let finalCoords = `${this._data.coordYStr}${this._data.coordXStr}${this.detailedCoordsY[coordY]}${this.detailedCoordsX[coordX]}${res}`;
          this._dialogRef.close(finalCoords);
        }else{
          //PENDIENTE
        }
      }
    });
  }

  detailedCoordBackground(coordY: string, coordX: string): string{
    let detailedCoords = `${this.coordYStr}${this.coordXStr}${coordY}${coordX}`;
    let familiesSelected = this.familiesSelected.filter(item => (item.originCoords != null && item.originCoords.substring(0, 5) == detailedCoords) || (item.destinyCoords != null && item.destinyCoords.substring(0, 5) == detailedCoords));
    
    if(familiesSelected.length == 1){
      return familiesSelected[0].color;
    }else if(familiesSelected.length > 1){
      return "#E8559A";
    }
    
    return 'transparent';
  }

  detailedCoordTooltip(coordY: string, coordX: string): string{
    let detailedCoords = `${this.coordYStr}${this.coordXStr}${coordY}${coordX}`;
    let familiesSelected = this.familiesSelected.filter(item => (item.originCoords != null && item.originCoords.substring(0, 5) == detailedCoords) || (item.destinyCoords != null && item.destinyCoords.substring(0, 5) == detailedCoords));
    
    if(familiesSelected.length == 1){
      return familiesSelected[0].name;
    }else if(familiesSelected.length > 1){
      return `${familiesSelected.length} familias`;
    }
    
    return '';
  }
}
