import { Component, OnInit, Output,EventEmitter } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Instituciones } from 'src/app/modules/main/Models/instituciones';
import { instproy } from 'src/app/modules/main/Models/instproy';
import { parametrosdet } from 'src/app/modules/main/Models/parametrosdet';
import { InstitucionesService } from 'src/app/modules/main/services/Instituciones/instituciones.service';
import { ParametrosdetService } from 'src/app/modules/main/services/parametrosdet/parametrosdet.service';
import { EnvioFormularioComponent } from '../../../../programa/opciones/envio-formulario/envio-formulario.component';
import { MatDialog } from '@angular/material/dialog';
import { Actualiza_datosService } from 'src/app/modules/main/services/actualiza_datos/actualiza_datos.service';
import { Parroquia } from 'src/app/modules/main/Models/Ubicaciones/parroquia';
import { Canton } from 'src/app/modules/main/Models/Ubicaciones/canton';
import { Provincia } from 'src/app/modules/main/Models/Ubicaciones/provincia';
import { UbicacionesService } from 'src/app/modules/main/services/Ubicaciones/ubicaciones.service';


@Component({
  selector: 'vex-add-compromiso',
  templateUrl: './add-compromiso.component.html',
  styleUrls: ['./add-compromiso.component.css']
})
export class AddCompromisoComponent implements OnInit {
  myForm: FormGroup;
  idRecuperado: number;
  formularioEnviado: boolean;

  //enviar o comunicar entre componentes con el emiter
  @Output() formularioGuardado = new EventEmitter<void>();
  //arreglos
  entidad: parametrosdet[] = [];
  orga: parametrosdet[] = [];
  institu: Instituciones[] = [];

  parroquias: Parroquia[] = [];
  cantones: Canton[] = [];
  provincias: Provincia[]=[];
  constructor(
    private formBuilder: FormBuilder,
    private instP: ParametrosdetService,
    private instituS: InstitucionesService,
    private instproyM: instproy,
    private dialog: MatDialog,
    private datosCompartidos: Actualiza_datosService,
    private UbicacionesS: UbicacionesService
  ) { }

  ngOnInit(): void {
    this.idRecuperado = parseInt(localStorage.getItem('proyectoId'), 10);
    this.obtenerRegistros();
    this.myForm = this.formBuilder.group({
      entidad: ['', Validators.required],
      nombreI: ['', Validators.required],
      provinciaI: [{ value: '', disabled: true }],
      direccionI: [{ value: '', disabled: true }],
      organizacionI: [],
      nombreR: [{ value: '', disabled: true }],
      apellidoR: [{ value: '', disabled: true }],
      cargoR: [{ value: '', disabled: true }],
      correoR: [{ value: '', disabled: true }],
      telefonoR: [{ value: '', disabled: true }],
      declaracion: ['', Validators.required]
    });
  }

  onSubmit() {
    if (this.myForm.valid) {
      try {
        this.instproyM.uzytavproyec_id = this.idRecuperado;
        this.instproyM.uzytparametros_det_id_entidad = this.myForm.get('entidad').value;
        this.instproyM.uzytavinstituc_id = this.myForm.get('nombreI').value;
        this.instproyM.uzytparametros_det_id_organizacion = this.myForm.get('organizacionI').value;
        this.instproyM.uzytavinstproy_declaracion = this.myForm.get('declaracion').value;
        this.instP.guardarParametros(this.instproyM).subscribe(response => {
          this.openModal('Los Datos han sido Enviados');
          this.instP.parametrosActualizados.next();
          this.datosCompartidos.actualizarDatos(this.instproyM);
          this.formularioGuardado.emit();
        });
      } catch (error) {
        console.error('Error al enviar los datos:', error);
      }
    }
  }

  cancelar() {

  }

  obtenerRegistros() {
    this.instP.obtenerParametros().subscribe(data => {
      this.entidad = data.filter(item => item.uzytparametros_det_id_alt === '1');
      this.orga = data.filter(item => item.uzytparametros_det_id_alt === '2');
    });

    this.instituS.obtenerParametros().subscribe(data => {
      this.institu = data;
    });

    this.UbicacionesS.obtenerProvincias().subscribe(data =>{
      this.provincias = data;
    });

    this.UbicacionesS.obtenerCant().subscribe(data =>{
      this.cantones = data;
    })

    this.UbicacionesS.obtenerParro().subscribe(data =>{
      this.parroquias = data;
    });
  }

  onInstitucionSelected(selectedInstitucionId: number) {
    const selectedInstitucion = this.institu.find(item => item.uzytavinstituc_id === selectedInstitucionId);
    if (selectedInstitucion) {
      this.myForm.get('provinciaI')?.setValue(this.getParroquiaNombre(selectedInstitucion.uzytparroquia_id));
      this.myForm.get('direccionI')?.setValue(selectedInstitucion.uzytavinstituc_calle);
      this.myForm.get('nombreR')?.setValue(selectedInstitucion.uzytavinstituc_nombre);
      this.myForm.get('apellidoR')?.setValue(selectedInstitucion.uzytavinstituc_apellirl);
      this.myForm.get('cargoR')?.setValue(selectedInstitucion.uzytavinstituc_cargorl);
      this.myForm.get('correoR')?.setValue(selectedInstitucion.uzytavinstituc_mailrl1);
      this.myForm.get('telefonoR')?.setValue(selectedInstitucion.uzytavinstituc_telefono);
    }
  }

  openModal(mensaje: string) {
    const dialogRef = this.dialog.open(EnvioFormularioComponent, {
      disableClose: true
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('La ventana modal se ha cerrado');
      this.formularioEnviado = true;
    });
  }

  getParroquiaNombre(parroquiaId: string): string {
    const parroquia = this.parroquias.find(p => p.uzytparroquia_id === parroquiaId);
    if (parroquia) {
        const canton = this.cantones.find(c => c.uzytcanton_id === parroquia.uzytcanton_id)
        const prov = this.provincias.find(pro => pro.uzytprovincia_id === canton.uzytprovincia_id)
      const nombre = prov.uzytprovincia_nombre.toLowerCase();
      return nombre.charAt(0).toUpperCase() + nombre.slice(1);
    }
    return '';
  }
}