module.exports = () => {
    setupPlaybarOnwheel();
    setupObserver();
    firstTooltip();
}

function firstTooltip() {
    const videoStream = document.querySelector(".video-stream");
    if (videoStream) {
        setTooltip(Math.round(parseFloat(videoStream.volume) * 100));
    } else {
        setTimeout(firstTooltip, 500); // try again in 500 milliseconds
    }
}

function setupPlaybarOnwheel() {
    //add onwheel event to play bar
    document.querySelector("ytmusic-player-bar").onwheel = (event) => {
        event.preventDefault();
        //event.deltaY < 0 => wheel up
        changeVolume(event.deltaY < 0)
    }
}

//the last volume set by changeVolume() is stored here
let newVolume; //used to determine if volume-slider was manually moved 

function changeVolume(increase) {
    //need to change both the slider and the actual volume
    const videoStream = document.querySelector(".video-stream");
    const slider = document.querySelector("#volume-slider");
    //get the volume diff to apply
    const diff = increase
        ? videoStream.volume < 1 ? 0.01 : 0
        : videoStream.volume > 0 ? -0.01 : 0
    //apply on both elements and save the new volume
    videoStream.volume += diff;
    newVolume = Math.round(parseFloat(videoStream.volume) * 100);
    slider.value = newVolume;
    //finally change tooltip to new value
    setTooltip(newVolume)
}

//update the volume tooltip when volume-slider is manually changed
function setupObserver() {
    const observer = new MutationObserver((mutations) => {
        for (const mutation of mutations) {
            //this checks that volume-slider was manually set
            if (mutation.oldValue !== mutation.target.value
                && (!newVolume || Math.abs(newVolume - mutation.target.value) > 4)) {
                //diff>4 means it was manually set, so update tooltip accordingly
                setTooltip(mutation.target.value);
            }
        }
    });

    //observing only changes in 'value' of volume-slider
    observer.observe(document.querySelector("#volume-slider"), {
        attributeFilter: ["value"],
        attributeOldValue: true,
    });
}

function setTooltip(newValue) {
    newValue += "%";
    //set new volume as tooltip for volume slider and icon
    document.querySelector("#volume-slider").title = newValue;
    document.querySelector("tp-yt-paper-icon-button.volume.style-scope.ytmusic-player-bar").title = newValue;

    //also for expanding slider (appears when window size is small)
    let expandingSlider = document.querySelector("#expanding-menu");
    expandingSlider.querySelector("#expand-volume-slider").title = newValue;
    expandingSlider.querySelector("#expand-volume").title = newValue;
}