<script>
    import { props } from '@abide/abide/ui/props'
    import type { Snippet } from '@abide/abide/shared/snippet'

    const { title, children } = props<{ title: string; children?: Snippet }>()
</script>

<section>
    <h2>{title}</h2>
    {#if children}{children()}{:else}<p>Nothing here yet.</p>{/if}
</section>

<style>
    section {
        border: 1px solid gray;
    }
</style>

<script>
    import { getMessages } from '$server/rpc/getMessages'
    import { sendMessage } from '$server/rpc/sendMessage' // POST, declared like getMessages
    import { chat } from '$server/sockets/chat'
    import { state } from '@abide/abide/ui/state'
    import { watch } from '@abide/abide/ui/watch'
    import { html } from '@abide/abide/ui/html'
    import { props } from '@abide/abide/ui/props'
    import Panel from '$ui/components/Panel.abide'

    const { room = 'lobby' } = props<{ room?: string }>()

    let draft = state('')
    let author = state('anon')
    let tone = state('friendly')
    let notify = state(true)
    let volume = state(5, (next, previous) => (Number.isFinite(next) ? next : previous))
    let shout = state.computed(() => draft.toUpperCase())
    let roomDraft = state.linked(() => room)

    // watch is the one reaction primitive: a socket, an rpc, or a tracked thunk.
    watch(chat, () => getMessages.refresh({ room }))
    watch(() => console.log(author, tone))

    // a writable computed lives at the binding: bind:value={{ get, set }}
    const get = () => draft.trim()
    const set = (next) => (draft = next)

    const focus = (element) => element.focus()
    const panelProps = { title: 'Live feed' }
    const draftAttrs = { placeholder: 'say something', autocomplete: 'off' }

    async function send() {
        await sendMessage({ room: roomDraft, author, text: draft })
        draft = ''
    }
</script>

{#snippet line(message)}
    <li>{message.author}: {message.text}</li>
{/snippet}

<Panel {...panelProps}>
    <h1 class:muted={!notify} style:opacity={notify ? '1' : '0.6'}>
        {room} — {shout}
    </h1>

    {#await getMessages({ room })}
        <p>loading…</p>
    {:then messages}
        {#if messages.length === 0}
            <p>No messages yet.</p>
        {:else if messages.length < 100}
            <ul>
                {#for message, i of messages by message.id}
                    {line(message)}
                {/for}
            </ul>
        {:else}
            <script>
                // branch-local state, re-seeded each time this branch mounts
                let offset = state(0)
            </script>
            <p>huge room — showing from {offset}</p>
            <button onclick={() => (offset = offset + 100)}>next</button>
            <style>
                p {
                    font-variant-numeric: tabular-nums;
                }
            </style>
        {/if}
    {:catch error}
        <p>failed to load: {error.message}</p>
    {:finally}
        <p>checked just now</p>
    {/await}

    <ol>
        {#for await message of chat}
            {line(message)}
        {/for}
    </ol>

    {#switch tone}
        {:case 'friendly'}
            <p>{html`<em>be&nbsp;kind</em>`}</p>
        {:default}
            <p>say anything</p>
    {/switch}

    {#try}
        <p>{JSON.parse(draft).summary}</p>
    {:catch}
        <p>draft isn't JSON yet</p>
    {/try}

    <form onsubmit={(event) => { event.preventDefault(); send() }}>
        <input attach={focus} bind:value={draft} {...draftAttrs} />
        <input bind:value={{ get, set }} />
        <label><input type="checkbox" bind:checked={notify} /> notify</label>
        <label><input type="radio" bind:group={tone} value="friendly" /> friendly</label>
        <label><input type="radio" bind:group={tone} value="blunt" /> blunt</label>
        <input type="range" bind:value={volume} min="0" max="10" />
        <select bind:value={author}>
            <option>anon</option>
            <option>me</option>
        </select>
        <button disabled={draft === ''}>send</button>
    </form>
</Panel>

<style>
    form {
        display: flex;
        gap: 0.5rem;
    }
    .muted {
        color: gray;
    }
</style>