<script>
    import { getSelectedLocales, getLocaleName } from "./locale.svelte.js";
    let { channel, onLocaleChange } = $props();
    let selectedLocales = $state(getSelectedLocales());

    let selectedLocaleNames = $derived(
        selectedLocales.map((id) => getLocaleName(channel, id)),
    );
    function handleChange() {
        localStorage.setItem("selectedLocales", selectedLocales);
        onLocaleChange();
    }
</script>

<details class="dropdown">
    <summary>Locales: {selectedLocaleNames.join(", ")}</summary>
    <ul>
        {#each channel.locales as locale}
            <li>
                <label>
                    <input
                        type="checkbox"
                        bind:group={selectedLocales}
                        onchange={handleChange}
                        value={locale.id}
                    />
                    {locale.name}
                </label>
            </li>
        {/each}
    </ul>
</details>
