<script>
    import Dialog from "./Dialog.svelte";

    let { add, close } = $props();
    let step = $state(0);

    let type = null;
    let streamId = $state("doggoat");
</script>

<Dialog close={() => close?.()}>
    <div class="add-stream-dialog">
        {#if step === 0}
            <div class="step-0">
                <h2>Add stream</h2>
                <div class="buttons">
                    <button
                        onclick={() => {
                            type = "vdo";
                            step = 1;
                        }}>vdo.ninja</button
                    >
                    <button
                        onclick={() => {
                            type = "twitch";
                            step = 1;
                        }}>Twitch</button
                    >
                </div>
            </div>
        {/if}
        {#if step === 1}
            <div class="step-1">
                <h2>Add stream</h2>
                <p>
                    Example:<br />
                    https://vdo.ninja/?view=<strong>doggoat</strong
                    >&bitrate=4500&proaudio<br />
                    https://www.twitch.tv/<strong>saltybet</strong>
                </p>
                <label
                    >Stream ID: <input
                        type="text"
                        bind:value={streamId}
                    /></label
                >
                <button
                    onclick={() => {
                        add?.({ type, streamId });
                        step = 0;
                    }}>Add</button
                >
            </div>
        {/if}
    </div>
</Dialog>

<style>
    .add-stream-dialog {
        h2 {
            text-align: center;
            margin: 0 0 0.75rem 0;
        }

        .buttons {
            display: grid;
            justify-content: center;
            gap: 0.25rem;
        }
    }
</style>
