import { Component, AfterViewInit, ViewChild, Inject } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatTableDataSource } from '@angular/material/table';
import { AlertaComponent } from '../../resources/dialogos/alerta/alerta.component';
import { MatSnackBar } from '@angular/material/snack-bar';
import { MESMAVFORMComponent } from './mesmav-form/mesmav-form.component';
import { INFORMACIONSOLICITUDComponent } from '../../resources/dialogos/informacion-solicitud/informacion-solicitud.component';
import { MESMAVService } from 'src/app/services/mes/mesmav/mesmav.service';
import { MESMAVInterface } from 'src/app/interfaces/mes/mesmav/mesmav-interface';
import { ENCService } from 'src/app/services/enc/enc.service';
import { ActivatedRoute } from '@angular/router';
import { IAMService } from 'src/app/services/iam/iam.service';

@Component({
  selector: 'app-mesmav',
  templateUrl: './mesmav.component.html',
  styleUrls: ['./mesmav.component.css'],
})
export class MESMAVComponent implements AfterViewInit {
  isLoading: boolean = true;
  isSend: boolean = false;
  solicitudes: MESMAVInterface[] = [];

  displayedColumns: string[] = [
    '#',
    'no_solicitud',
    'no_empleado',
    'dias_solicitados',
    'fecha_inicio',
    'fecha_fin',
    'acciones',
  ];

  options: any = {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  };

  today = new Date().toLocaleDateString('es-MX', this.options);
  tomorrow = new Date(2022, 5, 5).toLocaleDateString('es-MX', this.options);
  solicitud_datos: string = '';
  data_empty = false;
  solicitud: any = [];

  dataSource: any;

  @ViewChild(MatPaginator) paginator!: MatPaginator;

  constructor(
    public dialog: MatDialog,
    private _snackBar: MatSnackBar,
    private _iamService: IAMService,
    private __mesmavService: MESMAVService,
    private activatedRoute: ActivatedRoute,
    private _encService: ENCService
  ) {
    this.activatedRoute.params.subscribe((params) => {
      this.solicitud_datos =
        params['solicitud_datos'] == undefined
          ? ''
          : params['solicitud_datos'].replace('data=', '');
    });
    console.log(this.solicitud_datos);
    
    if (this.solicitud_datos != '') {
      let data_dec = this._encService.desencriptar(this.solicitud_datos);
      this.solicitud = JSON.parse(data_dec);
    }
  }

  async ngAfterViewInit(): Promise<void> {
    this.obtener();
    const sleep = (ms: number) =>
      new Promise((resolve) => setTimeout(resolve, ms));
    await sleep(600);

    this.solicitudes.forEach((element: any) => {
      if (element.IDSOLICITUD == this.solicitud.id_solicitud) {
        console.log(this.solicitud);
        
        if (this.solicitud.estatus == 'Rechazado') {
          this.openDialogForm('Rechazar vacaciones', element);
        }
        if (this.solicitud.estatus == 'Aprobado') {

          this.aprobarSolicitud(element)
          //this.openDialogAprobacion(element);
        }
      }
    });
  }

  applyFilter(filterValue: any) {
    this.dataSource.filter = filterValue.target.value.trim().toLowerCase();
  }

  obtener() {
    this.__mesmavService.consultar().subscribe((res: any) => {
      
      if (res.status == 'Token is Expired') {
        this._iamService.logout();
        this.snackAlert('Sesión expirada. Vuelva a iniciar sesión');
      } else if (!res.status && res.response.length > 0) {
        this.solicitudes = res.response;
        this.data_empty = false;
        this.cargarTabla(this.solicitudes);
      } else {
        this.solicitudes = [];
        this.snackAlert( res.response.length > 0 ? res.msg : 'No hay datos para mostrar');
        this.data_empty = true;
      }
      this.isLoading = false;
    }, error => {
      if (!error.ok) {
        this.snackAlert('Ocurrió un error inesperado');
      }
      if (error.error.msg != undefined) {
        this.snackAlert(error.error.msg);
      }
      if (error.status == 408) {
        this.snackAlert('Conexion lenta');
      }
    });
  }

  cargarTabla(solicitudes: any) {
    this.isLoading = false;
    this.dataSource = new MatTableDataSource<any>(this.solicitudes);
    this.dataSource.paginator = this.paginator;

    this.dataSource.filterPredicate = function (
      data: MESMAVInterface,
      filter: string
    ): boolean {
      return (
        data.IDSOLICITUD.toString().toLowerCase().includes(filter) ||
        data.NOMBREEMPLEADO.toLowerCase().includes(filter) ||
        data.NUMERODIAS.toString().toLowerCase().includes(filter) ||
        data.FECHAINICIO.toLowerCase().includes(filter) ||
        data.FECHAFIN.toLowerCase().includes(filter)
      );
    };

    this.paginator._intl.itemsPerPageLabel = 'Datos por página';
    this.paginator._intl.firstPageLabel = 'Primera Página';
    this.paginator._intl.lastPageLabel = 'Últmina Página';
    this.paginator._intl.nextPageLabel = 'Siguiente Página';
    this.paginator._intl.previousPageLabel = 'Anterior Página';
  }

  aprobarSolicitud(solicitud: MESMAVInterface) {
    //Se esta enviando un correo
    this.isSend = true;
    //Estructura de solicitud aceptada
    let solicitud_aprobar = {
      id_solicitud: solicitud.IDSOLICITUD,
      id_usuario_autoriza: this._encService.desencriptar(
        this.__mesmavService.usuario_session.IDUSUARIO
      ),
      estatus: 'Aprobado',
      rfc_empresa: this.__mesmavService.usuario_session.RFCEMPRESA,
    };

    this.__mesmavService
      .aprobarSolicitud(solicitud_aprobar)
      .subscribe((res: any) => {
        if (!res.error) {
          this.isSend = false;
          this.removerSolicitudTabla(solicitud);
          this._snackBar
            .open('Las vacaciones fueron aprobadas con éxito', 'Cerrar', {
              duration: 3000,
            })
            .afterDismissed()
            .subscribe(() => {

              this.obtener();
              this.ngAfterViewInit();
              this.snackAlert('Se ha enviado un correo para informar al empleado');
            });
        } else {
          this.snackAlert(res.msg);
        }
      }, error => {
        if (!error.ok) {
          this.snackAlert('Ocurrió un error inesperado');
        }
        if (error.error.msg != undefined) {
          this.snackAlert(error.error.msg);
        }
        if (error.status == 408) {
          this.snackAlert('Conexion lenta');
        }
      });
  }

  rechazarSolicitud(solicitud: MESMAVInterface) {
    //Se esta enviando un correo
    this.isSend = true;
    //Rechazamos solicitud
    this.__mesmavService.rechazarSolicitud(solicitud).subscribe((res: any) => {
      //alert("Espera")
      
      if (!res.error) {
        this.isSend = false;
        
        //this.removerSolicitudTabla(solicitud);
        
         this.obtener();
        /* this.ngAfterViewInit(); */

        this._snackBar
          .open('Las vacaciones fueron rechazadas con éxito', 'Cerrar', {
            duration: 3000,
          })
          .afterDismissed()
          .subscribe(() => {
            this.snackAlert('Se ha enviado un correo para informar a los administradores');
          });

        
      } else {
        this.snackAlert(res.msg);
      }
    }, error => {
      if (!error.ok) {
        this.snackAlert('Ocurrió un error inesperado');
      }
      if (error.error.msg != undefined) {
        this.snackAlert(error.error.msg);
      }
      if (error.status == 408) {
        this.snackAlert('Conexion lenta');
      }
    });
  }

  removerSolicitudTabla(solicitud: MESMAVInterface) {
    //Obtener las solicitudes que aun no han sido aprobadas o rechazadas
    //Eliminamos fila de la tabla, obteniendo el id de la solicitud seleccionada
    let filtroSolicitudes = this.solicitudes.filter(
      (s) => s.IDSOLICITUD != solicitud.IDSOLICITUD
    );

    //Actualizamos el data de nuestro dataSource con el nuevo filtro
    this.solicitudes = filtroSolicitudes;
    this.dataSource.data = filtroSolicitudes;
  }

  openDialogAprobacion(item: MESMAVInterface) {
    let dataAction = {
      titulo: 'Aprobación de vacaciones',
      descripcion: `¿Aprobar las vacaciones del empleado ${item.NOMBREEMPLEADO}?`,
    };

    const dialogRef = this.dialog.open(AlertaComponent, {
      data: dataAction,
    });

    dialogRef.afterClosed().subscribe((result) => {
      if (result) {
        this.aprobarSolicitud(item);
      }
    });
  }

  openDialogInformacion(element: any) {
    this.dialog.open(INFORMACIONSOLICITUDComponent, {
      data: element,
    });
  }

  openDialogForm(action: String, item: any = []) {
    let dataAction = {
      action: action,
      data: item,
    };

    const dialogRef = this.dialog.open(MESMAVFORMComponent, {
      data: dataAction,
    });

    dialogRef.afterClosed().subscribe((result) => {
      if (result) {
        result.id_usuario_autoriza = this._encService.desencriptar(
          this.__mesmavService.usuario_session.IDUSUARIO
        );
        result.estatus = 'Rechazado';
        result.rfc_empresa = this.__mesmavService.usuario_session.RFCEMPRESA;
        this.rechazarSolicitud(result);
      }
    });
  }

  formatoFecha(fecha: string): string {
    let split = fecha.split('-');
    return `${split[2]}-${split[1]}-${split[0]}`;
  }

  private snackAlert(mensaje: string) {
    this._snackBar.open(mensaje, 'Cerrar', {
      duration: 4000,
    });
  }
}
