/**
 * Refresh Button Position Function
 * for Price Range Filter
 */
function refreshButtonPositions() {
    const elementRangeWidth =  document.querySelector('.om-sliderrange-range').getBoundingClientRect().width;
    const buttonStartWidth =  document.querySelector('.om-sliderrange-button-start').getBoundingClientRect().width;
    const buttonEndWidth =  document.querySelector('.om-sliderrange-button-end').getBoundingClientRect().width;

    const buttonStart = document.querySelector('.om-sliderrange-button-start');
    const buttonEnd = document.querySelector('.om-sliderrange-button-end');

    const settings = document.querySelector('#price-range-slider');
    const min = settings.getAttribute('min');
    const max = settings.getAttribute('max');

    const range = max - min;
    const factor = (elementRangeWidth - buttonStartWidth - buttonEndWidth) / range;

    const valueStart = settings.getAttribute('minAll') - min;
    const valueEnd = parseInt(settings.getAttribute('maxAll')) > parseInt(max) ? max - min : settings.getAttribute('maxAll') - min;

    let buttonStartLeft;
    if(parseInt(min) > parseInt(settings.getAttribute('minAll'))) {
        buttonStartLeft = 0;
    } else {
        buttonStartLeft = Math.floor(valueStart * factor);
    }
    let buttonEndLeft = buttonStartWidth + Math.floor(valueEnd * factor);

    if(buttonStart) buttonStart.style.left = buttonStartLeft + 'px';
    if(buttonEnd) buttonEnd.style.left = buttonEndLeft + 'px';
}

/**
 * Refresh Range Indicator for Price Range Function
 * for Price Range Filter
 */
function refreshRangeIndicator() {
    const elementRangeWidth =  document.querySelector('.om-sliderrange-range').getBoundingClientRect().width;
    const buttonStartWidth =  document.querySelector('.om-sliderrange-button-start').getBoundingClientRect().width;
    const buttonEndWidth =  document.querySelector('.om-sliderrange-button-end').getBoundingClientRect().width;

    const buttonStart = document.querySelector('.om-sliderrange-button-start');
    const buttonEnd = document.querySelector('.om-sliderrange-button-end');

    const rangeIndicator = document.querySelector('.om-sliderrange-range-indicator');

    const buttonStartMiddle = Math.round(parseInt(buttonStart.style.left) + (buttonStartWidth / 2));
    const buttonEndMiddle = Math.round(elementRangeWidth - (parseInt(buttonEnd.style.left) + (buttonEndWidth / 2)));

    if(rangeIndicator) rangeIndicator.style.left = buttonStartMiddle + 'px';
    if(rangeIndicator) rangeIndicator.style.right = buttonEndMiddle + 'px';
}

export {
    refreshButtonPositions,
    refreshRangeIndicator
}