import { Component, Input, Output, EventEmitter, ElementRef, OnInit, OnChanges } from '@angular/core';
import { RdComponent } from "../../base/rdComponent";

declare const noUiSlider;

export class RangeValues {
  minValue: number;
  maxValue: number;
}

@Component({
  selector: 'rd-range',
  template: ` 
    <div id="nouiSlider" class="m-nouislider m-nouislider--handle-info m-nouislider--connect-success" style="cursor:pointer" [ngStyle]="{'opacity': disabled ? .5 : 1}" [attr.disabled]="disabled"></div>
  `
})
export class Range extends RdComponent implements OnInit, OnChanges {
  constructor(private element: ElementRef) { super(); }

  @Input("rd-min") min: number = 0;
  @Input("rd-max") max: number = 100;
  @Input("rd-disabled") disabled = null;
  @Input("rd-options") options = {
    start: [this.min, this.max],
    step: 1,
    connect: true,
    tooltips: true,
    range: {
      min: this.min,
      max: this.max
    }
  }

  @Output("rd-change") changeEvent: EventEmitter<RangeValues> = new EventEmitter<RangeValues>();

  container;

  ngOnInit() {
    this.container = this.jQuery(this.element.nativeElement).find("#nouiSlider")[0];

    noUiSlider.create(this.container, this.options);

    this.container.noUiSlider.on("change", (values, nth) => {
      this.changeEvent.emit({
        minValue: parseInt(values[0]),
        maxValue: parseInt(values[1])
      });
    });
  }

  ngOnChanges(changes) {
    if (!this.container) return;
    if (changes.min || changes.max) this.container.noUiSlider.set([this.min, this.max]);
  }
}