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';
import moment from 'moment';
import { I18nService } from 'src/app/services/i18n.service';

@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;
  @Input() enableSort: boolean = true;
  @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,
    private i18n: I18nService
  ) { }

  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', 'price', 'motif'];
    } else {
      this.columns = ['customer', 'motif', 'price', 'giftcardPrice', 'timeInvestment', 'remark', 'materialConsumption', 'created', 'updated'];
    }
    if (this.username) {
      this.columns.unshift('username');
    }
    this.columns.unshift('dueDate');
  }

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

  getCsvRows(): any[] {
    if (this.turnovers.total) {
      let rows = [[
        this.i18n.get('turnover.dueDate'),
        this.i18n.get('turnover.customer'),
        this.i18n.get('turnover.motif'),
        this.i18n.get('turnover.price'),
        this.i18n.get('turnover.giftcard.number'),
        this.i18n.get('turnover.giftcard.price'),
        this.i18n.get('turnover.timeInvestment'),
        this.i18n.get('turnover.remark'),
        this.i18n.get('turnover.materialConsumption'),
        this.i18n.get('turnover.created'),
        this.i18n.get('turnover.updated')]];

      if (this.username) {
        rows[0].unshift(
          this.i18n.get('turnover.username'));
      }

      this.turnovers.results.forEach(turnover => {
        rows[rows.length] = [
          moment(turnover.dueDate).format('L'),
          turnover.customer,
          turnover.motif,
          turnover.price.toFixed(2),
          turnover.giftcardNumber,
          turnover.giftcardPrice && turnover.giftcardPrice.toFixed(2) || '',
          turnover.timeInvestment.toFixed(1),
          turnover.remark,
          turnover.materialConsumption,
          moment(turnover.created).format(this.i18n.get('turnovers.export.dateformat')),
          moment(turnover.updated).format(this.i18n.get('turnovers.export.dateformat'))
        ]
        if (this.username) {
          rows[rows.length - 1].unshift(turnover.username);
        }
      });
      return rows;
    }
    return [];
  }
}
