import { Component, ElementRef, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { BehaviorSubject, fromEvent, merge, Observable, Subject } from 'rxjs';

import { fuseAnimations } from 'src/@fuse/animations';
import { FuseUtils } from 'src/@fuse/utils';


@Component({
  selector: 'app-mini-game-settings',
  templateUrl: './mini-game-settings.component.html',
  styleUrls: ['./mini-game-settings.component.scss'],
  animations: fuseAnimations,
  encapsulation: ViewEncapsulation.None
})
export class MiniGameSettingsComponent implements OnInit, OnDestroy {

  displayedColumns = ['id', 'reference', 'customer', 'total', 'payment', 'status', 'date'];

  @ViewChild(MatPaginator, { static: true })
  paginator: MatPaginator;

  @ViewChild('filter', { static: true })
  filter: ElementRef;

  @ViewChild(MatSort, { static: true })
  sort: MatSort;

  // Private
  private _unsubscribeAll: Subject<any>;

  constructor() {
    this._unsubscribeAll = new Subject();
  }

  ngOnInit() {
    fromEvent(this.filter.nativeElement, 'keyup')
      .pipe(
        // takeUntil(this._unsubscribeAll),
        // debounceTime(150),
        // distinctUntilChanged()
      )
      .subscribe(() => {
        // if (!this.dataSource) {
        //   return;
        // }
        // this.dataSource.filter = this.filter.nativeElement.value;
      });
  }

  ngOnDestroy(): void {
    // Unsubscribe from all subscriptions
    this._unsubscribeAll.next();
    this._unsubscribeAll.complete();
  }

}
