const inputRange = $('#html-input-range');
let htmlInputRange = {
  idNotThere : '<p>Note: Missing input tag id name e.g html-input-range</p>',
  init() {
    if (inputRange.length > 0) {
      let inputRanges = $('#html-input-range');
      console.log($('#respuesta_abierta').val());
      let respuesta_abierta = $('#respuesta_abierta').val();
      if(respuesta_abierta == null || respuesta_abierta == ''){
        
         respuesta_abierta = 0; 
      }
      inputRanges.parent().addClass('html-inupt-range');
      // if too many input ranges there for now hiding this part.
      // inputRanges.each(function( index ) {
      //   let $this = $(this);
      // });
      let $this = inputRanges;
        // default input range starts at 0 and ends at 100
        $this.attr({
          min: 1,
          max: 100,
          value: respuesta_abierta,
          step: 1
        });
        console.log($this);
    } else {
        
      $('input[type=range]').parent().append(htmlInputRange.idNotThere);
    }
  },
  options (inputs) {
    htmlInputRange.init();
    let options = inputs;
    let respuesta_abierta = $('#respuesta_abierta').val();
    // custom tracker
    $('input[type=range]').parent().addClass('html-input-range-custom');
    $('input[type=range]').parent().append('<div class="hir-tracker-bg"></div><div class="hir-tracker-thumb"></div>');
    let min = 1;
    let max = 100;
    if (options.tooltip === true) {
      if (options.max) {
        max = options.max;
        $(inputRange).attr({
          max: options.max,
          value: respuesta_abierta,
        });
      }
      if(respuesta_abierta == null || respuesta_abierta == ''){
          respuesta_abierta = 0;
          
           $('input[type=range]').parent().append('<div class="tooltip">'+ min +' M</div>');
      }else{
           $('input[type=range]').parent().append('<div class="tooltip">'+ respuesta_abierta +' M</div>');
      }
     
    }
    if (options.labels === true) {
     let respuesta_abierta = $('#respuesta_abierta').val();
      $(inputRange).parent().append('<ul class="hir-labels"></ul>');
      let setWidth;
      if (options.max) {
        setWidth = options.max/10;
        
      } else {
        setWidth = max/10; 
     
      }
      if(respuesta_abierta != null || respuesta_abierta != ''){
        let inputMax = 100 / inputRange.attr('max');
        let trackerTooltipMove = (respuesta_abierta * inputMax);  
        $('.html-inupt-range .tooltip').css('left', trackerTooltipMove + '%');
          $('.html-input-range-custom .hir-tracker-thumb').css('width', trackerTooltipMove + '%');  
      }
      
      for (let i = 0; i < setWidth; i++) {
          console.log(setWidth);
        $('.hir-labels').append('<li class="col-'+ setWidth +' "></li>');
      }
    }
  }
}

$(inputRange).on('input change', inputRange, function (e) {
  /*
  * splitting 100 by input range max value
  * for active tracker and tooltip position.
  */
  let inputMax = 100 / inputRange.attr('max');
  let trackerTooltipMove = (inputRange.val() * inputMax);
  let respuesta_abierta = $('#respuesta_abierta').val();
  $('.html-inupt-range .tooltip').css('left', trackerTooltipMove + '%');
  $('.html-input-range-custom .hir-tracker-thumb').css('width', trackerTooltipMove + '%');
  // updating tooltip value based on the range from to.
      console.log(inputRange.val());
      $('.html-inupt-range .tooltip').text(inputRange.val()+'M');
  
  
});
