import {Component, ViewChild, ElementRef} from '@angular/core';
import {DecimalPipe} from '@angular/common';
import { NouiFormatter } from "ng2-nouislider";
import moment from 'moment';

/**
 * @title Basic slider
 */
@Component({
  selector: 'slider-overview-example',
  templateUrl: 'slider-overview-example.html',
  styleUrls: ['slider-overview-example.css'],
  providers:[DecimalPipe],
})

export class SliderOverviewExample {
  @ViewChild('slider', {read: ElementRef}) slider: ElementRef;

  sliderRange;

  someKeyboardConfig: any = {
    connect: true,
    start: [2, 80],
    step: 1,
    tooltips: [new TimeFormatter(this.decimalPipe), new TimeFormatter(this.decimalPipe)],
    range: {
      min: 1,
      max: 365
    },
    behaviour: 'drag',
  };

  constructor(private decimalPipe: DecimalPipe) {};

  ngAfterViewInit() {
    this.func();
  }

  func() {
    const connect = this.slider.nativeElement.querySelectorAll('.noUi-connect');
    const classes = ['c-1-color', 'c-2-color', 'c-3-color'];
    console.log(connect.length);
    for (let i = 0; i < connect.length; i++) {
      connect[i].classList.add(classes[i]);
    }
  }
}

export class TimeFormatter implements NouiFormatter {
  constructor(private decimalPipe: DecimalPipe) {};

  to(value: number): string {
    console.log('aaaa', value);
    // const output = moment().dayOfYear(value).toString();
    const output = moment().dayOfYear(value).format('YYYY-MM-DD');
    return output;
 }

  from(value: string): number {
    return Number(value.split(":")[0])*360+Number(value.split(":")[1]);
  }
}