import { FormControl, FormGroupDirective, NgForm } from '@angular/forms';
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { InstitucionesService } from '../../../../services/Instituciones/instituciones.service';
import { Provincia } from '../../../../Models/Ubicaciones/provincia';
import { Canton } from '../../../../Models/Ubicaciones/canton';
import { Parroquia } from '../../../../Models/Ubicaciones/parroquia';
import { UbicacionesService } from 'src/app/modules/main/services/Ubicaciones/ubicaciones.service';
import { Instituciones } from '../../../../Models/instituciones';

import { Router } from '@angular/router';


@Component({
  selector: 'vex-agregar-instu',
  templateUrl: './agregar-instu.component.html',
  styleUrls: ['./agregar-instu.component.scss']
})

export class AgregarInstuComponent implements OnInit {
  provincia!: Provincia[];
  selectedProvincia: string;

  canton!: Canton[];
  selectedCanton: string;

  parroquia!: Parroquia[];
  selectedParroquia: string;
  selectedParroquiaId: string;


  myForm: FormGroup;
  searchTerm: string;
  userData: any;
  instituciones: Instituciones
  checkboxValue: string;


  constructor(
    private formBuilder: FormBuilder,
    private institucionesService: InstitucionesService,
    private router: Router,
    private ubicacionesService: UbicacionesService
  ) {
    this.instituciones = new Instituciones()
  }

  ngOnInit() {

    this.obtenerProvincias();
    this.myForm = this.formBuilder.group({
      nombreFormControl: ['', Validators.required],
      direccionFormControl: ['', Validators.required],
      telefonoFormControl: ['', Validators.required],
      nombreRepeFormControl: ['', Validators.required],
      apellidoRepre: ['', Validators.required],
      cargoRepre: ['', Validators.required],
      telefonoRepreFormControl: ['',Validators.required],
      emailRepreFormControl: ['',Validators.required],
      fechaConfiguracion: ['', Validators.required],
      provincia: ['', Validators.required],
      canton: ['', Validators.required],
      parroquia: ['', Validators.required],
      activo: [''],

    });

  }

  verificarCheckbox() {
    if (this.myForm.value.activo) {
      this.checkboxValue = 'A';
    } else {
      this.checkboxValue = 'I';
    }
  }

  enviarSolicitud = false;
  onSubmit() {
    this.verificarCheckbox()

    if (this.myForm.valid && !this.enviarSolicitud) {
      this.enviarSolicitud = true;
      this.instituciones.uzytparroquia_id = this.selectedParroquiaId;
      this.instituciones.uzytavinstituc_nombre = this.myForm.value.nombreFormControl;
      this.instituciones.uzytavinstituc_calle = this.myForm.value.direccionFormControl;
      this.instituciones.uzytavinstituc_telefono = this.myForm.value.telefonoFormControl;
      this.instituciones.uzytavinstituc_nomrepl = this.myForm.value.nombreRepeFormControl;
      this.instituciones.uzytavinstituc_apellirl = this.myForm.value.apellidoRepre;
      this.instituciones.uzytavinstituc_cargorl = this.myForm.value.cargoRepre;
      this.instituciones.uzytavinstituc_telrepl = this.myForm.value.telefonoRepreFormControl;
      this.instituciones.uzytavinstituc_mailrl1 = this.myForm.value.emailRepreFormControl;
      this.instituciones.uzytavinstituc_fecha_crea = this.myForm.value.fechaConfiguracion;


      //this.instituciones. = this.selectedParroquia.uzytparroquia_id;

      this.instituciones.uzytavinstituc_estado = this.checkboxValue;
    }

    this.institucionesService.guardarParametros(this.instituciones).subscribe(() => {
      console.log('Datos enviados');

      this.institucionesService.parametrosActualizados.next();
      this.router.navigate(['main/Instituciones']);

    });

  }



  obtenerProvincias() {
    this.ubicacionesService.obtenerProvincias().subscribe(data => {
      this.provincia = data;
    });
  }

  obtenerCantones(idProvincia: number) {
    this.ubicacionesService.obtenerCantones(idProvincia).subscribe(data => {
      this.canton = data;
    });
  }

  obtenerParroquias(idCanton: number) {
    this.ubicacionesService.obtenerParroquias(idCanton).subscribe(data => {
      this.parroquia = data;
      this.selectedParroquiaId = null;
    });
  }

  volver() {
    this.router.navigate(['main/Instituciones'])
  }
}