<script>
    import { onMount } from "svelte";
    import Header from "./lib/Header.svelte";
    import Stream from "./lib/Stream.svelte";

    let streams = [];
    let fracsX = 0;
    let fracsY = 0;
    let containerElement;
    let showButtons = false;

    onMount(() => {
        streams = new URLSearchParams(window.location.search).getAll("streams");

        switch (streams.length) {
            case 1:
                fracsX = 1;
                fracsY = 1;
                break;
            case 2:
                fracsX = 1;
                fracsY = 2;
                break;
            case 3:
            case 4:
                fracsX = 2;
                fracsY = 2;
                break;
            default:
                fracsX = Math.round(streams.length / 3);
                fracsY = 3;
        }
    });
</script>

<main>
    {#if containerElement}
        <Header {containerElement} />
    {/if}
    <div
        bind:this={containerElement}
        class="streams"
        style={"grid-template-columns: repeat(" +
            fracsY +
            ", 1fr); grid-template-rows: repeat(" +
            fracsX +
            ", 1fr)"}
    >
        {#if streams}
            {#each streams as stream}
                <Stream {stream} />
            {/each}
        {/if}
    </div>
</main>

<style>
    .streams {
        display: grid;
        height: 100vh;
        width: 100vw;
    }
</style>
