<script>
    import {useTelegram} from "$lib/telegram.svelte.js";

    const { eventId = null } = $props();
    const telegram = useTelegram();
    let dataPrivacyConsent = $state(false);
    let ageConsent = $state(false)
    let buttonEnabled = $derived(() => dataPrivacyConsent && ageConsent && telegram?.initData);
</script>

{#if eventId}
    {#if telegram?.initData}
        <form method="POST" action="?/register">
            <input name="init-data" type="hidden" value={telegram?.initData} />
            <input name="event-id" type="hidden" value={eventId} />
            <div class="form-row">
                <label><input type="checkbox" bind:checked={dataPrivacyConsent}> Ich stimme zu das meine Daten bis zu 14 Tagen nach der Veranstaltung beibehalten werden</label>
            </div>
            <div class="form-row">
                <label><input type="checkbox" bind:checked={ageConsent}> Ich bin mindestens 16 Jahre alt oder komme in Begleitung eines Erwachsenen</label>
            </div>
            <div class="form-row">
                <button disabled={!buttonEnabled()}>Anmelden</button>
            </div>
        </form>
    {:else}
        <p>Bitte öffne diese Mini App im Telegram Bot um dich anzumelden! <a target="_blank" href="https://t.me/doggoatbot?startapp">Öffnen</a></p>
    {/if}
{:else}
    <p>Invalide Event-ID</p>
{/if}

<style>
    form {
        display: flex;
        flex-flow: column wrap;
        gap: 1rem;
    }
</style>