<script lang="ts">
    import { LoaderCircle } from "@lucide/svelte"

    const COOLDOWN_SECS = 30

    let { roomId } = $props()
    let input = $state("")
    let loading: boolean = $state(false)
    let cooldowned: boolean = $state(false)

    $effect(() => {
        console.log("cooldowned is now", cooldowned)
    })

    async function sendSong() {
        loading = true
        await fetch(`/api/addsong?room=${roomId}&query=${input}`, { method: "POST" })
        input = ""
        loading = false

        cooldowned = true
        setTimeout(() => {
            cooldowned = false
            console.log("unset cooldown")
        }, COOLDOWN_SECS * 1000)
    }
</script>

<div
    class={`flex h-full w-full flex-row items-center gap-2 rounded-md border-dark-pine-muted bg-light-pine-overlay hover:bg-dark-pine-base/20 dark:bg-dark-pine-overlay hover:dark:bg-light-pine-base/20 ${loading ? "disabled" : ""}`}
>
    <input
        type="text"
        placeholder="Song & Artist"
        class="h-[50px] w-3/4 rounded px-4 font-bold text-white outline-none"
        bind:value={input}
        onkeydown={(e) => {
            if (e.key == "Enter") {
                sendSong()
            }
        }}
        disabled={loading}
    />
    {#if loading}
        <span class="animate-spin">
            <LoaderCircle />
        </span>
    {/if}

    <button
        disabled={cooldowned}
        class="i-lucide-check h-[40px] w-1/4 rounded font-semibold shadow-xl duration-100 active:scale-90 {!cooldowned
            ? 'cursor-pointer bg-light-pine-blue hover:scale-105 dark:bg-dark-pine-blue '
            : 'bg-light-pine-muted dark:bg-light-pine-muted'}"
        onclick={sendSong}>Add</button
    >
    <span class="i-lucide-chevrons-left"></span>
</div>
