import { Component, EventEmitter, Inject, OnInit, Output } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { EnviarInfoService } from '../../../Administrador/services/enviar-info.service';
import { MateriaService } from '../../../Administrador/services/materia.service';
import { MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
import { MAT_DATE_LOCALE, provideNativeDateAdapter } from '@angular/material/core';
import { Editor, Toolbar } from 'ngx-editor';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import moment from 'moment';
import Swal from 'sweetalert2';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-curso-materia',
  templateUrl: './curso-materia.component.html',
  styleUrl: './curso-materia.component.css'
})
export class CursoMateriaComponent implements OnInit {
  public color: string = '';
  public textColor: string = '';
  public isLoading: boolean = true;
  public profes: any = [];
  private id: string = '';
  public data: any;
  public anuncios: any = [];
  constructor(
    public dialog: MatDialog,
    private route: ActivatedRoute,
    private _enviarInfo: EnviarInfoService,
    private materiaService: MateriaService,
    private sanitizer: DomSanitizer
  ) { }

  ngOnInit(): void {
    this._enviarInfo.currentTextColor.subscribe(textColor => {
      this.textColor = textColor;
    });
    this._enviarInfo.currentColor.subscribe(color => {
      this.color = color;
    });

    //suscribirse al subject que manda al servicio
    this._enviarInfo.tabla$.subscribe(() => {
      this.getMateria(this.id);
    });
    this.route.paramMap.subscribe(params => {
      const id = params.get('id');

      this.id = atob(id || '');
    });
    this.getMateria(this.id);
  }

  getMateria(id: string) {
    this.materiaService.getMateria(id).subscribe((response: any) => {

      this.data = response;

      // Manejo de profesores
      this.profes = [];
      response.profesores.forEach((profesor: any) => {
        const nombreCompleto = profesor.nombreCompleto.split(' ');
        const nombreFormateado = ` ${nombreCompleto[0]} ${nombreCompleto[2]}, `;
        this.profes.push(nombreFormateado);
      });

      // Manejo de anuncios
      this.anuncios = response.anuncios.map((anuncio: any) => {
        // Sanitizar la descripción para evitar problemas de seguridad
        anuncio.descripcion = this.sanitizer.bypassSecurityTrustHtml(anuncio.descripcion);
        return anuncio;
      });


      this.isLoading = false;
    });
  }

  eliminarAnuncio(id:number){

    Swal.fire({
      icon: 'question',
      title: '¿Desea eliminar el anuncio?',
      showCancelButton: true,
      allowOutsideClick: false,
      allowEscapeKey: false,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: "Eliminar",
    }).then((result: any) => {
      /* Read more about isConfirmed, isDenied below */
      if (result.isConfirmed) {
        this.materiaService.eliminarAnuncio(id).subscribe((response:any) => {
          console.log(response);
          Swal.fire({
            icon: 'success',
            title: `${response.mensaje}`,
          })
          this._enviarInfo.notifyCambioTabla();
        },(err) => {
          Swal.fire({
            icon: 'error',
            title: `${err.error.mensaje}`,
          })
          console.log(err);
        })
      } else if (result.dismiss == 'cancel') {
        this._enviarInfo.notifyCambioTabla();
      }
    });


  }


  openDialog() {
    const dialogRef = this.dialog.open(ModalAnuncio, {
      data: this.id
    })
    dialogRef.componentInstance.anuncioActualizado.subscribe(() => {
      this.getMateria(this.id);
    });
  }

  openDialogE(anuncio: any) {
    console.log(anuncio);
    const dialogRef = this.dialog.open(ModalAnuncio, {
      data: { act: 'editar', anuncio }
    })

    dialogRef.componentInstance.anuncioActualizado.subscribe(() => {
      this.getMateria(this.id);
    });
  }
verAnuncio(anuncio: any) {
  this.dialog.open(ModalAnuncio, {
    width: '600px',
    data: {
      act: 'ver',
      anuncio: anuncio
    }
  });
}

}

@Component({
  selector: 'dialog-content-example-dialog',
  templateUrl: './modalCurso.component.html',
  styleUrl: './curso-materia.component.css',
  providers: [provideNativeDateAdapter(),
  { provide: MAT_DATE_LOCALE, useValue: 'en-GB' }
  ],
})
export class ModalAnuncio implements OnInit {
  private id: string = '';
  @Output() anuncioActualizado = new EventEmitter<void>();
  constructor(public dialog: MatDialog,
    private _enviarInfoService: EnviarInfoService,
    private route: ActivatedRoute,
    private materiaService: MateriaService,
    @Inject(MAT_DIALOG_DATA) public data: any,

  ) {
    // this.lista()
  }

  public todayDate: Date = new Date();
  valoresCombinados: any = {};

  public info: any;
  private userData = JSON.parse(localStorage.getItem('userData') || '');
  editor!: Editor;
  toolbar: Toolbar = [
    ['bold', 'italic'],
    ['underline', 'strike'],
    ['blockquote'],
    ['ordered_list', 'bullet_list'],
    [{ heading: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] }],
    ['link', 'image'],
    ['text_color', 'background_color'],
    ['align_left', 'align_center', 'align_right', 'align_justify'],
  ];
  colorPresets = [
    "#000000", // Negro
    "#FF0000", // Rojo
    "#00FF00", // Verde
    "#0000FF", // Azul
    "#FFFF00", // Amarillo
    "#FF00FF", // Magenta
    "#00FFFF", // Cian
    "#808080", // Gris
    "#FFFFFF", // Blanco
    "#800000", // Marrón
    "#008000", // Verde oscuro
    "#000080", // Azul oscuro
    "#808000", // Oliva
    "#800080", // Púrpura
    "#008080", // Verde azulado
    "#C0C0C0"  // Plata

  ];


  ngOnInit(): void {
    this.editor = new Editor();
    this.route.paramMap.subscribe(params => {
      const id = params.get('id');
      console.log(atob(id || ''));
      this.id = atob(id || '');
    });
    if (this.data.act) {
      this.setData()
    }
  }

  setData() {
    let fechaPublicacion = new Date(this.data.anuncio.fechaPublicacion);
    fechaPublicacion.setDate(fechaPublicacion.getDate());

    let fechaCaducidad = new Date(this.data.anuncio.fechaCaducidad);
    fechaCaducidad.setDate(fechaCaducidad.getDate());

    this.form.controls['titulo'].setValue(this.data.anuncio.tituloAnuncio);
    this.form.controls['fechaInicio'].setValue(fechaPublicacion);
    this.form.controls['horaInicio'].setValue(this.data.anuncio.fechaPublicacion.split(' ')[1]);
    this.form.controls['fechaCaducidad'].setValue(fechaCaducidad);
    this.form.controls['horaCaducidad'].setValue(this.data.anuncio.fechaCaducidad.split(' ')[1]);
    this.form.controls['contenido'].setValue(this.data.anuncio.descripcion.changingThisBreaksApplicationSecurity);
  }

  ngOnDestroy(): void {
    this.editor.destroy();
  }




  public form = new FormGroup({
    titulo: new FormControl<string>('', Validators.required),
    fechaInicio: new FormControl<any>(null, Validators.required),
    horaInicio: new FormControl<any>(null, Validators.required),
    fechaCaducidad: new FormControl<any>(null, Validators.required),
    horaCaducidad: new FormControl<any>(null, Validators.required),
    contenido: new FormControl<string>('', Validators.required),
  })





  convertToDatetime() {
    // Obtener valores del formulario
    const fechaInicio: any = this.form.get('fechaInicio')?.value;
    const horaInicio: any = this.form.get('horaInicio')?.value;
    const fechaCaducidad: any = this.form.get('fechaCaducidad')?.value;
    const horaCaducidad: any = this.form.get('horaCaducidad')?.value;

    let fechaHoraInicio: string | undefined;
    let fechaHoraCaducidad: string | undefined;

    if (fechaInicio && horaInicio) {
      // Formatear fecha en 'YYYY-MM-DD'
      var formattedDate = moment(fechaInicio).format("YYYY-MM-DD");
      fechaHoraInicio = `${formattedDate} ${horaInicio}`;

    } else {
      console.error('Fecha de inicio o hora de inicio no válidas.');
    }

    if (fechaCaducidad && horaCaducidad) {
      // Formatear fecha en 'YYYY-MM-DD'
      var formattedDate = moment(fechaCaducidad).format("YYYY-MM-DD");
      fechaHoraCaducidad = `${formattedDate} ${horaCaducidad}`;

    } else {
      console.error('Fecha de caducidad o hora de caducidad no válidas.');
    }

    this.info = {
      titulo: this.form.get('titulo')?.value,
      contenido: this.form.get('contenido')?.value,
      fechaCreacion: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
      fechaPublicacion: fechaHoraInicio,
      fechaCaducidad: fechaHoraCaducidad,
      idMateria: this.data,
      idUsuario: this.userData[0]
    };
  }





  // cancelUpload() {
  //   this.uploadSub.unsubscribe();
  //   this.reset();
  // }

  crearAnuncio() {

    this.convertToDatetime()
    console.log(this.info);

    if (this.form.invalid) {
      return Object.values(this.form.controls).forEach(control => {
        control.markAsTouched();
      });
    }

    if (!this.data.act) {
      this.materiaService.crearAnuncio(this.info).subscribe((response: any) => {
        console.log(response);
        this.anuncioActualizado.emit();
        Swal.fire({
          icon: 'success',
          title: `${response.mensaje}`,
        })
        this.dialog.closeAll();
      },
        (err) => {
          console.log(err);
        })
    }else{
      this.info = {
        ...this.info,
        id: this.data.anuncio.idAnuncio
      }
      this.materiaService.editarAnuncio(this.info).subscribe((response:any) => {
        console.log(response);
        this.anuncioActualizado.emit();
        Swal.fire({
          icon: 'success',
          title: `${response.mensaje}`,
        })
        this.dialog.closeAll();
      }, (err) => {
        console.log(err);
      })
    }



  }




  public horasDelDia: any = this.generarHorasDelDia();
  generarHorasDelDia(): { hora24: string, hora12: string }[] {
    const horas: { hora24: string, hora12: string }[] = [];
    let hora: number = 0;
    let minutos: number = 0;

    for (let i = 0; i < 48; i++) {
      let ampm = 'am';
      let hora12: number = hora;

      if (hora === 0) {
        hora12 = 12;
      } else if (hora === 12) {
        ampm = 'pm';
      } else if (hora > 12) {
        hora12 = hora - 12;
        ampm = 'pm';
      }

      const horaFormateada24 = `${hora.toString().padStart(2, '0')}:${minutos.toString().padStart(2, '0')}:00`;
      const horaFormateada12 = `${hora12.toString().padStart(2, '0')}:${minutos.toString().padStart(2, '0')} ${ampm}`;

      horas.push({ hora24: horaFormateada24, hora12: horaFormateada12 });

      minutos += 30;
      if (minutos === 60) {
        minutos = 0;
        hora++;
      }
    }

    return horas;
  }

  campoNoValido(campo: string): boolean {
    if (this.form.get(campo)?.invalid && this.form.get(campo)?.touched) {
      return true;
    } else {
      return false;
    }
  }

  campoVacio(campo: string): boolean {
    if ((this.form.get(campo)?.value === '' || this.form.get(campo)?.invalid) && this.form.get(campo)?.touched) {
      return true;
    } else {
      return false;
    }
  }

  close() {
    this.dialog.closeAll()
  }

  limpiar() {
    this.form.reset();
  }


}
