<script>
    import { onMount, onDestroy } from "svelte"
    import { rerender } from "../../store"

    let showButton = true

    const checkScroll = () => {
        // Change the visibility of the button based on the scroll position
        showButton = window.pageYOffset < 100
    }

    const jumpDown = () => {
        if (typeof window !== "undefined") {
            // Jump down by 100vh
            window.scrollTo({ top: window.innerHeight, behavior: "smooth" })
        }
    }

    onMount(() => {
        if (typeof window !== "undefined") {
            // Attach scroll event listener when component is mounted
            window.addEventListener("scroll", checkScroll)
        }
    })

    onDestroy(() => {
        if (typeof window !== "undefined") {
            // Remove scroll event listener when component is destroyed
            window.removeEventListener("scroll", checkScroll)
        }
    })
    let force = true
    if (typeof window !== "undefined") {
        setInterval(() => {
            if (location.pathname != "/") {
                force = false
            } else force = true
        }, 1000)
    }
    $: {
        if (typeof window !== "undefined") {
            if ($rerender) {
                if (location.pathname != "/") {
                    force = false
                } else force = true
            }
        }
    }
</script>

{#if showButton && force}
    <button on:click="{jumpDown}" class="jump-down"
        ><span> SCROLL </span>
        <img src="/media/chev-d.svg" alt="arrow" />
    </button>
{/if}

<style>
    .jump-down {
        /* Place your styles here */
        display: flex;
        flex-direction: column;
        align-items: center;
        position: fixed;
        color: #4f4f4f;
        z-index: 100;
        gap: 5px;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
    }
</style>
