(function ($, Drupal, drupalSettings) {
  Drupal.behaviors.amountSlider = {
    attach: function attach(context, settings) {
      let sliders = $(".js-custom-forms__range-slider", context);

      if (sliders.length <= 0) {
        return;
      }

      sliders.each(function() {
        let slider = $(this);
        let wrapper = slider.parents('.custom-forms__range-slider-wrapper');
        let input = wrapper.find(slider.data('value-field'));

        slider.ionRangeSlider({
          type: "single",
          skin: "round",
          prettify_enabled: true,
          prettify_separator: ".",
          onStart: function(data) {
            input.val(data.from);
          },
          onChange: function(data) {
            input.val(data.from);
          },
          onFinish: function(data) {
            input.val(data.from);
          }
        });
        let ion_slider = slider.data("ionRangeSlider");

        input.on('change', function() {
          updateValues($(this), slider, ion_slider);
        });
        input.on('keyup', delay(function() {
          updateValues($(this), slider, ion_slider);
        }, 1500));
      });
    }
  };

  function delay(fn, ms) {
    let timer = 0;
    return function(...args) {
      clearTimeout(timer);
      timer = setTimeout(fn.bind(this, ...args), ms || 0)
    }
  }

  function updateValues(element, slider, ion_slider) {
    let value = element.val();
    if (slider.data('step')) {
      // console.log($(this).val() + 1);
      value = Math.ceil((parseInt(element.val())) / slider.data('step')) * slider.data('step');
    }
    if (element.val().length <= 0) {
      element.val(ion_slider.old_from);
    } else {
      // Make sure we're not below minimum
      if (value < ion_slider.input.dataset.min) {
        value = ion_slider.input.dataset.min;
      }

      ion_slider.update({
        from: value
      });
      element.val(value);
    }
  }
})(jQuery, Drupal, drupalSettings);