<script lang="ts">
    import { type Room } from "$lib/types"
    let { room }: { room: Room } = $props()
    let showPinModal: boolean = $state(false)
    let pin: number = $state()
</script>

<div
    class="flex gap-2 w-82 cursor-pointer flex-col rounded-md border border-dark-pine-muted bg-light-pine-overlay p-3 hover:bg-dark-pine-base/20 dark:bg-dark-pine-overlay hover:dark:bg-light-pine-base/20"
>
    <button
        class="flex flex-row items-center"
        onclick={() => {
            if (!room.private) {
                window.location.href = "/room/" + room.id
                return
            }
            showPinModal = !showPinModal
        }}
    >
        <div class="flex flex-row">
            {room.name}
            {room.private ? "🔒" : ""}
        </div>
        <div class="grow"></div>
        <div class="flex flex-row items-center gap-2">
            <div class="font-mono">{Math.round(room.distance)}m</div>
            <div class="rounded bg-light-pine-blue px-2 py-0.5 text-dark-pine-text dark:bg-dark-pine-blue">Join</div>
        </div>
    </button>
    {#if showPinModal}
        <input
            placeholder="PIN (requied)"
            class="p-2 text-xl rounded-md border-dark-pine-muted bg-light-pine-overlay dark:bg-dark-pine-base hover:dark:bg-light-pine-base/20 duration-100 outline-none focus:ring-2"
            type="number"
            bind:value={pin}
        />
        <button
            onclick={() => {
                window.location.href = `/room/${room.id}?pin=${pin}`
            }}
            class="p-2 text-xl rounded-md border-dark-pine-muted bg-light-pine-overlay dark:bg-dark-pine-base hover:dark:bg-light-pine-base/20 duration-100 outline-none focus:ring-2">JOIN</button
        >
    {/if}
</div>
