<svelte:options runes={true} />

<script lang="ts">
    import {onMount} from "svelte";
    import {goto} from "$app/navigation";
    import {AlbumState} from "$lib/components/custom/Views/album-pages-utils.svelte";
    import AlbumComponent from "$lib/components/custom/Views/AlbumComponent.svelte";

    let scrollY = $state(0);
    let scrollYMax = $state(1);
    let albums: AlbumState = $state(new AlbumState());
    albums.setMode("starred")

    function updateScroll(self) {
        scrollY = self.scrollTop;
        scrollYMax = self.scrollTopMax;
    }

    $effect(() => {
        if(scrollY/scrollYMax > 0.7 && albums.length === 100 && !albums.paginating) {
            console.log("triggered")
            albums.paginating = true;
            albums.fetchAlbums();
        }
    })

    function selectAlbum(albumId) {
        goto(`/album/${albumId}`);
        console.log(albumId);
    }

    onMount(() => {
        albums.fetchAlbums();
    })
</script>

<AlbumComponent {albums} {updateScroll} {selectAlbum} />