import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
import { EnviarInfoService } from '../../../services/enviar-info.service';

interface Tab {
  id: string;
  name: string;
  active: boolean;
  rows: number;
  columns: number;
  grid: any[][];
}

@Component({
  selector: 'app-configuration-panel',
  templateUrl: './configuration-panel.component.html',
  styleUrls: ['./configuration-panel.component.css']
})
export class ConfigurationPanelComponent  implements OnInit {

  //ESTAS VARIABLES SON PARA SOBRE ESCRIBIR LOS VALORES QUE TRAEN LAS VARIABLES DEL SERVICE DE _enviarInfo
   color: string = '';
  textColor: string = '';
// Se declaran asi porque son varibales que se mantienen dentro de este componente es decir que van a mandarse al otro componente por ejemplo...
  @Input() formTitle = '';
  /*Cuando se cargue la info en el componente padre por defecto aparacera con 3 filas y 3 columas por estas variables, si necesitas mandar una config
  como por "defecto" lo mas optimo seria hacerlo desde aqui
  */
  @Input() rows = 3;
  @Input() columns = 3;
  @Input() showTooltip = '';
  @Input() tabs: Tab[] = [];
  @Input() currentTab: Tab | null = null;
/* ahora los Output son los valores que vas a recirbir del componente padre, si necesitas agregar un nuevo valor al form hazlo aqui,
pero aqui solo recebira el valor, la variable tendras que declara en el componente que la enviara aqui
*/
  @Output() formTitleChange = new EventEmitter<string>();
  @Output() rowsChange = new EventEmitter<number>();
  @Output() columnsChange = new EventEmitter<number>();
  @Output() showTooltipChange = new EventEmitter<string>();
  @Output() generateClick = new EventEmitter<void>();
  @Output() addTabClick = new EventEmitter<void>();
  @Output() removeTabClick = new EventEmitter<number>();
  @Output() gridConfigChange = new EventEmitter<void>();
  @Output() tabDimensionsChange = new EventEmitter<{ tab: Tab, rows: number, columns: number }>();

constructor(
  private _enviarInfo: EnviarInfoService,
) {}
   ngOnInit(): void {
     this._enviarInfo.currentTextColor.subscribe(color => this.textColor = color);
    this._enviarInfo.currentColor.subscribe(color => this.color = color);
  }
  showHelp(field: string) {
    this.showTooltipChange.emit(this.showTooltip === field ? '' : field);
  }

// PARA RECIBIR EL VALOR DE LAS VENTANAS QUE TENDRA O SE ELIMINAN ETC...
 onRowsChange(value: number) {
  const validValue = this.validateMin(value);
  this.rowsChange.emit(validValue);
  this.gridConfigChange.emit();
}
// PARA RECIBIR EL VALOR DE LAS COLUMNAS QUE TENDRA O SE ELIMINAN ETC...
onColumnsChange(value: number) {
  const validValue = this.validateMin(value);
  this.columnsChange.emit(validValue);
  this.gridConfigChange.emit();
}

// PARA RECIBIR EL VALOR DE LAS VENTANAS QUE TENDRA O SE ELIMINAN ETC... ESTE EN ESTE CASO ES EN CASO QUE TEMGAS ELEMENTOS DENTRO DE ESTA TAP DE MANDA ESE SALw.FIRE
 onTabRowsChange(tab: Tab, value: number) {
  const validValue = this.validateMin(value);

  if (validValue < tab.rows && this.checkIfElementsWillBeLost(tab, validValue, tab.columns)) {
    if (!confirm('Al reducir las filas, se perderán algunos elementos. ¿Deseas continuar?')) return;
  }

  this.tabDimensionsChange.emit({ tab, rows: validValue, columns: tab.columns });
}
// PARA RECIBIR EL VALOR DE LAS COLUMNAS QUE TENDRA O SE ELIMINAN ETC...STE EN ESTE CASO ES EN CASO QUE TEMGAS ELEMENTOS DENTRO DE LAS COLUMNAS TAN DE MANDA ESE SALw.FIRE

onTabColumnsChange(tab: Tab, value: number) {
  const validValue = this.validateMin(value);

  if (validValue < tab.columns && this.checkIfElementsWillBeLost(tab, tab.rows, validValue)) {
    if (!confirm('Al reducir las columnas, se perderán algunos elementos. ¿Deseas continuar?')) return;
  }

  this.tabDimensionsChange.emit({ tab, rows: tab.rows, columns: validValue });
}


  private isValidDimension(value: number): boolean {
    return value >= 1 && value <= 20;
  }

  private checkIfElementsWillBeLost(tab: Tab, newRows: number, newColumns: number): boolean {
    return tab.grid?.some((row, r) =>
      row?.some((cell, c) => cell?.element && (r >= newRows || c >= newColumns))
    ) ?? false;
  }

  addTab() {
    this.addTabClick.emit();
  }

  removeTab(index: number) {
    this.removeTabClick.emit(index);
  }

  onFormTitleChange(value: string) {
    this.formTitleChange.emit(value);
  }

  generateConfiguration() {
    this.generateClick.emit();
  }

  getActiveTab(): Tab | null {
    return this.currentTab;
  }

  isTabActive(tab: Tab): boolean {
    return this.currentTab?.id === tab.id;
  }

  getElementsCount(tab: Tab): number {
    return tab.grid?.flat().filter(cell => cell?.element).length ?? 0;
  }
  validateMin(value: number): number {
  return value < 1 ? 1 : value;
}

//ESTO ES PARA VALIDAR UE NO SE PUEDA PONER UN NUMERO MENOR A 1 EN EL VALOR DE LAS FILAS Y COLUMNAS
forceMinValue(tab: Tab, field: 'rows' | 'columns') {
  if (tab[field] < 1) {
    tab[field] = 1;
    this.tabDimensionsChange.emit({ tab, rows: tab.rows, columns: tab.columns });
  }
}


}
