import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material';
import { ActivatedRoute, Router } from '@angular/router';
import {ApiService} from '../../../../../core/api/api.service';
import {LayoutUtilsService, MessageType} from '../../../../../core/_base/crud';
import { EstadosServicio } from '../estados-servicio.model';

@Component({
  selector: 'kt-estados-servicio-list',
  templateUrl: './estados-servicio-list.component.html',
  styleUrls: ['./estados-servicio-list.component.scss']
})
export class EstadosServicioListComponent implements OnInit {

 //Search
 lastLength = 0;
 typingTimer;
 typingInterval = 700;

 displayedColumns: string[] = ['nombre', 'fecha', 'actions'];
 dataSourceEstadosServicio: MatTableDataSource<EstadosServicio>;

 //Loadings
 isLoading = true;
 showMessageWait = true;

 //Paginator, Searcher
 searchText: string;
 sortBy = 'nombre';
 order = 'asc';
 page = '1';
 perPage = '10';
 total = 0;
 pages = [10, 25, 50, 100];
 titulo = 'Estados de Servicio';

 constructor(private api: ApiService,
       private router: Router,
       private layoutUtilsService: LayoutUtilsService,
       private activatedRoute: ActivatedRoute,
       private ref: ChangeDetectorRef) {
   this.dataSourceEstadosServicio = new MatTableDataSource<EstadosServicio>();
 }

 ngOnInit() {
 }

 getEstadosServicio(){
   this.isLoading = true;
   this.api.estadosServicio.index(this.page, this.searchText, this.sortBy, this.order, this.perPage).subscribe(res =>{
     this.isLoading = false;
     this.showMessageWait = false;
     this.dataSourceEstadosServicio.data = res.data;
     this.total = res.total;
     this.ref.detectChanges();
   }, ()=>{
     this.isLoading = false;
     this.showMessageWait = false;
   })
 }

 //Search
 filtrarBusqueda(filterValue: string) {
   if (filterValue.length != 0) {
     this.searchText = filterValue.trim().toLowerCase();
     this.getEstadosServicio();
   } else if (this.lastLength != 0) {
     this.searchText = '';
     this.getEstadosServicio();
   }

   this.lastLength = filterValue.length;
 }

 onKeyUp(ev) {
   clearTimeout(this.typingTimer);
   this.typingTimer = setTimeout(() => {
     this.filtrarBusqueda(ev.target.value)
   }, this.typingInterval);
 }

 onKeyDown() {
   this.showMessageWait = true;
   this.dataSourceEstadosServicio.data = [];
   clearTimeout(this.typingTimer);
 }//Fin search

 editEstadoServicio(id) {
   this.router.navigate(['../estatus_servicios/edit/', id], {relativeTo: this.activatedRoute})
 }

 deleteEstadoServicio(estadoServicio) {
   let title = 'Eliminar  estado de servicio';
   let name = (estadoServicio.nombre) ? estadoServicio.nombre : '';
   let description = '¿Está seguro de eliminar el estado de servicio ' + name + '?';
   let waitDesciption = 'Eliminando estado de servicio...';
   let deleteMessage = `El estado de servicio ha sido eliminado con éxito`;
   let errorMessage = `El estado de servicio no se ha podido eliminar`;

   let dialogRef = this.layoutUtilsService.deleteElement(title, description, waitDesciption);
   dialogRef.afterClosed().subscribe(res => {
     if (!res) {
       return;
     }
     this.api.estadosServicio.delete(estadoServicio.id).subscribe(() => {
       this.getEstadosServicio();
       this.layoutUtilsService.showActionNotification(deleteMessage, MessageType.Delete);
     }, () => {
       this.layoutUtilsService.showActionNotification(errorMessage, MessageType.Delete);
     });
   });

 }

 sort(event) {
   this.order = event.direction;
   this.sortBy = event.active;
   this.getEstadosServicio();
 }

 paginator(event) {
   let nextPage = event.pageIndex + 1;
   this.page = nextPage.toString();
   this.perPage = event.pageSize.toString();
   this.getEstadosServicio();
 }

 ngAfterViewInit(): void {
   this.getEstadosServicio();
 }

}
