import {Component, HostListener, OnInit, ViewChild} from '@angular/core';
import {Observable} from 'rxjs';
import {UsersService} from '../../services/users.service';
import {map} from 'rxjs/operators';
import {MdbTableDirective} from "ng-uikit-pro-standard";

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.scss']
})
export class UsersComponent implements OnInit {
  @ViewChild(MdbTableDirective, { static: true })
  mdbTable:MdbTableDirective;
  users:any=[];

  searchText: string = '';
  previous: string;


  constructor(private userService:UsersService) { }


  @HostListener('input')
  oninput() {
    this.searchItems();
  }
  ngOnInit() {

    this.users= this.userService.getUsers().pipe(
      map(
        changes=>changes.map(
          ({payload:{doc}})=>{
            const data = doc.data();
            const id=doc.id;
            return {id,...data}
          }
        )
      )
    );

    this.mdbTable.setDataSource(this.users);
    this.previous =this.mdbTable.getDataSource();
  }



  searchItems() {
    const prev =this.mdbTable.getDataSource();
    if (!this.searchText) {
      this.mdbTable.setDataSource(this.previous);
      this.users =this.mdbTable.getDataSource();
    }
    if (this.searchText)
    {
      this.users =this.mdbTable.searchLocalDataBy(this.searchText);
      this.mdbTable.setDataSource(prev);
    }
  }
}