<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 = () => {
        // Jump down by 100vh
        window.scrollTo({ top: window.innerHeight, behavior: "smooth" })
    }

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

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

{#if showButton && force}
    <button on:click="{jumpDown}" class="jump-down"
        ><span> SCROLL </span>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
                d="m22.723 5.473 1.054 1.054L12 18.305.223 6.527l1.054-1.054L12 16.195 22.723 5.473z"
                fill="var(--link-font-color)"></path>
        </svg>
    </button>
{/if}

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