import { Component, EventEmitter, HostListener, Input, OnInit, Output } from '@angular/core';
import { PageEvent } from '@angular/material/paginator';
import { Sort } from '@angular/material/sort';
import { Router } from '@angular/router';

@Component({
  selector: 'ui-turnovers',
  templateUrl: './turnovers.ui.html',
  styleUrls: ['./turnovers.ui.scss']
})
export class UiTurnovers implements OnInit {

  @Input() turnovers: any;
  @Input() overview: any[];
  @Input() showFilter: boolean = true;
  @Input() linkTurnover: boolean = true;
  @Input() username: boolean = false;
  @Output() page: EventEmitter<PageEvent> = new EventEmitter<PageEvent>();
  @Output() sort: EventEmitter<Sort> = new EventEmitter<Sort>();

  pageSizeOptions: number[] = [1, 2, 3, 4, 5, 10, 15, 30, 50, 100];

  columns: string[] = [];

  constructor(private router: Router) { }

  ngOnInit(): void {
    this.applyResize(window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth);
  }

  @HostListener('window:resize', ['$event'])
  onResize(event) {
    this.applyResize(event.target.innerWidth || event.target.documentElement.clientWidth || event.target.body.clientWidth)
  }

  applyResize(width: number) {
    if (width < 992) {
      this.columns = ['customer', 'motif'];
    } else {
      this.columns = ['customer', 'motif', 'price', 'timeInvestment', 'remark', 'materialConsumption', 'updated'];
    }
    if (this.username) {
      this.columns.unshift('username');
    }
    this.columns.unshift('created');
  }

  select(row: any) {
    this.router.navigateByUrl('/t/' + row.id);
  }
}
