import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MatTableDataSource } from '@angular/material/table';
import { ConfigOrderComponent } from './config-order/config-order.component';
import { GroupOrderComponent } from './group-order/group-order.component';
import { InfoOrderComponent } from './info-order/info-order.component';
import { InfoProviderComponent } from './info-provider/info-provider.component';

const DATA_EXAMPLE: Array<any> = [
  {
    idPedido: '000000001',
    proveedor: 'Walmart',
    despacho: 'Despacho Observatorio',
    metodo: 'Crédito',
    fechaModificacion: '10/11/2022 T04:54:35',
    estado: 'Activo'
  },
  {
    idPedido: '000000002',
    proveedor: 'Solery & Palau',
    despacho: 'Despacho Tacubaya',
    metodo: 'Crédito',
    fechaModificacion: '16/11/2022 T10:41:11',
    estado: 'Activo'
  },
  {
    idPedido: '000000003',
    proveedor: 'Timken',
    despacho: 'Desapacho Isabel La Católica',
    metodo: 'Débido',
    fechaModificacion: '24/11/2022 T21:00:35',
    estado: 'Activo'
  }
];


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

  public displayedColumns: string[] = [
    'ITEM1',
    'ITEM2',
    'ITEM3',
    'ITEM4',
    'ITEM5',
    'ESTADO',
    'ACCIONES',
  ];

  // ---- Loading Data ----
  public isLoading: boolean = false;
  public isLoadingForm: boolean = false;

  // ---- SmartPage ----
  public btnSmall: boolean = false;
  public txtBuscador:string;


  // ---- Tabla ----
  public dataSource: MatTableDataSource<any> ;

  constructor(
    public dialog: MatDialog,
  ) {
    this.txtBuscador = '';
    this.dataSource = new MatTableDataSource<any>(DATA_EXAMPLE);
  }

  ngOnInit(): void {
    this.onResize();
  }

  public openForm() {
    // const dialogRef = this.dialog.open(ConfigOrderComponent, {

  }

  public viewDetails() {
    const dialogRef = this.dialog.open(InfoOrderComponent, {
      width: '1000px',
      disableClose: true,
    });
    dialogRef.afterClosed().subscribe((result) => {

    });
  }

  public viewDetailsProvider() {
    const dialogRef = this.dialog.open(InfoProviderComponent, {
      width: '400px',
      disableClose: true,
    });
    dialogRef.afterClosed().subscribe((result) => {

    });
  }

  public openDialog(action: string, data: any = null) {
    if (action === 'PROV') {
      const dialogRef = this.dialog.open(InfoProviderComponent, {
        width: '400px',
        disableClose: true,
      });
    }
  }


  // Método de filtrado de datos
  public applyFilter(event: any, type: string):void {
    let filterValue:string;
    if (type == 'INP') {
      filterValue = (event.target as HTMLInputElement).value;
    }else{
      this.txtBuscador = event;
      filterValue = event;
    }
    this.dataSource.filter = filterValue.trim().toLowerCase();
    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }

  // Método para reajustar los botones según sus dimensiones
  public onResize():void {
    this.btnSmall = window.innerWidth <= 1405;
  }

}
