import { Component, ElementRef, Inject, OnInit, ViewChild } from '@angular/core';
import { EnviarInfoService } from '../../../Administrador/services/enviar-info.service';
import { MatTableDataSource } from '@angular/material/table';
import { DomSanitizer } from '@angular/platform-browser';
import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
import { MAT_DIALOG_DATA, MatDialog, MatDialogContent, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { ProfesorBitacoraService } from '../../services/profesor-bitacora.service';
import { MatPaginator } from '@angular/material/paginator';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatOption, MatSelectModule } from '@angular/material/select';
import { MatInputModule } from '@angular/material/input';
import { CommonModule } from '@angular/common';
import { MatProgressSpinnerModule, MatSpinner } from '@angular/material/progress-spinner';
import { MAT_DATE_LOCALE, provideNativeDateAdapter } from '@angular/material/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import moment from 'moment';
import { MatSlideToggleChange } from '@angular/material/slide-toggle';
import Swal from 'sweetalert2';
import * as XLSX from 'xlsx';
import { map, Observable, startWith } from 'rxjs';
import { MatAutocompleteModule } from '@angular/material/autocomplete';

@Component({
  selector: 'app-registro-bitacora',
  templateUrl: './registro-bitacora.component.html',
  styleUrl: './registro-bitacora.component.css'
})
export class RegistroBitacoraComponent implements OnInit {
  color: string = '';
  textColor: string = '';
  displayedColumns: string[] = ['ID', 'MGG', 'Alumno', 'Tipo', 'Descripcion', 'Fecha', 'estado', 'Acciones'];
  dataSource = new MatTableDataSource<any>([]);
  isLoading: boolean = true;
  filtro: string = 'Activo';

  @ViewChild(MatPaginator) paginator!: MatPaginator;
  @ViewChild('TABLE') table!: ElementRef;

  constructor(private _enviarInfo: EnviarInfoService, private _DomSanitizer: DomSanitizer, private _MatIconRegister: MatIconRegistry,
    public dialog: MatDialog, private profesorBitacoraService: ProfesorBitacoraService) {
    this._MatIconRegister.addSvgIcon('excel', this._DomSanitizer.bypassSecurityTrustResourceUrl('assets/icons/excel.svg'));

  }

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

  getRegistros() {
    this.profesorBitacoraService.getRegistros().subscribe((data: any) => {
      this.isLoading = false;
      this.dataSource = new MatTableDataSource(data);
      this.dataSource.paginator = this.paginator;
      this.Filtro(this.filtro);
    });
  }

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();
    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }


  exportAsExcel() {
    const ws: XLSX.WorkSheet = XLSX.utils.table_to_sheet(this.table.nativeElement);
    const wb: XLSX.WorkBook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, 'COLEGIOABC-ConsultaTipos');
    XLSX.writeFile(wb, 'Tipos.xlsx');
  }

  exportAll() {
    const dataSource = this.dataSource.data;
    const ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet(dataSource);
    const wb: XLSX.WorkBook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, 'COLEGIOABC-ConsultaTipos');
    XLSX.writeFile(wb, 'Tipos.xlsx');
  }

  openDialog() {
    const modal = this.dialog.open(CrearRegistro, {
    });
  }

  abrirDescripcion(data: any) {
    const descripcion = this.dialog.open(Descripcion, {
      data: data,
    });
  }

  Filtro(event: any) {
    this.filtro = event;
    this.dataSource.filter = this.filtro;
  }
  openEditar(data: any) {
    const modal = this.dialog.open(CrearRegistro, {
      data: data,
    });
  }

  onToggleChange(event: MatSlideToggleChange, row: any) {
    event.source.checked = !event.checked;
    if (row.estado === 'Activo') {
      this.confirmDelete(row.idBitacora, () => {
        this.delete(row.idBitacora, () => {
          row.estado = 'Eliminado';
          event.source.checked = false;
        });
      });
    } else {
      this.confirmEnable(row.idBitacora, () => {
        this.habilitarEstado(row.idBitacora, () => {
          row.estado = 'Activo';
          event.source.checked = true;
        });
      });
    }
  }

  confirmDelete(id: string, callback: () => void) {
    Swal.fire({
      title: '¿Estas seguro de eliminar este registro?',
      text: "No podras revertir esta acción!",
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Si, eliminar!',
    }).then((result) => {
      if (result.isConfirmed) {
        callback();
      }
    });
  }

  confirmEnable(id: string, callback: () => void) {
    Swal.fire({
      title: '¿Estas seguro de habilitar este registro?',
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Si, habilitar!',
    }).then((result) => {
      if (result.isConfirmed) {
        callback();
      }
    });
  }
  delete(id: string, callback: () => void) {
    this.profesorBitacoraService.eliminarRegistro(id).subscribe((res: any) => {
      Swal.fire('Exito!', res.message, 'success');
      callback();
    });
  }
  habilitarEstado(id: string, callback: () => void) {
    this.profesorBitacoraService.habilitarRegistro(id).subscribe((res: any) => {
      Swal.fire('Exito!', res.message, 'success');
      callback();
    });
  }

}

@Component({
  selector: 'app-RegistroBitacora',
  templateUrl: 'crearRegistro.html',
  styleUrl: './registro-bitacora.component.css',
  providers: [provideNativeDateAdapter(),
  { provide: MAT_DATE_LOCALE, useValue: 'en-GB' }
  ],
  standalone: true,
  imports: [MatDialogModule, MatIconModule, MatFormFieldModule, ReactiveFormsModule, MatSelectModule, MatInputModule, MatOption, CommonModule, MatIconModule,
    MatProgressSpinnerModule, MatDatepickerModule, MatAutocompleteModule]
})
export class CrearRegistro {
  form!: FormGroup;
  grupos: any[] = [];
  materias: any[] = [];
  tipo: any[] = [];
  alumnos: any[] = [];
  dataUsuarios: any;
  dataMateria: any;
  isLoading: boolean = true;
  todayDate: Date = new Date();
  maxCaracteres: number = 0;
  myControl = new FormControl('', Validators.required);
  filteredOptions!: Observable<string[]>;
  constructor(private fb: FormBuilder, public dialog: MatDialogRef<CrearRegistro>, @Inject(MAT_DIALOG_DATA) public data: any,
    private profesorBitacoraService: ProfesorBitacoraService) {
    this.datos();
    this.getMaterias();
    this.getipos();
    if(data){
      this.todayDate = new Date(data.fechaPublicacion);
    }
  }

  datos() {
    this.profesorBitacoraService.getAlum().subscribe((data: any) => {
      this.dataUsuarios = data;
    });
    this.form = this.fb.group({
      materia: ['', Validators.required],
      gradoGrupo: ['', Validators.required],
      alumno: ['', Validators.required],
      tipo: ['', Validators.required],
      descripcion: ['', Validators.pattern('^[a-zA-Z0-9áéíóúÁÉÍÓÚñÑ,.][a-zA-Z0-9\\sáéíóúÁÉÍÓÚñÑ,.]*$')],
      fecha: [''],
      fechaInicio: ['', Validators.required],
      fechaHora: ['', Validators.required]
    });
    if (this.data) {
      let fechaIncio = new Date(this.data.fechaPublicacion);
      this.form.patchValue({
        materia: this.data.idMateriaBitacora,
        gradoGrupo: this.data.idGradoGrupoRelacionado,
        alumno: this.data.idAlumnoBitacora,
        tipo: this.data.idTipoBitacora,
        descripcion: this.data.descripcionBitacora,
        fechaInicio: fechaIncio,
        fechaHora: this.data.fechaPublicacion.split(' ')[1],
      });
      this.form.get('materia')?.disable();
      this.form.get('gradoGrupo')?.disable();
      this.form.get('alumno')?.disable();
      this.maxCaracteres = this.form.get('descripcion')?.value.length;
      this.myControl.disable();
    }

  }

  getipos() {
    this.profesorBitacoraService.getTipos().subscribe((data: any) => {
      this.isLoading = false;
      this.tipo = data;
    });
  }

  getMaterias() {
    this.profesorBitacoraService.getMateria().subscribe((response: any) => {
      this.dataMateria = response.map((materia: any) => {
        return {
          id: materia.id,
          nombre: materia.nombreMateria,
          grado: materia.grupos,
        }
      })
      this.materias = this.dataMateria;
    });
  }

  Materia(event: any) {
    if (this.data) {
      if (this.data.idMateriaBitacora == event.id) {
        this.grupos = event.grado;
      } else {
        this.form.get('materia')?.reset();
        this.form.get('gradoGrupo')?.reset();
        this.form.get('alumno')?.reset();
        this.grupos = event.grado;
      }
    } else {
      this.form.get('materia')?.reset();
      this.form.get('gradoGrupo')?.reset();
      this.form.get('alumno')?.reset();
      this.myControl.reset();
      this.grupos = event.grado;
    }
  }

  GradoGrupo(event: any) {
    if (this.data) {
      if (this.data.idGradoGrupoRelacionado == event.idGradoGrupoRelacionado) {
        this.alumnos = this.dataUsuarios.filter((alumno: any) => alumno.grado == event.idGradoGrupoRelacionado || alumno.idGrupo == event.idGradoGrupoRelacionado);
        this.myControl.setValue(this.alumnos[0].nombreAlumno);
        this.form.get('alumno')?.setValue(this.alumnos[0].idUsuario);
      } else {
        this.form.get('alumno')?.reset();
        this.form.get('gradoGrupo')?.reset();
        this.alumnos = this.dataUsuarios.filter((alumno: any) => alumno.grado == event.idGradoGrupoRelacionado || alumno.idGrupo == event.idGradoGrupoRelacionado);
      }
    } else {
      this.form.get('alumno')?.reset();
      this.form.get('gradoGrupo')?.reset();
      this.alumnos = this.dataUsuarios.filter((alumno: any) => alumno.grado == event.idGradoGrupoRelacionado || alumno.idGrupo == event.idGradoGrupoRelacionado);
    }
    this.filteredOptions = this.myControl.valueChanges.pipe(
      startWith(''),
      map(value => this._filter(value || '')),
    );
  }

  nombreAlum(event: any) {
    const idAlum = this.dataUsuarios.filter((alumno: any) => alumno.nombreAlumno == event);
    this.form.get('alumno')?.setValue(idAlum[0].idUsuario);
  }

  private _filter(value: string): string[] {
    const filterValue = value.toLowerCase();
    return this.alumnos.map((option: any) => option.nombreAlumno).filter((nombre: string) => nombre.toLowerCase().includes(filterValue));
  }

  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;
  }


  isValidField(field: string, errorType: string) {
    const control = this.form.get(field);
    return control?.hasError(errorType) && control?.touched;
  }
  isValidField1(errorType: string) {
    return this.myControl.hasError(errorType) && this.myControl.touched;
  }

  onSave() {
    if (this.form.invalid || this.myControl.invalid) {
      this.form.markAllAsTouched();
      this.myControl.markAsTouched();
      Swal.fire({
        icon: 'error',
        title: 'Oops...',
        text: 'Faltan campos por llenar',
      });
      return;
    }

    const fechaInicio: any = this.form.get('fechaInicio')?.value;
    const horaInicio: any = this.form.get('fechaHora')?.value;
    let fechaHoraInicio: string | undefined;

    if (fechaInicio && horaInicio) {
      var formattedDate = moment(fechaInicio).format("YYYY-MM-DD");
      fechaHoraInicio = `${formattedDate} ${horaInicio}`;
      this.form.get('fecha')?.setValue(fechaHoraInicio);
    } else {
      console.error('Fecha de inicio o hora de inicio no válidas.');
    }
    if (this.data) {
      const data = {
        id: this.data.idBitacora,
        idMateriaBitacora: this.form.get('materia')?.value,
        idAlumnoBitacora: this.form.get('alumno')?.value,
        idTipoBitacora: this.form.get('tipo')?.value,
        descripcion: this.form.get('descripcion')?.value,
        fechaBitacora: this.form.get('fecha')?.value,
      }
      console.log(data);
      this.profesorBitacoraService.editarRegistro(data).subscribe((data: any) => {
        Swal.fire('Exito!', data.mensaje, 'success');
        this.dialog.close();
      });
    } else {
      const data = {
        idMateriaBitacora: this.form.get('materia')?.value,
        idAlumnoBitacora: this.form.get('alumno')?.value,
        idTipoBitacora: this.form.get('tipo')?.value,
        descripcion: this.form.get('descripcion')?.value,
        fechaBitacora: this.form.get('fecha')?.value,
      }
      this.profesorBitacoraService.crearRegistro(data).subscribe((data: any) => {
        Swal.fire('Exito!', data.mensaje, 'success');
        this.dialog.close();
      });
    }
  }

  max() {
    this.maxCaracteres = this.form.get('descripcion')?.value.length;
  }

  limpiar() {
    if (this.data) {
      this.form.get('tipo')?.reset();
      this.form.get('descripcion')?.reset();
      this.form.get('fechaInicio')?.reset();
      this.form.get('fechaHora')?.reset();
    } else {
      this.form.reset();
      this.grupos = [];
      this.alumnos = [];
    }
  }
}

@Component({
  selector: 'app-descipcion',
  templateUrl: './descripcionBitacora.html',
  styleUrl: './registro-bitacora.component.css',
  standalone: true,
  imports: [MatDialogContent, MatDialogModule, MatIconModule]
})
export class Descripcion {
  descripcion: any;
  constructor(public dialog: MatDialogRef<Descripcion>, @Inject(MAT_DIALOG_DATA) public data: any) {
    this.descripcion = data;
  }
}