import { Component, ElementRef, EventEmitter, Inject, OnInit, Output, ViewChild } from '@angular/core';
import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';

import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';
import * as XLSX from 'xlsx';
import { EnviarInfoService } from '../../services/enviar-info.service';
import { MateriaService } from '../../services/materia.service';
import { Materia } from '../../interfaces/Materias.interface';
import { MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
import Swal from 'sweetalert2';
import { GradosEducativosService } from '../../services/grados-educativos.service';
import { GruposService } from '../../services/grupos.service';
import { CategoriasMateriasService } from '../../services/categorias-materias.service';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { forkJoin } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { ExportExcellService } from '../../services/export-excell.service';


@Component({
  selector: 'app-materias',
  templateUrl: './materias.component.html',
  styleUrl: './materias.component.css'
})
export class MateriasComponent {
  public columnas: string[] = ['claveMateria', 'categoria', 'nombreMateria', 'colorMateria', 'gradoGrupo', 'boleta', 'materia', 'mostrar', 'estado', 'acciones'];
  public dataSource: any;
  public color: string = '';
  public textColor: string = '';

  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
  @ViewChild('TABLE') table!: ElementRef;


  constructor(private _MatIconRegister: MatIconRegistry,
    private _DomSanitizer: DomSanitizer,
    private paginatorIntl: MatPaginatorIntl,
    private _enviarInfo: EnviarInfoService,
    private materiaService: MateriaService,
    public http:HttpClient,
    public dialog: MatDialog,
    private exportExcell : ExportExcellService,
  ) {
    this._MatIconRegister.addSvgIcon('excel', this._DomSanitizer.bypassSecurityTrustResourceUrl('assets/icons/excel.svg'));

    //paginador de tabla en español
    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.paginatorIntl.nextPageLabel = "Siguiente";
    this.paginatorIntl.previousPageLabel = "Anterior";
    this.paginatorIntl.firstPageLabel = "Ir a la primer página";
    this.paginatorIntl.lastPageLabel = "Ir a la última página";
    this.paginatorIntl.itemsPerPageLabel = "Registros por página";
    this.paginatorIntl.getRangeLabel = spanishRangeLabel;
  }

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

    this._enviarInfo.tabla$.subscribe(() => {
      this.getMaterias();
    });

    this.getMaterias()
  }
  public allInfo: any;
  getMaterias() {
    return this.materiaService.getAllMaterias().subscribe((response: any) => {
      this.isLoading = false;
      this.allInfo = response
      this.dataSource = new MatTableDataSource<Materia>(this.allInfo.filter((filtro:any) => filtro.estado === 'Activo'));
      this.dataSource.paginator = this.paginator;
      return response;
    })
  }

  //filtro de búsqueda
  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }

  public isLoading: boolean = true;
  option(event: string) {
    this.isLoading = true;
    let filteredData: any;

    if (event === 'Activos') {
      filteredData = this.allInfo.filter((filtro:any) => filtro.estado === 'Activo');
    } else if (event === 'Eliminados') {
      filteredData = this.allInfo.filter((filtro:any) => filtro.estado === 'Eliminado');
    }

    this.dataSource = new MatTableDataSource<Materia>(filteredData);
    this.dataSource.paginator = this.paginator;
    this.isLoading = false;
  }


  exportarTodo() {
    this.exportExcell.exportAll('materias');
  }

private nombreArchivo(tabla: string): string {
  switch (tabla) {
    case 'niveles': return 'Niveles_Educativos';
    case 'materias_categorias': return 'Categorias_Materias';
    case 'materias': return 'materias';
    case 'grados': return 'vista_grados_niveles';
    case 'grupos': return 'Grupos';
    case 'usuarios': return 'Usuarios';
    case 'tipos_tareas': return 'Tipos_Tareas';
    default: return 'Reporte';
  }
}
  deleteGrupo(id: string) {

    Swal.fire({
      icon: 'question',
      title: '¿Desea cambiar el estado del grupo?',
      showCancelButton: true,
      allowEscapeKey: false,
      allowOutsideClick: false,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: "Eliminar",
    }).then((result: any) => {
      /* Read more about isConfirmed, isDenied below */
      if (result.isConfirmed) {
        this.materiaService.eliminarMateria(id).subscribe((response: any) => {
          Swal.fire({
            icon: 'success',
            title: 'Materia deshabilitada',
            confirmButtonColor: 'rgb(237,46,56)',
            confirmButtonText: 'Ok',
          }).then((result: any) => {

            if (result.isConfirmed) {
              this.ngOnInit();
              Swal.close();
            }
          })
        }, (err) => {
          Swal.fire({
            icon: 'error',
            title: 'Error al eliminar',
            text: `${err.error.mensaje}`,
          })
          this.ngOnInit();
        }
        )
      } else if (result.dismiss == 'cancel') {
        this.ngOnInit();
      }
    });

  }

  enableGrupo(id: string) {
    Swal.fire({
      icon: 'question',
      title: '¿Desea habilitar el grado?',
      showCancelButton: true,
      allowEscapeKey: false,
      allowOutsideClick: false,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: "Habilitar",
    }).then((result: any) => {

      if (result.value) {
        this.materiaService.habilitarMateria(id).subscribe((response: any) => {
          Swal.fire({
            icon: 'success',
            title: 'Materia habilitada',
            confirmButtonColor: 'rgb(237,46,56)',
            confirmButtonText: 'Ok',
          }).then((result: any) => {
            if (result.isConfirmed) {
              Swal.close();
              this.ngOnInit();
            }
          })
        }, (err) => {
          Swal.fire({
            icon: 'error',
            title: 'Error al habilitar',
            text: `${err.error.mensaje}`,
          })
        }
        )
      } else if (result.dismiss == 'cancel') {
        this.ngOnInit();
      }
    });
  }

  openDialog(materia: string) {
    const dialogRef = this.dialog.open(ModalMateriasEdit, {
      autoFocus: false,
      data: materia
    });

    //esto es para actualizar la tabla una vez actualizada la info
    dialogRef.componentInstance.nivelActualizado.subscribe(() => {
      this.getMaterias();
    });
  }

}

@Component({
  selector: 'dialog-content-example-dialog',
  templateUrl: './editar.component.html',
  styleUrl: './materias.component.css'

})
export class ModalMateriasEdit {
  public color1: string = '';
  public todos: any;
  public catData: any;
  public isLoading: boolean = true;

  public afectaBoleta: boolean = false;
  public materiaAcademica: boolean = false;
  public mostrarMateria: boolean = false;
  @Output() nivelActualizado = new EventEmitter<void>();
  constructor(
    private gradosService: GradosEducativosService,
    private gruposService: GruposService,
    private categoriasService: CategoriasMateriasService,
    private materiaService: MateriaService,
    private _enviarInfoService: EnviarInfoService,
    public dialog: MatDialog,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {
    this.setData();
    this.gradosGrupos();
    this.categorias();

  }

  gradosGrupos() {
    forkJoin({
      grados: this.gradosService.getHabilitados(),
      grupos: this.gruposService.getHabilitados()
    }).subscribe(({ grados, grupos }: any) => {
      this.todos = grados.concat(grupos);
    });
  }

  categorias() {
    return this.categoriasService.getHabilitados().subscribe((response) => {
      this.catData = response
    })
  }

  public form = new FormGroup({
    idMateria: new FormControl<string>({ value: '', disabled: true }),
    nombreMateria: new FormControl<string>('', Validators.required),
    colorCurso: new FormControl<string>('', Validators.required),
    idGradoGrupoRelacionado: new FormControl<string>('', Validators.required),
    categoria: new FormControl<string>('', Validators.required),
    afectaBoleta: new FormControl<boolean>(false, Validators.required),
    materiaAcademica: new FormControl<boolean>(false, Validators.required),
    mostrarMateria: new FormControl<boolean>(false, Validators.required),
  });

  setData() {


        this.color1 = this.data.colorCurso


        this.data.afectaBoleta == 'Si' ? this.afectaBoleta = true : this.afectaBoleta = false;
        this.data.materiaAcademica == 'Si' ? this.materiaAcademica = true : this.materiaAcademica = false;
        this.data.mostrarMateria == 'Si' ? this.mostrarMateria = true : this.mostrarMateria = false;

        // mostrar data en el formulario
        this.form.controls['idMateria'].setValue(this.data.idMateria);
        this.form.controls['nombreMateria'].setValue(this.data.nombreMateria);
        this.form.controls['colorCurso'].setValue(this.data.colorCurso);
        this.form.controls['idGradoGrupoRelacionado'].setValue(this.data.idGradoGrupoRelacionado);
        this.form.controls['categoria'].setValue(this.data.categoria);
        this.form.controls['afectaBoleta'].setValue(this.afectaBoleta);
        this.form.controls['materiaAcademica'].setValue(this.materiaAcademica);
        this.form.controls['mostrarMateria'].setValue(this.mostrarMateria);

  }


  get currentMateria(): Materia {
    return this.form.value as Materia;
  }

  transformMateria(materia: Materia): any {
    return {
      id: this.data.idMateria,
      ...materia,
      afectaBoleta: materia.afectaBoleta ? 'Si' : 'No',
      materiaAcademica: materia.materiaAcademica ? 'Si' : 'No',
      mostrarMateria: materia.mostrarMateria ? 'Si' : 'No',
    };
  }


  editarMateria() {
    const materia = this.currentMateria;
    const transformedMateria = this.transformMateria(materia);

    return this.materiaService.actualizarMateria(transformedMateria).subscribe((response: any) => {
      Swal.fire({
        icon: 'success',
        title: `${response.mensaje}`
      })

      this.dialog.closeAll();
      this.nivelActualizado.emit();
      //envía la actualización al servicio
    }, (err) => {
      Swal.fire({
        icon: 'error',
        title: `${err.mensaje}`
      })
    })
  }


}
