import { DomSanitizer } from '@angular/platform-browser';
import { MatTableDataSource } from '@angular/material/table';
import { Component, Inject, ViewChild } from '@angular/core';
import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
import { Router } from '@angular/router';
import { MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
import { BitacoraService } from '../../Administrador/services/bitacora.service';
import moment from 'moment';

@Component({
  selector: 'app-bitagora',
  templateUrl: './bitagora.component.html',
  styleUrl: './bitagora.component.css'
})
export class BitagoraComponent {
  private userData = JSON.parse(localStorage.getItem('userDataS') ? localStorage.getItem('userDataS') || '' : localStorage.getItem('userData') || '');
  public isLoading: boolean = true;

  public color: string = '#e89a20';
  public textColor: string = '#ffffff';
  public filtro: string = 'Activos';
  public inputValue: string = '';

  public mensajeBienvenida: string = '';
  public currentDate = new Date();
  public currentYear: any;
  public currentMonth: any;
  public simulado: boolean = false;
  public today: any;
  public columnasBitacoras: string[] = ['materia', 'tipo', 'descripcion', 'fechaPublicacion', 'acciones'];
  public dataSourceBitacoras = new MatTableDataSource<any>();
  public primerColorTitulos: string = '';


  @ViewChild('paginadorBit') paginatorBit!: MatPaginator;

  constructor(
    private paginator: MatPaginatorIntl,
    private router: Router,
    public dialog: MatDialog,
    public bitacoraService: BitacoraService,
    private sanitizer: DomSanitizer
  ) {
    const spanishRangeLabel = (page: number, pageSize: number, length: number): string => {
      if (length === 0 || pageSize === 0) return `0 de ${length}`;
      const startIndex = page * pageSize;
      const endIndex = Math.min(startIndex + pageSize, length);
      return `${startIndex + 1} - ${endIndex} de ${length}`;
    };
    this.paginator.nextPageLabel = "Siguiente";
    this.paginator.previousPageLabel = "Anterior";
    this.paginator.firstPageLabel = "Ir a la primer página";
    this.paginator.lastPageLabel = "Ir a la última página";
    this.paginator.itemsPerPageLabel = "Registros por página";
    this.paginator.getRangeLabel = spanishRangeLabel;

    if (localStorage.getItem('userDataS')) {
      this.simulado = true;
    }
  }

  ngOnInit() {
    this.obtenerBitacoras();
  }

  ngAfterViewInit(): void {
    this.dataSourceBitacoras.paginator = this.paginatorBit;
  }

  obtenerBitacoras() {
    return this.bitacoraService.getByUser(this.userData[0]).subscribe((response: any) => {
      this.isLoading = false;
      this.dataSourceBitacoras = new MatTableDataSource<any>(response.filter((filtro: any) => filtro.estado === 'Activo'));
      this.dataSourceBitacoras.paginator = this.paginatorBit;

      response.forEach((item: any) => {
        if (typeof item.jsonAdjuntos === 'string') {
          item.jsonAdjuntos = JSON.parse(item.jsonAdjuntos);
        }
        if (!Array.isArray(item.jsonAdjuntos)) {
          item.jsonAdjuntos = [];
        }
      });

      return response;
    });
  }


  openDialog(bitacora: any) {
    console.log(bitacora);
    this.dialog.open(BitacoraAlumComponent, {
      data: {
        materia: bitacora.idMateriaBitacora,
        descripcion: this.sanitizer.bypassSecurityTrustHtml(bitacora.descripcionBitacora),
        tipo: bitacora.idTipoBitacora,
        fecha: bitacora.fechaPublicacion
      }
    });

    if (!this.simulado) {
      this.bitacoraService.verBitacora({
        idBitacora: bitacora.idBitacora,
        idUsuario: this.userData[0]
      }).subscribe();
    }
  }
  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value.trim().toLowerCase();
    this.dataSourceBitacoras.filter = filterValue;
  }

  // Método para filtrar por estado
  option(value: string) {
    this.filtro = value;
    this.obtenerBitacoras();
  }
}

@Component({
  selector: 'app-bitacora-alum',
  template: `
    <h2 mat-dialog-title>Detalles de Bitácora</h2>
    <mat-dialog-content>
      <p><strong>Materia:</strong> {{ data.materia }}</p>
      <p><strong>Tipo:</strong> {{ data.tipo }}</p>
      <p><strong>Fecha:</strong> {{ data.fecha }}</p>
      <div [innerHTML]="data.descripcion"></div>
    </mat-dialog-content>
    <mat-dialog-actions align="end">
      <button mat-button mat-dialog-close>Cerrar</button>
    </mat-dialog-actions>
  `
})
export class BitacoraAlumComponent {
  constructor(@Inject(MAT_DIALOG_DATA) public data: any) { }
}

