import { DataSource } from '@angular/cdk/table';

import { BehaviorSubject, Observable, merge } from 'rxjs';
import { switchMap, map } from 'rxjs/operators';

import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { CollectionViewer } from '@angular/cdk/collections';

import { BankInfo } from 'src/modules/sites/bank-info/model/bank-info.model';
import { BankInfoService } from 'src/modules/sites/bank-info/service/bank-info.service';
import { Page } from 'src/modules/common/data/model/page';

export class BankInfoDataSource extends DataSource<BankInfo> {
  private filterSubject = new BehaviorSubject('');
  // private pageSubject = new BehaviorSubject<Page<BankInfo>>({});

  constructor(private bankInfoService: BankInfoService) {
    super();
  }

  connect(
    collectionViewer: CollectionViewer
  ): Observable<BankInfo[] | readonly BankInfo[]> {
    const displayDataChanges = [this.filterSubject];

    return merge(...displayDataChanges).pipe(
      switchMap(() => {
        return this.bankInfoService.getBankInfos().pipe(
          map(page => {
            return page.content;
          })
        );
      })
    );
  }

  disconnect(collectionViewer: CollectionViewer): void {
    this.filterSubject.complete();
  }
}
