import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { Router } from '@angular/router';
import { PagoReservaService } from '../../../pago-reserva/services/pago-reserva.service';
import {MatPaginator} from '@angular/material/paginator';
import {MatSort} from '@angular/material/sort';
import {MatTableDataSource} from '@angular/material/table'

@Component({
  selector: 'app-listar',
  templateUrl: './listar.component.html',
  styleUrls: ['./listar.component.css']
})
export class ListarComponent implements OnInit{

  displayedColumns: string[] = ['id', 'monto', 'fecha', 'estado'];
  dataSource!: MatTableDataSource<any>;
  @ViewChild(MatSort) sort!: MatSort;
  @ViewChild(MatPaginator) paginator!: MatPaginator;
  @ViewChild('input') entradaFiltro: ElementRef | undefined;
  filtroInput: string = '';

  pagos: any[] = [];

  constructor(
    private router: Router,
    private pagoReservaService: PagoReservaService
  ){}

  ngOnInit(): void {
    setTimeout(() => {
      this.listarPagos();  
    }, 200);
  }

  detalles(id:number){
    this.router.navigate(['/pagos/detalles/',id ]);
  }

  listarPagos(){
    this.pagoReservaService.getPagos().subscribe(
      res => {
        this.pagos = res;
        this.dataSource = new MatTableDataSource(this.pagos);
        this.dataSource.paginator = this.paginator;  
        this.dataSource.sort = this.sort;
      }
    )
  }

  aplicarFiltro(event: Event) {
    const filterValue = this.filtroInput;
    this.dataSource.filter = filterValue.trim().toLowerCase();
    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }

  eliminarFiltros(){
    this.filtroInput = '';
    this.dataSource.filter = '';
    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }

}
