import {
  Component,
  ElementRef,
  OnDestroy,
  OnInit,
  ViewChild,
  ViewEncapsulation,
  AfterViewInit
} from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';

import { fromEvent, Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
import { FuseUtils } from 'src/@fuse/utils';

import { takeUntil } from 'rxjs/internal/operators';
import { fuseAnimations } from 'src/@fuse/animations';
import { LeagueDataSource } from './league-management.data-source';
import { LeagueService } from 'src/modules/game/service/league.service';

@Component({
  selector: 'app-league-management',
  templateUrl: './league-management.component.html',
  styleUrls: ['./league-management.component.scss'],
  animations: fuseAnimations,
  encapsulation: ViewEncapsulation.None
})
export class LeagueManagementComponent
  implements OnInit, OnDestroy, AfterViewInit {
  dataSource: LeagueDataSource | null;
  displayedColumns = [
    // 'engName',
    'icon',
    'korName',
    // 'sevenName',
    // 'engCountry',
    // 'korCountry',
    'addMethod',
    'sportsEntities',
    'test'
  ];

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

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

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

  // Private
  private _unsubscribeAll: Subject<any>;

  constructor(private leagueService: LeagueService) {
    this._unsubscribeAll = new Subject();
  }

  ngOnInit() {
    this.dataSource = new LeagueDataSource(
      this.leagueService,
      this.paginator,
      this.sort
    );

    console.log(this.dataSource);
    // fromEvent(this.filter.nativeElement, 'keyup')
    //   .pipe(
    //     takeUntil(this._unsubscribeAll),
    //     debounceTime(150),
    //     distinctUntilChanged()
    //   )
    //   .subscribe(() => {
    //     if (!this.dataSource) {
    //       return;
    //     }
    //     this.dataSource.filter = this.filter.nativeElement.value;
    //   });
  }
  /**
   * On destroy
   */
  ngOnDestroy(): void {
    // Unsubscribe from all subscriptions
    this._unsubscribeAll.next();
    this._unsubscribeAll.complete();
  }

  ngAfterViewInit(): void {}
}

// export interface PeriodicElement {
//   name: string;
//   position: number;
//   weight: number;
//   symbol: string;
//   test: string;
// }

// const ELEMENT_DATA: PeriodicElement[] = [
//   { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H', test: 'test' },
//   { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He', test: 'test' },
//   { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li', test: 'test' },
//   {
//     position: 4,
//     name: 'Beryllium',
//     weight: 9.0122,
//     symbol: 'Be',
//     test: 'test'
//   },
//   { position: 5, name: 'Boron', weight: 10.811, symbol: 'B', test: 'test' },
//   { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C', test: 'test' },
//   { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N', test: 'test' },
//   { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O', test: 'test' },
//   { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F', test: 'test' },
//   { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne', test: 'test' },
//   { position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na', test: 'test' },
//   {
//     position: 12,
//     name: 'Magnesium',
//     weight: 24.305,
//     symbol: 'Mg',
//     test: 'test'
//   },
//   {
//     position: 13,
//     name: 'Aluminum',
//     weight: 26.9815,
//     symbol: 'Al',
//     test: 'test'
//   },
//   {
//     position: 14,
//     name: 'Silicon',
//     weight: 28.0855,
//     symbol: 'Si',
//     test: 'test'
//   },
//   {
//     position: 15,
//     name: 'Phosphorus',
//     weight: 30.9738,
//     symbol: 'P',
//     test: 'test'
//   },
//   { position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S', test: 'test' },
//   {
//     position: 17,
//     name: 'Chlorine',
//     weight: 35.453,
//     symbol: 'Cl',
//     test: 'test'
//   },
//   { position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar', test: 'test' },
//   {
//     position: 19,
//     name: 'Potassium',
//     weight: 39.0983,
//     symbol: 'K',
//     test: 'test'
//   },
//   { position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca', test: 'test' }
// ];