<script lang="ts">
    import { type Song, createEmptySong } from "$lib/types"

    let { queueSongs, playingIndex } = $props()

    let displaySongs = $derived<Song[]>([
        playingIndex > 0 ? queueSongs[playingIndex - 1] : createEmptySong(),
        queueSongs[playingIndex],
        playingIndex == queueSongs.length - 1 ? createEmptySong() : queueSongs[playingIndex + 1],
    ])

    $effect(() => {
        console.log(displaySongs)
    })
</script>

<div class="relative flex w-full justify-center overflow-hidden">
    <div class="flex w-fit flex-row gap-4">
        {#each displaySongs as song, i}
            {#if song?.title && song.title != ""}
                <div class={`relative flex flex-col items-center transition-all duration-300 ${i === 1 ? "z-10" : "z-0 scale-85 opacity-50"}`}>
                    <div
                        class={`flex h-[60vw] max-h-[250px] w-[60vw] max-w-[250px] items-center justify-center ${i === 1 ? "spin-slower rounded-full border-2 border-black" : "rounded"} object-cover`}
                    >
                        {#if i === 1}
                            <div class="absolute z-20 h-16 w-16 rounded-full border-2 border-black bg-light-pine-base dark:bg-dark-pine-base"></div>
                        {/if}
                        <img
                            class={`h-full overflow-hidden ${i === 1 ? "rounded-full" : "rounded"}`}
                            src={song.image_id != ""
                                ? `https://lastfm.freetls.fastly.net/i/u/174s/${song.image_id}.png`
                                : "https://s2.qwant.com/thumbr/474x474/f/6/b50687db1ebb262ac78b98a8f3c56a1e62235aaeebe0346dd27d4fbf1edec8/OIP.kXN41HyriW5dLTkjm0QQoAHaHa.jpg?u=https%3A%2F%2Ftse.mm.bing.net%2Fth%2Fid%2FOIP.kXN41HyriW5dLTkjm0QQoAHaHa%3Fpid%3DApi&q=0&b=1&p=0&a=0"}
                            alt="Song cover"
                        />
                    </div>
                    {#if i === 1}
                        <h1 class="mt-5">{song.title} - {song.artist}</h1>
                    {/if}
                </div>
            {:else}
                <div class="flex h-[60vw] max-h-[250px] w-[60vw] max-w-[250px] items-center justify-center"></div>
            {/if}
        {/each}
    </div>
</div>
