import { Component, AfterViewInit, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatDialog } from '@angular/material/dialog';
import { MatTableDataSource } from '@angular/material/table';

import { MatSnackBar } from '@angular/material/snack-bar';
import { MESMCVService } from 'src/app/services/mes/mesmcv/mesmcv.service';
import { AlertaComponent } from '../../resources/dialogos/alerta/alerta.component';
import { MESMCVFORMComponent } from './mesmcv-form/mesmcv-form.component';
import { VERSOLICITUDComponent } from '../../resources/dialogos/ver-solicitud/ver-solicitud.component';
import { MESMCVInterface } from 'src/app/interfaces/mes/mesmcv/mesmcv-interface';
import { USERInterface } from 'src/app/interfaces/user-interface';
import { ENCService } from 'src/app/services/enc/enc.service';
import { IAMService } from 'src/app/services/iam/iam.service';

@Component({
  selector: 'app-mesmcv',
  templateUrl: './mesmcv.component.html',
  styleUrls: ['./mesmcv.component.css'],
})
export class MESMCVComponent implements AfterViewInit {
  usuario_session: USERInterface = JSON.parse(
    localStorage.getItem('TIMUSERENC')!
  );

  cancelaciones: MESMCVInterface[] = [];
  isSend: boolean = false;
  loading: Boolean = true;
  data_empty = false;
  displayedColumns: string[] = [
    'IDSOLICITUD',
    'NOMBREEMPLEADO',
    'FECHAINICIO',
    'FECHAFIN',
    'NUMERODIAS',
    'accion',
  ];

  dataSource = new MatTableDataSource<MESMCVInterface>(this.cancelaciones);

  constructor(
    public dialog: MatDialog,
    private _mesmcvService: MESMCVService,
    private _encService: ENCService,
    private _snackBar: MatSnackBar,
    private _iamService: IAMService
  ) {
  }

  @ViewChild(MatPaginator) paginator!: MatPaginator;

  ngAfterViewInit() {
    this.obtener();

    this.dataSource.paginator = this.paginator;
    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';

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

  obtener() {
    this._mesmcvService
      .obtener(this._encService.desencriptar(this.usuario_session.IDUSUARIO))
      .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.dataSource.data = res.response;
        } else {
          this.snackAlert( res.response.length > 0 ? res.msg : 'No hay datos para mostrar');
          this.data_empty = true;
        }
        this.loading = 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');
        }
      });
  }

  async cancelar(item: any, motivo: String) {
    this.isSend = true;
    let id_solicitud = item.IDSOLICITUD;
    let respuesta = {
      id_solicitud: id_solicitud,
      id_usuario_cancela: this._encService.desencriptar(
        this.usuario_session.IDUSUARIO
      ),
      motivo_cancelacion: motivo,
      rfc_empresa: this.usuario_session.RFCEMPRESA
    };

    this._mesmcvService.cancelar(respuesta).subscribe(
      (res) => {
        this.isSend = false;
        if (!res.error) {
          this.ngAfterViewInit();
          this.snackAlert('¡Cancelación exitosa!');
        } 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');
        }
      }
    );
  }

  openDialogVerSolicitud(item: any) {
    let dataAction = {
      modulo: 'MESMCV',
      item: item,
    };

    this.dialog.open(VERSOLICITUDComponent, {
      data: dataAction,
    });
  }

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

  openDialogCancelar(item: any) {
    let dataAction = {
      titulo: 'Cancelación de Vacaciones',
      item: item,
    };

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

    dialogRef.afterClosed().subscribe((result) => {
      if (result) {
        this.cancelar(item, result.motivo);
      }
    });
  }

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

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