import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
import {BlockSyncService, TransactionService} from '@app/_services';
import {MatTableDataSource} from '@angular/material/table';
import {SelectionModel} from '@angular/cdk/collections';
import {MatPaginator} from '@angular/material/paginator';
import {MatSort} from '@angular/material/sort';

@Component({
  selector: 'app-transactions',
  templateUrl: './transactions.component.html',
  styleUrls: ['./transactions.component.scss']
})
export class TransactionsComponent implements OnInit, AfterViewInit {
  transactionDataSource: MatTableDataSource<any>;
  transactionDisplayedColumns = ['view', 'sender', 'senderLocation', 'recipient', 'recipientLocation', 'token', 'value', 'created', 'type', 'select'];
  initialSelection = [];
  allowMultiSelect = true;
  transactionSelection: SelectionModel<any>;
  transactions: any[];
  transaction: any;
  transactionsType = 'all';

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  constructor(
    private transactionService: TransactionService,
    private blockSyncService: BlockSyncService
  ) {
    this.blockSyncService.blockSync();
  }

  ngOnInit(): void {
    this.transactionService.transactionsSubject.subscribe(transactions => {
      this.transactionDataSource = new MatTableDataSource<any>(transactions);
      this.transactionDataSource.paginator = this.paginator;
      this.transactionDataSource.sort = this.sort;
      this.transactions = transactions;
    });
    this.transactionSelection = new SelectionModel<any>(this.allowMultiSelect, this.initialSelection);
  }

  viewTransaction(transaction): void {
    this.transaction = transaction;
  }

  isAllSelected(selection, dataSource): boolean {
    const numSelected = selection.selected.length;
    const numRows = dataSource.data.length;
    return numSelected === numRows;
  }

  masterToggle(selection, dataSource): void {
    this.isAllSelected(selection, dataSource) ? selection.clear() : dataSource.data.forEach(row => selection.select(row));
  }

  doFilter(value: string, dataSource): void {
    dataSource.filter = value.trim().toLocaleLowerCase();
  }

  filterTransactions(): void {
    if (this.transactionsType === 'all') {
      this.transactionService.transactionsSubject.subscribe(transactions => {
        this.transactionDataSource.data = transactions;
        this.transactions = transactions;
      });
    } else {
      this.transactionDataSource.data = this.transactions.filter(transaction => transaction.type === this.transactionsType);
    }
  }

  ngAfterViewInit(): void {
    this.transactionDataSource.paginator = this.paginator;
    this.transactionDataSource.sort = this.sort;
  }
}