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 { User } from 'src/modules/user/model/user.model';
import { UserService } from 'src/modules/user/service/user.service';

export class UsersDataSource extends DataSource<User> {
  private filterSubject = new BehaviorSubject('');

  constructor(
    private userService: UserService,
    private paginator: MatPaginator,
    private sort: MatSort
  ) {
    super();
  }

  // Filter
  get filter(): string {
    return this.filterSubject.value;
  }

  set filter(filter: string) {
    this.filterSubject.next(filter);
  }

  connect(
    collectionViewer: CollectionViewer
  ): Observable<User[] | readonly User[]> {
    const displayDataChanges = [
      this.paginator.page,
      this.sort.sortChange,
      this.filterSubject
    ];

    return merge(...displayDataChanges).pipe(
      switchMap(() => {
        const filter = this.filter;
        const sortActive = this.sort.active;
        const sortDirection = this.sort.direction;
        const pageIndex = this.paginator.pageIndex;
        const pageSize = this.paginator.pageSize;

        return this.userService.getAllUsers().pipe(
          map(page => {
            return page.content;
          })
        );
      })
    );
  }

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