<template>
    <div
        class="absolute z-10 hidden w-2 h-full lg:h-[85%] -translate-x-1/2 lg:left-1/2 sm:block"
    >
        <span
            class="absolute z-10 w-[5px] h-32 bg-gradient-to-b to-transparent from-blue-100"
        ></span>
        <span class="absolute w-[5px] h-full bg-blue-200"></span>
        <span
            class="absolute w-[5px] bg-blue-300 z-20"
            :style="{ height: progress + '%' }"
        >
            <span
                class="absolute z-30 w-[5px] h-32 bg-gradient-to-b to-transparent from-blue-100"
            ></span>
            <span
                class="w-[20px] h-[20px] rounded-full bg-blue-200 ring-4 ring-blue-300 absolute bottom-0 translate-y-1/2 left-1/2 -translate-x-1/2 z-40"
            ></span>
        </span>
    </div>
</template>

<script>
export default {
    data() {
        return {
            progress: 0,
        };
    },
    methods: {
        clamp: (num, min, max) => Math.min(Math.max(num, min), max),
    },
    mounted() {
        // on scroll set progress to the percentage of the scroll in the div with the id of "scroll-container"
        const scrollContainer = document.getElementById("scroll-container");
        const event = window.addEventListener("scroll", () => {
            if (!scrollContainer) {
                event;
                return;
            }

            const scrollContainerHeight = scrollContainer.offsetHeight;
            const scrollContainerTop = scrollContainer.offsetTop - 300;
            const scrollContainerBottom =
                scrollContainerHeight + scrollContainerTop;
            const scrollPosition = window.scrollY;
            const scrollPercentage =
                (scrollPosition * 1.1 - scrollContainerTop) /
                (scrollContainerBottom - scrollContainerTop);
            this.progress = this.clamp(scrollPercentage * 100, 0, 100);
        });
    },
    unmounted() {
        window.removeEventListener("scroll", () => {});
    },
};
</script>
