<script lang="ts">
    import { get_coords } from "$lib/gps"
    import { X, Check, Plus } from "@lucide/svelte"
    import { onMount } from "svelte"

    let privateRoom: boolean = $state(true)
    let coord = $state({ latitude: 0, longitude: 0 })
    let creating: boolean = $state(false)

    let name: string = $state()
    let range: number = $state()

    const privateStyle = "bg-red-500"
    const publicStyle = "bg-green-500"

    async function createRoom() {
        if (creating) {
            return
        }

        if (!name) {
            return
        }

        let pin
        if (privateRoom) {
            pin = Math.floor(Math.random() * 10000)
        } else {
            pin = ""
        }

        creating = true

        const res = await fetch(`/api/room/new?name=${encodeURIComponent(name)}&coords=${coord.latitude},${coord.longitude}&range=${encodeURIComponent(range ?? "100")}&pin=${pin}`, { method: "POST" })

        const json = await res.json()

        window.location.href = `/admin/${json.room_id}`
    }

    onMount(async () => {
        const res = await get_coords()
        coord = res.coords ?? { latitude: 46.6769043, longitude: 11.1851585 }
    })
</script>

<form class="flex flex-col items-center">
    <h1 class="text-4xl my-10">Create Room</h1>

    <div class="flex flex-col gap-3 w-1/2">
        <input
            bind:value={name}
            placeholder="Room name"
            class="p-2 text-xl 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 duration-100 outline-none focus:ring-2"
        />

        <input
            bind:value={range}
            type="number"
            min="10"
            placeholder="Range (in meters)"
            class="p-2 text-xl 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 duration-100 outline-none focus:ring-2"
        />

        <p>
            Room Coordinates:
            <span>{coord.latitude},{coord.longitude}</span>
        </p>

        <div class="flex flex-row items-center gap-2">
            Public Room:
            <button class="cursor-pointer w-10 h-10 rounded-lg duration-200 flex items-center justify-center {privateRoom ? privateStyle : publicStyle}" onclick={() => (privateRoom = !privateRoom)}>
                {#if privateRoom}
                    <X />
                {:else}
                    <Check />
                {/if}
            </button>
            {#if !privateRoom}
                <p class="text-sm italic">The room is flagged as public, everyone can join</p>
            {/if}
        </div>

        <button
            class="cursor-pointer flex flex-row items-center justify-center gap-3 border 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 duration-100 rounded-lg h-10 font-bold"
            onclick={createRoom}
        >
            CREA
            <Plus />
        </button>
    </div>
</form>
