<script>
 import { tick } from 'svelte';

 import {
     Container,
     Form,
     FormGroup,
     Icon,
     Input,
     InputGroup,
     InputGroupText,
     Label,
     Spinner,
 } from '@sveltestrap/sveltestrap';

 import { actions } from '$lib/stores/actions';
 import { getSettings } from '$lib/settings';

 let settingsP = getSettings();

 $: settingsP.then((s) => settings = s);

 let settings;

 async function submitSettings() {
     await tick();
     settings.save();
 }
</script>

<Container class="flex-fill d-flex flex-column py-2">
    <h2>
        Paramètres
    </h2>
    <Form on:submit={submitSettings}>
        {#await settingsP}
            <div class="d-flex justify-content-center align-items-center gap-2">
                <Spinner color="primary" /> Chargement en cours&hellip;
            </div>
        {:then}
            <FormGroup>
                <Label for="gongIntervals">Intervalle entre les gongs</Label>
                <InputGroup>
                    <Input
                        type="number"
                        id="gongIntervals"
                        placeholder="20"
                        bind:value={settings.gong_interval}
                        on:input={submitSettings}
                    />
                    <InputGroupText>min</InputGroupText>
                </InputGroup>
            </FormGroup>

            <FormGroup>
                <Label for="weatherDelay">Annonce météo après</Label>
                <InputGroup>
                    <Input
                        type="number"
                        id="weatherDelay"
                        placeholder="5"
                        bind:value={settings.weather_delay}
                        on:input={submitSettings}
                    />
                    <InputGroupText>min</InputGroupText>
                </InputGroup>
            </FormGroup>

            <FormGroup>
                <Label for="weatherRituel">Rituel pour l'annonce météo</Label>
                {#if $actions.list}
                    <Input
                        type="select"
                        id="weatherRituel"
                        bind:value={settings.weather_action}
                        on:input={submitSettings}
                    >
                    {#each $actions.list as action (action.id)}
                        <option value="{action.path}">{action.name}</option>
                    {/each}
                    </Input>
                {:else}
                    {#await actions.refresh()}
                        <div class="d-flex justify-content-center align-items-center gap-2">
                            <Spinner color="primary" /> Chargement en cours&hellip;
                        </div>
                    {/await}
                {/if}
            </FormGroup>

            <FormGroup>
                <Label for="greetingLanguage">Langue de salutation</Label>
                <Input
                    type="select"
                    id="greetingLanguage"
                    bind:value={settings.language}
                    on:input={submitSettings}
                >
                    <option value="fr_FR">Français</option>
                    <option value="en_US">Anglais</option>
                    <option value="es_ES">Espagnol</option>
                    <option value="de_DE">Allemand</option>
                </Input>
            </FormGroup>

            <FormGroup>
                <Label for="maxRunTime">Durée maximale d'exécution du réveil</Label>
                <InputGroup>
                    <Input
                        type="number"
                        id="maxRunTime"
                        placeholder="60"
                        bind:value={settings.max_run_time}
                        on:input={submitSettings}
                    />
                    <InputGroupText>min</InputGroupText>
                </InputGroup>
            </FormGroup>

            <FormGroup>
                <Label for="maxVolume">Volume maximum</Label>
                <InputGroup>
                    <Input
                        type="range"
                        id="maxVolume"
                        min="0"
                        max="65535"
                        bind:value={settings.max_volume}
                        on:input={submitSettings}
                    />
                </InputGroup>
            </FormGroup>
        {/await}
    </Form>
</Container>
