import { AsyncPipe, CommonModule } from '@angular/common';
import { AfterViewInit, Component, Inject, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose, MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIcon, MatIconRegistry } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
import { MatSelectModule } from '@angular/material/select';
import { MatSnackBar } from '@angular/material/snack-bar';
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
import { DomSanitizer } from '@angular/platform-browser';
import Swal from 'sweetalert2';
import * as XLSX from 'xlsx';
import { animate, state, style, transition, trigger } from '@angular/animations';
import { MatTooltip } from '@angular/material/tooltip';
import { EnviarInfoService } from '../../../services/enviar-info.service';
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
import { PersonalizarService } from '../../../services/personalizar.service';
import { RelacionarProfesoresService } from '../../../services/relacionarProfesores.service';
import { HttpClient } from '@angular/common/http';
import { ExportExcellService } from '../../../services/export-excell.service';



@Component({
  selector: 'app-profesor-materias',
  templateUrl: './profesor-materias.component.html',
  styleUrl: './profesor-materias.component.css',
  animations: [
    trigger('detailExpand', [
      state('collapsed,void', style({ height: '0px', minHeight: '0' })),
      state('expanded', style({ height: '*' })),
      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
    ]),
  ],
})
export class ProfesorMateriasComponent implements OnInit, AfterViewInit {
  displayedColumns: string[] = ['id', 'nombre', 'materia', 'grupo', 'acciones'];
  expandedElement!: any | null;
  dataSource = new MatTableDataSource<any>([]);
  registros: any;
  arrchecked: any[] = [];
  optionFile: string = '';
  color: string = '';
  textColor: string = '';
  durationInSeconds = 5;
  Auxgrupos: any[] = [];
  Auxmaterias: any[] = [];
  evento: number = 1;
  auxMateria: any[] = [];
  grupos: any;
  materias: any;
  isLoading: boolean = true;
  AuxElminarRelacion: any[] = [];

  @ViewChild(MatPaginator) paginator!: MatPaginator;

  constructor(private _MatIconRegister: MatIconRegistry, private _DomSanitizer: DomSanitizer, public matDialog: MatDialog, private _snackBar: MatSnackBar,
    public http:HttpClient,
       private exportExcell : ExportExcellService,

    private paginator1: MatPaginatorIntl, private _enviarInfo: EnviarInfoService, private _relacionarProfesor: RelacionarProfesoresService) {
    this._MatIconRegister.addSvgIcon('excel', this._DomSanitizer.bypassSecurityTrustResourceUrl('assets/icons/excel.svg'));
    this._MatIconRegister.addSvgIcon('libros', this._DomSanitizer.bypassSecurityTrustResourceUrl('assets/icons/libros.svg'));
    this._MatIconRegister.addSvgIcon('Grupo', this._DomSanitizer.bypassSecurityTrustResourceUrl('assets/icons/Grupo.svg'));
    const spanishRangeLabel = (page: number, pageSize: number, length: number): string => {
      if (length === 0 || pageSize === 0) {
        return `0 de ${length}`;
      }
      length = Math.max(length, 0);
      const startIndex = page * pageSize;
      const endIndex = startIndex < length ?
        Math.min(startIndex + pageSize, length) :
        startIndex + pageSize;
      return `${startIndex + 1} - ${endIndex} de ${length}`;
    };
    this.paginator1.nextPageLabel = "Siguiente";
    this.paginator1.previousPageLabel = "Anterior";
    this.paginator1.firstPageLabel = "Ir a la primer página";
    this.paginator1.lastPageLabel = "Ir a la última página";
    this.paginator1.itemsPerPageLabel = "Registros por página";
    this.paginator1.getRangeLabel = spanishRangeLabel;
  }
  getProfesores() {
    this._relacionarProfesor.getProfesores().subscribe((data: any) => {
      this.isLoading = false;
      this.registros = data.profesores;
      this.dataSource = new MatTableDataSource(this.registros);
      this.dataSource.paginator = this.paginator;
      this.todos(this.optionFile);
    });
  }

  ngAfterViewInit(): void {
    this.dataSource.paginator = this.paginator;
  }
  ngOnInit(): void {
    this._enviarInfo.currentTextColor.subscribe(textColor => {
      this.textColor = textColor;
    });
    this._enviarInfo.currentColor.subscribe(color => {
      this.color = color;
    });
    this.getProfesores();
    this._relacionarProfesor.dataUpdated$.subscribe(() => {
      this.getProfesores();
    });
  }
    exportarTodo() {
    this.exportExcell.exportAll('profesor');
  }
  // Exportar a PDF
  openPDF() {
    const PDF = this.matDialog.open(PdfProfesor, {
      data: this.dataSource.data,
    });
  }

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value.trim().toLowerCase();

    this.dataSource.filterPredicate = (data: any, filter: string) => {
      const matchNombreProfesor = data.nombreProfesor?.toLowerCase().includes(filter);
      const matchIdUsuario = data.idUsuario?.toLowerCase().includes(filter);
      const matchTipoUsuario = data.tipoUsuario?.toLowerCase().includes(filter);

      const matchNombreMateria = data.nombreMaterias?.some((materia: any) =>
        materia.nombreMateria.toLowerCase().includes(filter)
      );

      const matchNombreGrupo = data.nombreGrupos?.some((grupo: any) =>
        grupo.nombreGrupo.toLowerCase().includes(filter)
      );

      return (
        matchNombreProfesor ||
        matchIdUsuario ||
        matchTipoUsuario ||
        matchNombreMateria ||
        matchNombreGrupo
      );
    };

    this.dataSource.filter = filterValue;

    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }


  seleccion(dato: any) {
    if (dato === this.arrchecked.find((element: any) => element === dato)) {
      this.arrchecked.splice(this.arrchecked.indexOf(dato), 1);
    } else {
      this.arrchecked.push(dato);
    }
  }

  openEditarProfesor(registro: any) {
    const editarProfesor = this.matDialog.open(EditarProfesor, {
      data: { id: registro.idUsuario, nombre: registro.nombreProfesor, materia: registro.nombreMaterias, grupo: registro.nombreGrupos },
    });
    editarProfesor.afterClosed().subscribe(result => {
      if (result) {
        for (let i = 0; i < result.length; i++) {
          if (result[i].id != '') {
            this._relacionarProfesor.RelacionarProfesor(result[i]).subscribe((data: any) => {
            });
          }
        }
        this.isLoading = true;
      }
    });

  }

  OpenDatos(data: any) {
    this.auxMateria = [];
    data.materia = data.nombreMaterias;
    data.grupo = data.nombreGrupos;
    if (data.materia.length > 0) {
      if (data.grupo.length > 0) {
        for (let i = 0; i < data.grupo.length; i++) {
          let materiaNombre = data.grupo[i].nombreMateria;
          let grupo = data.grupo[i].nombreGrupo;
          let colorMateria = data.grupo[i].colorMateria;
          let materiaIndex = this.auxMateria.findIndex(item => item.materia === materiaNombre);
          if (materiaIndex !== -1) {
            this.auxMateria[materiaIndex].grupos.push(grupo);
          } else {
            this.auxMateria.push({
              materia: materiaNombre,
              color: colorMateria,
              grupos: [grupo]
            });
          }
        }
      }
    }
    data.materia = this.filterEmptyAndUnique(data.materia);
    data.grupo = this.filterEmptyAndUnique(data.grupo);
  }

  filterEmptyAndUnique(array: any[]): any[] {
    const filteredArray = array.filter(item => item !== '' && item !== undefined && item !== null);
    return [...new Set(filteredArray)];
  }

  todos(event: any) {
    this.evento = event;
    if (event == 1) {
      this.dataSource = new MatTableDataSource(this.registros);
    } else if (event == 2) {
      this.dataSource = new MatTableDataSource(this.registros.filter((registro: any) => registro.nombreMaterias.length > 0));
    } else if (event == 3) {
      this.dataSource = new MatTableDataSource(this.registros.filter((registro: any) => registro.nombreMaterias.length == 0));
    }
    this.optionFile = event;
    this.dataSource.paginator = this.paginator;
  }

  eliminarRegistro(data: any) {
    for (let i = 0; i < data.nombreGrupos.length; i++) {
      this.AuxElminarRelacion.push({
        id: data.idUsuario,
        idMateria: data.nombreGrupos[i].idMateria,
        idGrupo: data.nombreGrupos[i].idGradoGrupoRelacionado,
      });
    }
    Swal.fire({
      title: '¿Estas seguro que quieres todas las relaciones de este registro?',
      text: 'No podras recuperarlo',
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Si, eliminar',
      cancelButtonText: 'Cancelar'
    }).then((result) => {
      if (result.isConfirmed) {
        for (let i = 0; i < this.AuxElminarRelacion.length; i++) {
          this._relacionarProfesor.EliminarRelacion(this.AuxElminarRelacion[i]).subscribe((data: any) => {
          });
        }
        Swal.fire('Eliminado!', 'Se eliminaron todas las relaciones del profesor', 'success');
        this.isLoading = true;
      }
    });
  }
}

@Component({
  selector: 'app-editar-profesor',
  templateUrl: './editarProfesor.html',
  styleUrls: ['./profesor-materias.component.css'],
  standalone: true,
  imports: [MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose, MatButtonModule, MatFormFieldModule, MatInputModule, MatIcon,
    MatCheckboxModule, MatSelectModule, ReactiveFormsModule, MatAutocompleteModule, AsyncPipe, CommonModule, MatTableModule, MatTooltip
  ]
})
export class EditarProfesor {
  displayedColumns: string[] = ['Materia', 'Grupo', 'Acciones'];
  dataSource!: MatTableDataSource<any>;
  relacionar: any[] = [];
  materias: any[] = [];
  grupos: any[] = [];
  form!: FormGroup;
  registro: any;
  strTitulo1: string = 'Agregar Relación';
  AuxEliminar: any[] = [];

  constructor(private fb: FormBuilder, public dialogRef: MatDialogRef<EditarProfesor>, @Inject(MAT_DIALOG_DATA) public data: any,
    private _getMateriaGrupos: RelacionarProfesoresService) {
    this.dataSource = new MatTableDataSource(this.relacionar);
    this.registro = data;
    this.cargarFormulario();
    this.getMaterias();
  }

  cargarFormulario() {
    this.form = this.fb.group({
      materia: ['', Validators.required],
      grupo: ['', Validators.required],
    });
  }

  ngOnInit(): void {
    if (this.registro.materia.length > 0) {
      this.strTitulo1 = 'Actualizar / Agregar';
      if (this.registro.grupo.length > 0) {
        for (let i = 0; i < this.registro.grupo.length; i++) {
          this.relacionar.push({
            id: this.registro.id,
            materia: this.registro.grupo[i].nombreMateria,
            idMateria: this.registro.grupo[i].idMateria,
            grupo: this.registro.grupo[i].nombreGrupo,
            idGrupo: this.registro.grupo[i].idGradoGrupoRelacionado,
          });
        }
      }
    }
  }

  getMaterias() {
    this._getMateriaGrupos.getMateriasGrupos().subscribe((data: any) => {
      this.materias = data.materias.map((materia: any) => {
        return { name: materia.nombreMateria, color: materia.colorMateria, grupos: materia.gradoGrupo };
      });
    });
  }

  isValidField(field: string) {
    return this.form.controls[field].errors && this.form.controls[field].touched;
  }

  setMateria(materia: any): void {
    this.form.get('materia')?.setValue(materia.name);
  }

  setGrupo(grupo: any): void {
    this.form.get('grupo')?.setValue(grupo);
  }

  Opciones(event: any) {
    this.grupos = [];
    if (event.name == this.materias.find((item: any) => item.name === event.name)?.name) {
      for (let i = 0; i < this.materias.length; i++) {
        if (this.materias[i].name === event.name) {
          this.grupos = this.materias[i].grupos;
        }
      }
    }
  }

  Agregar() {
    if (this.form.invalid) {
      this.form.markAllAsTouched();
      return;
    }
    if (this.form.value.materia.name === '' || this.form.value.grupo.name === '') {
      return;
    } else {
      let auxBuscar = '';
      auxBuscar = this.relacionar.find((item: any) => item.materia == this.form.value.materia.name && item.grupo == this.form.value.grupo.gradoGrupo);
      if (auxBuscar == undefined) {
        this.relacionar.push({
          id: this.data.id,
          materia: this.form.value.materia ? this.form.value.materia.name : '',
          idMateria: this.form.value.grupo.idMateria ? this.form.value.grupo.idMateria : '',
          grupo: this.form.value.grupo.gradoGrupo ? this.form.value.grupo.gradoGrupo : '',
          idGrupo: this.form.value.grupo.idGradoGrupo ? this.form.value.grupo.idGradoGrupo : '',
        });
      } else {
        Swal.fire(
          'Error',
          'El registro ya existe',
          'error'
        );
      }
      this.dataSource.data = this.relacionar;
      this.form.get('grupo')?.reset();
      this.form.get('grupo')?.setValue({ name: '', gradoGrupo: '' });
    }
  }

  eliminarRelacion(registro: any) {
    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!',
      cancelButtonText: 'Cancelar'
    }).then((result) => {
      if (result.isConfirmed) {
        let index = this.dataSource.data.findIndex((data: any) => data === registro);
        if (index !== -1) {
          this.AuxEliminar.push(this.dataSource.data[index]);
          this.relacionar.splice(index, 1);
          this.dataSource.data = [...this.relacionar];
        }
      }
    });
  }
  onSave() {
    for (let i = 0; i < this.AuxEliminar.length; i++) {
      if (this.AuxEliminar[i].id != '') {
        this._getMateriaGrupos.EliminarRelacion(this.AuxEliminar[i]).subscribe((data: any) => {
        });
      }
    }
    if (this.data.materia.length == 0) {
      if (this.relacionar.length > 0) {
        Swal.fire(
          'Profesor Relacionado',
          'El registro ha sido relacionado correctamente',
          'success'
        );
        this.dialogRef.close(this.dataSource.data);
      }
    } else {
      this.dialogRef.close(this.dataSource.data);
      Swal.fire(
        'Profesor Actualizado',
        'El registro ha sido Actualizado correctamente',
        'success'
      );
    }
  }

  limpiar() {
    this.Opciones('');
    this.form.get('materia')?.reset();
    this.form.get('grupo')?.reset();
    this.form.get('grupo')?.setValue('');
    this.form.get('materia')?.setValue('');
  }
}

@Component({
  selector: 'app-PDF-profesor',
  templateUrl: './PDFProfesor.html',
  styleUrls: ['./PDF.css'],
  standalone: true,
  imports: [MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose, MatButtonModule, MatFormFieldModule, MatInputModule, MatIcon,
    MatCheckboxModule, MatSelectModule, ReactiveFormsModule, MatAutocompleteModule, AsyncPipe, CommonModule, MatTableModule, MatTooltip, MatPaginator,
  ]
})
export class PdfProfesor {
  dataSource!: MatTableDataSource<any>;
  displayedColumns: string[] = ['id', 'nombre', 'materia', 'grupo'];
  registros: any;
  logo: string = '';
  @ViewChild(MatPaginator) paginator!: MatPaginator;
  constructor(public dialogRef: MatDialogRef<EditarProfesor>, @Inject(MAT_DIALOG_DATA) public data: any, private _infoPersonalizar: PersonalizarService) {
    this.registros = data;
    this.dataSource = new MatTableDataSource(this.registros);
    this.getLogo();
  }
  getLogo() {
    this._infoPersonalizar.getOptions().subscribe((data: any) => {
      this.logo = data.personalizacion.PERLOGO;
    });
  }

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

  downloadPDF() {
    const DATA = document.getElementById('Impresion') as HTMLElement;
    const doc = new jsPDF('p', 'pt', 'a4');
    const options = {
      background: 'white',
      scale: 2,
      UseCORS: true
    };
    const spinner = document.getElementById('spinner') as HTMLElement;
    spinner.style.display = 'block';
    html2canvas(DATA, options).then((canvas) => {
      const img = canvas.toDataURL('image/jpeg', 0.8);
      const bufferX = 0;
      const bufferY = 0;
      const imgProps = (doc as any).getImageProperties(img);
      const pdfWidth = doc.internal.pageSize.getWidth() - 2 * bufferX;
      const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
      doc.addImage(img, 'PNG', bufferX, bufferY, pdfWidth, pdfHeight, undefined, 'NONE');
      doc.save(`${new Date().toISOString()}.Profesor.pdf`);

      spinner.style.display = 'none';
    });
  }
}
