import { Component, Input, OnChanges, SimpleChanges, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import { FormService } from './../../../services/FormService.service';

// ESTE COMPONENTE ES EL PANEL QUE GENERA LOS INPUTS DINÁMICOS: TEXTO, RADIO, CHECKBOX, SELECT, ETC.
@Component({
  selector: 'app-dynamic-form-component',
  templateUrl: './dynamic-form-component.component.html',
  styleUrls: ['./dynamic-form-component.component.css']
})
export class DynamicFormComponentComponent implements OnInit, OnChanges {

  @Input() formId?: string | number;  // SI VIENE POR INPUT, USAMOS ESTE ID PARA CARGAR EL FORMULARIO
  form!: FormGroup;                   // AQUÍ SE GUARDA EL FORMULARIO REACTIVO
  configuration: any;                 // CONFIGURACIÓN DEL FORM QUE VIENE DEL SERVICIO
  selectedTabIndex = 0;               // TAB ACTIVO, PARA SABER CUÁL MOSTRAR

  constructor(
    private route: ActivatedRoute,    // PARA LEER EL PARAMETRO DE LA RUTA SI NO VIENE POR INPUT
    private formService: FormService, // SERVICIO PARA TRAER LA CONFIGURACIÓN DEL FORMULARIO
    private fb: FormBuilder           // FORM BUILDER PARA CREAR EL FORM REACTIVO
  ) {}

  ngOnInit() {
    // SI NO HAY FORM ID POR INPUT, INTENTO LEERLO DESDE LA RUTA
    if (!this.formId) {
      this.route.paramMap.subscribe(params => {
        const id = params.get('id');
        if (id) {
          this.loadForm(+id); // SI ENCUENTRA ID, CARGA EL FORMULARIO
        }
      });
    }
  }

  ngOnChanges(changes: SimpleChanges) {
    // SI EL INPUT formId CAMBIA, CARGAMOS EL FORMULARIO NUEVAMENTE
    if (changes['formId'] && this.formId) {
      this.loadForm(this.formId);
    }
  }

  // FUNCION PARA TRAER EL FORMULARIO DEL SERVICIO SEGÚN EL ID
  loadForm(id: string | number) {
    this.formService.getFormById(Number(id)).subscribe({
      next: (response) => {
        if (response.success) {
          this.configuration = response.form.configuration; // GUARDAMOS LA CONFIGURACIÓN
          this.buildForm();                                  // Y CONSTRUIMOS EL FORM REACTIVO
        } else {
          console.error('FORMULARIO NO ENCONTRADO');
        }
      },
      error: (err) => {
        console.error('ERROR AL CARGAR FORMULARIO:', err);
      }
    });
  }

  // FUNCION PARA CREAR EL FORMULARIO DINÁMICAMENTE SEGÚN LA CONFIGURACIÓN
  buildForm() {
    if (!this.configuration || !this.configuration.tabs) {
      console.error('CONFIGURACIÓN INVÁLIDA O VACÍA');
      return;
    }

    const group: any = {}; // AQUÍ SE GUARDAN LOS CONTROLES DEL FORM

    // RECORREMOS CADA TAB Y CADA ELEMENTO PARA CREAR LOS CONTROLES
    this.configuration.tabs.forEach((tab: any) => {
      tab.elements.forEach((el: any) => {
        const controlName = el.element.name;                   // NOMBRE DEL CONTROL
        const validators = el.element.required ? [Validators.required] : []; // VALIDACIONES
        group[controlName] = this.fb.control('', validators);  // CREAMOS EL CONTROL
      });
    });

    this.form = this.fb.group(group); // FORM REACTIVO LISTO
  }

  // FUNCION QUE SE EJECUTA CUANDO EL USUARIO HACE SUBMIT
  onSubmit() {
    if (this.form.valid) {
      console.log('FORMULARIO ENVIADO CON DATOS:', this.form.value);
      // AQUÍ PODRÍAS LLAMAR AL SERVICIO PARA ENVIAR LOS DATOS
    } else {
      console.log('FORMULARIO INVÁLIDO');
      this.form.markAllAsTouched(); // MARCA TODOS LOS CAMPOS COMO TOCADO PARA MOSTRAR ERRORES
    }
  }
}
