Element.prototype.addClass = function(className)
{
    if(!this.classList.contains(className)){
        this.classList.add(className);
    }
};

Element.prototype.removeClass = function(className)
{
    if(this.classList.contains(className)){
        this.classList.remove(className);
    }
};

Array.prototype.first = function()
{
    return this[0];
}

Array.prototype.last = function()
{
    return this[this.length - 1];
}

const VALUES = [17, 20, 30, 40, 50, 60 , 70]
const VALUESNAMES = ["17 - 19", "20 - 29", "30 - 39", "40 - 49", "50 - 59", "60 - 69" , "70 - 79"]

document.querySelectorAll('.inputslider').forEach(
    (inputslider) => {
        let values = VALUES,
            value = "40",
            unit = '',
            min = parseFloat(values.first()),
            max = parseFloat(values.last()),
            input = inputslider.querySelector('input'),
            area = inputslider.querySelector('.area'),
            knob = inputslider.querySelector('.knob'),
            fill = inputslider.querySelector('.fill');

        if(inputslider.dataset.unit){
            unit = inputslider.dataset.unit;
        }

        values.forEach(
            (value, i) => {
                values[i] = value = parseFloat(value);

                let span = document.createElement('span');
                span.innerText = VALUESNAMES[i];
                span.setAttribute('data-value', value);

                if(i == 3){
                    span.addClass('selected');
                    input.value = value;
                }

                span.style.left = gsap.utils.mapRange(min, max, 0, 100, value) + '%';

                inputslider.querySelector('.values').appendChild(span);
            }
        );

        Draggable.create(knob, {
                type: 'x',
                edgeResistance: 1,
                bounds: area,
                throwProps: false,
                onDrag: function()
                {
                    handleInputslider(this, false);
                },
                onDragEnd: function()
                {
                    handleInputslider(this, true);
                }
            }
        );
        let snapX = gsap.utils.mapRange(min, max, 0, 210, 40),
            fillWidth = gsap.utils.mapRange(0, 210, 0, 100, snapX);
        gsap.to(knob, {duration: 0, x: snapX + 10});
        gsap.to(fill, {duration: 0, width: fillWidth + '%'});
    }
);

function handleInputslider(instance, snap)
{
    console.log(instance)
    console.log(instance)
    let inputslider = instance.target.closest('.inputslider'),
        fill = inputslider.querySelector('.fill'),
        values = VALUES,
        min = parseFloat(values.first()),
        max = parseFloat(values.last()),
        xPercent = gsap.utils.mapRange(0, instance.maxX, 0, 100, instance.x),
        relativeValue = gsap.utils.mapRange(0, instance.maxX, min, max, instance.x),
        finalValue = gsap.utils.snap(values, relativeValue),
        snapX = gsap.utils.mapRange(min, max, 0, instance.maxX, finalValue),
        fillWidth = gsap.utils.mapRange(0, instance.maxX, 0, 100, snapX);

    if(snap){
        console.log(instance.target)
        gsap.to(instance.target, {duration: .2, x: snapX});
        gsap.to(fill, {duration: .2, width: fillWidth + '%'});
        filtersValues[2] = finalValue
        resetData()
    }else{
        values.forEach(
            (value, i) => {
                values[i] = parseFloat(value);
            }
        );

        fill.style.width = xPercent + '%';

        inputslider.querySelectorAll('.values span').forEach(
            (span) => {
                if(parseFloat(span.dataset.value) == finalValue){
                    span.addClass('selected');
                }else{
                    span.removeClass('selected');
                }
            }
        );

        inputslider.querySelector('input').value = finalValue;
    }
}