import { AfterViewInit, Component, HostListener, Input, OnInit, ViewChild } from '@angular/core';
import { PeityComponent } from '@xdf/graph';
import { PetyWidgetModel } from '../summary-peti-widget/summary-peti-widget.component';

@Component({
  selector: 'byte-inactivity-sesion',
  templateUrl: './inactivity-sesion.component.html',
  styleUrls: ['./inactivity-sesion.component.scss']
})
export class InactivitySesionComponent implements OnInit, AfterViewInit {

  @Input() options = {
    width: 200,
    height: 60,
    fill: '#dfecf9',
    stroke: '#024990',
    strokeWidth: 1
  };
  @Input() values = [1, 12, 3, 15, 5, -1, 10];
  @Input() header;
  @Input() value: PetyWidgetModel;

  @ViewChild('peti', { static: false })
  peti: PeityComponent;

  constructor() { }

  ngOnInit() {
  }

  ngAfterViewInit() {
    if (this.peti) {
      const width = window.innerWidth;
      this.updateWidth(width);
      this.peti.updateSize();
    }
  }

  @HostListener('window:resize', ['$event'])
  public onResize(event) {
    const width = event.target.innerWidth;
    this.updateWidth(width);
    this.peti.updateSize();
  }

  private updateWidth(width: number) {
    if (width >= 1600) {
      this.options.width = 300;
    } else if (width >= 1350) {
      this.options.width = 200;
    } else if (width >= 768) {
      this.options.width = 150;
    } else if (width >= 576) {
      this.options.width = 200;
    } else {
      this.options.width = 300;
    }
  }

}
