import { AfterViewInit, Component, HostListener, Input, OnInit, ViewChild } from '@angular/core';
import { PeityComponent } from '@xdf/graph';
import { PetiFormatter } from './formatter/formatter';
declare var jQuery: any;

export class PetyWidgetModel {
  percent: number;
  up?: boolean;
  down?: boolean;
  value: number;
  history: Array<number>;
}

@Component({
  selector: 'byte-summary-peti-widget',
  templateUrl: './summary-peti-widget.component.html',
  styleUrls: ['./summary-peti-widget.component.scss']
})
export class SummaryPetiWidgetComponent 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;
  @Input() tooltip: string;
  @Input() formatter: PetiFormatter;

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

  constructor() { }

  ngOnInit() {
  }

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

  get formatterValue(): string|number {
    if (this.formatter) {
      return this.formatter.format(this.value.value);
    }
    return this.value.value;
  }

  @HostListener('window:resize', ['$event'])
  public onResize(event) {
    console.log('aea');
    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;
    }
  }

}
