//you will need these imports in your ts, and the jquery-ui css in your scss to use these functions

/*import * as $ from 'jquery';
import 'jquery-ui';
import * as popper from 'popper.js';
import * as bootstrap from 'bootstrap';
*/
//statement slider filter
declare let $: any;

/** generated a range slider, allowing users to limit a range of a numeric variable
 *  the slider bar's change will update the two input box values, while the changes on the input box values
 *  will change the slider bar accordingly too
 * @param rangeMin: Int, allowed min value of the slider
 * @param rangeMax: Int, allowed max value of the slider
 * @param sliderSelector: String, selector of a <div> where the slider will be located
 * @param minInputSelector: String, selector of an <input> for min of the slider
 * @param maxInputSelector: String, selector of an <input> for max of the slider
 * @param sliderStep: Int, control the step of slider, default to 1
 */
export function sliderFilterBehavior(
    rangeMin,
    rangeMax,
    sliderSelector,
    minInputSelector,
    maxInputSelector,
    sliderStep = 1
) {
    let initialMin,
        initialMax,
        mmuiSlider = $(sliderSelector),
        minStatement = $(minInputSelector),
        maxStatement = $(maxInputSelector);

    mmuiSlider.slider({
        range: true,
        min: rangeMin,
        max: rangeMax,
        step: sliderStep,
        slide: function (event, ui) {
            minStatement.val(ui.values[0]);
            maxStatement.val(ui.values[1]);
        },
        create: function () {
            if (minStatement.val()) {
                initialMin = minStatement.val();
            } else {
                initialMin = rangeMin;
            }
            if (maxStatement.val()) {
                initialMax = maxStatement.val();
            } else {
                initialMax = rangeMax;
            }

            mmuiSlider.slider('values', [initialMin, initialMax]);
            minStatement.val(initialMin);
            maxStatement.val(initialMax);
        },
    });

    //check the value that user entered, if within range, update the slider accordingly, if out or range, set to min and max
    $(minInputSelector + ', ' + maxInputSelector).change(function () {
        let minStatementValue = parseInt(minStatement.val()),
            maxStatementValue = parseInt(maxStatement.val());
        if (minStatementValue < rangeMin) {
            minStatementValue = rangeMin;
        }
        if (maxStatementValue > rangeMax) {
            maxStatementValue = rangeMax;
        }
        if (minStatementValue >= maxStatementValue) {
            //minStatementValue = maxStatementValue-sliderStep
            minStatementValue = maxStatementValue;
        }
        minStatement.val(minStatementValue);
        maxStatement.val(maxStatementValue);
        mmuiSlider.slider('values', [minStatementValue, maxStatementValue]);
    });
}

/**
 * initiate a single slider instance and its input box
 * @param rangeMin: Int, allowed min value of the slider
 * @param rangeMax: Int, allowed max value of the slider
 * @param sliderSelector: String, selector of a <div> where the slider will be located
 * @param inputSelector: String, selector of an <input> for the value of the slider
 */
export function singleSliderFilterBehavior(
    rangeMin,
    rangeMax,
    defaultValue,
    sliderSelector,
    inputSelector,
    sliderStep = 1
) {
    const mmuiSlider = $(sliderSelector),
        mmuiInputBox = $(inputSelector);
    mmuiSlider.slider({
        range: 'min',
        min: rangeMin,
        max: rangeMax,
        value: defaultValue,
        step: sliderStep,
        slide: function (event, ui) {
            mmuiInputBox.val(ui.value);
        },
        create: function () {
            if (mmuiInputBox.val() !== undefined) {
                // update obj's value option, in case input box value is different from default value
                mmuiSlider.slider('value', parseInt(mmuiInputBox.val()));
            } else {
                // set the default value to the input box to keep consistency
                mmuiInputBox.val(defaultValue);
            }
        },
    });
    // change the slider value when input box is updated, if the value is outside of valid range, using default value
    mmuiInputBox.change(function () {
        const val = parseInt(this.value);
        if (val > rangeMax || val < rangeMin) {
            mmuiSlider.slider('value', defaultValue);
        } else {
            mmuiSlider.slider('value', parseInt(this.value));
        }
    });
}