import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators, FormGroup } from '@angular/forms';
import { AnexosImagenes } from 'src/app/modules/main/Models/anexos-imagenes';
import { AnexosImagenesService } from 'src/app/modules/main/services/anexos-imagenes/anexos-imagenes.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 { Compartir_idService } from 'src/app/modules/main/services/compartir_id/compartir_id.service';
import { format } from 'date-fns';
import { ActualizarAnexosService } from 'src/app/modules/main/services/actualizar_anexos/actualizar-anexos.service';
import { ErrorTextoComponent } from '../../../errores/error-texto/error-texto.component';


@Component({
  selector: 'app-add-anexos-imagenes',
  templateUrl: './add-anexos-imagenes.component.html',
  styleUrls: ['./add-anexos-imagenes.component.css']
})
export class AddAnexosImagenesComponent implements OnInit {
  idRecuperado: number;
  myForm: FormGroup;
  selectedFile: File | null = null;
  file: File;
  anexosImagenes: AnexosImagenes = {};
  enviarSolicitud = false;
  formularioEnviado: boolean
  cambio: boolean;

  constructor(
    private formBuilder: FormBuilder,
    private anexosImagenesService: AnexosImagenesService,
    private dialog: MatDialog,
    private actualizarAnexosService: ActualizarAnexosService,
    private datosCompartidos: Actualiza_datosService,

    private idCompartido: Compartir_idService,


  ) {
    this.idRecuperado = parseInt(localStorage.getItem('proyectoId'), 10);
  }



  ngOnInit(): void {

    this.cambio = false;

    this.myForm = this.formBuilder.group({
      archivo: [{ value: '', disabled: true }, Validators.required],
      //fechaInicio: [{ value: '', disabled: true }, Validators.required],
    });
  }


  onFileSelected(event: any) {
    this.selectedFile = event.target.files[0];
  }

  archivoEsValido: boolean = false;
  onFileChange(event: any) {
    // Obtener el archivo seleccionado
    const fileList: FileList = event.target.files;
    if (fileList.length > 0) {
      this.file = fileList[0];
      if(!this.validarArchivo(this.file)){
        this.openModalError('El archivo debe ser una imagen en formato (png, jpeg, jpg');
        return;
      }else{
        this.archivoEsValido = true;
      }
    }
  }

  openModalError(texto: string) {
    const dialogRef = this.dialog.open(ErrorTextoComponent, {
      disableClose: true,
      data: { mensaje: texto }
    });

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

  validarArchivo(file: File): boolean {
    const allowedExtensions = ['.jpg', '.jpeg', '.png', '.gif'];
    const fileName = file.name.toLocaleLowerCase();

    for (const extension of allowedExtensions) {
      if (fileName.endsWith(extension)) {
        return true;
      }
    }
    return false;
  }

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

    dialogRef.afterClosed().subscribe(result => {
      this.formularioEnviado = true;
    });
  }

  onSubmit() {
    if (this.myForm.valid) {
      this.anexosImagenes.uzytavproyec_id = this.idRecuperado;
      console.log('prueba imagen', this.anexosImagenes.uzytavproyec_id)
      //this.anexosImagenes.uzytavanexospr_fech_subida = this.myForm.value.fechaInicio;
      //this.anexosImagenes.uzytavanexospr_fech_subida = new Date();
      this.anexosImagenesService.guardarParametrosSeparados(this.file, this.anexosImagenes).subscribe(
        response => {
          this.openModal('Los anexos se han enviado correctamente');
          this.guardar()
          this.datosCompartidos.actualizarDatos(this.anexosImagenes);
          this.actualizarAnexosService.actualizarDatos(this.file);

        },
        error => {
          console.log(error)
          //this.router.navigate(['main/Convocatorias']);
        }
      );

    }


  }


  cambiar() {
    this.cambio = true;
    //this.myForm.get('fechaInicio').enable();
    this.myForm.get('archivo').enable();
  }

  cancelado() {
    this.cambio = false;
    this.myForm.disable();
  }

  guardar() {
    this.cambio = false;
    this.myForm.disable();
    this.myForm.reset()
  }
}