import { Component, OnInit, Input, AfterViewInit, ViewChild, EventEmitter, Output } from '@angular/core';
import { MatSlider } from '@angular/material';

@Component({
  selector: 'hbor-slider',
  templateUrl: './slider.component.html',
  styleUrls: ['./slider.component.css']
})
export class SliderComponent implements OnInit, AfterViewInit {
  @Input() autoTicks = true;
  @Input() disabled = false;
  @Input() invert = false;
  @Input() max = 100;
  @Input() min = 10;
  @Input() showTicks = true;
  @Input() step = 1;
  @Input() thumbLabel = true;
  @Input() value = 20;
  @Input() vertical = false;
  @Input() private _tickInterval = 1;
  @ViewChild(MatSlider) matSlider: MatSlider;
  @Output() onSliderChanged: EventEmitter<any> = new EventEmitter<any>();


  constructor() { }

  ngOnInit() {
  }

  ngAfterViewInit() {
    this.matSlider.input.subscribe((data) => this.onSliderChanged.emit(data.value));
  }

  get tickInterval(): number | 'auto' {
    return this.showTicks ? (this.autoTicks ? 'auto' : this._tickInterval) : 0;
  }
  set tickInterval(v) {
    this._tickInterval = Number(v);
  }
}