<script>
 import {
     Container,
     Icon,
 } from 'sveltestrap';

 import DateFormat from '../components/DateFormat.svelte';
 import { getNextAlarm, newNCyclesAlarm } from '../lib/alarmsingle';
 import { alarmsSingle } from '../stores/alarmsingle';
 import { quotes } from '../stores/quotes';

 let nextAlarmP = getNextAlarm();

 function newCyclesAlarm(ncycles) {
     newNCyclesAlarm(ncycles).then(() => {
         nextAlarmP = getNextAlarm();
         alarmsSingle.clear();
     })
 }
</script>

<Container class="flex-fill d-flex flex-column justify-content-center text-center">
    {#if $quotes.quoteOfTheDay}
        <figure>
            <blockquote class="blockquote text-muted">
                <p class="display-6">{$quotes.quoteOfTheDay.content}</p>
            </blockquote>
            <figcaption class="blockquote-footer">
                {$quotes.quoteOfTheDay.author}
            </figcaption>
        </figure>
    {:else}
        {#await quotes.refreshQOTD()}
            <div class="spinner-border" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        {/await}
    {/if}
    <div class="display-5 mb-5">
        {#await nextAlarmP}
        {:then nextalarm}
            Prochain réveil&nbsp;:
            {#if nextalarm.getDay() == new Date().getDay() && nextalarm.getMonth() == new Date().getMonth() && nextalarm.getFullYear() == new Date().getFullYear()}
                aujourd'hui à
                <DateFormat date={nextalarm} timeStyle="long" />
                <br class="d-block d-md-none" />
                <span class="text-muted">(dans {Math.trunc((nextalarm.getTime()-Date.now())/5400000)}&nbsp;cycles + {Math.trunc(((nextalarm.getTime()-Date.now())%5400000)/60000)}&nbsp;min)</span>
            {:else if nextalarm.getDay() == new Date(Date.now() + 86400000).getDay() && nextalarm.getMonth() == new Date(Date.now() + 86400000).getMonth() && nextalarm.getFullYear() == new Date(Date.now() + 86400000).getFullYear()}
                demain à
                <DateFormat date={nextalarm} timeStyle="long" />
                <br class="d-block d-md-none" />
                <span class="text-muted">(dans {Math.trunc((nextalarm.getTime()-Date.now())/5400000)}&nbsp;cycles + {Math.trunc(((nextalarm.getTime()-Date.now())%5400000)/60000)}&nbsp;min)</span>
            {:else if nextalarm.getTime() < Date.now() + 604800000}
                <span title={nextalarm}>{nextalarm.toLocaleString('default', {weekday: 'long'})}</span>
                à
                <DateFormat date={nextalarm} timeStyle="long" />
            {:else}
                <DateFormat date={nextalarm} dateStyle="short" timeStyle="long" />
            {/if}
        {/await}
    </div>
    <div class="d-flex gap-3 justify-content-center">
        <a
            href="alarms/single/new"
            class="btn btn-primary"
        >
            <Icon name="node-plus" />
            Programmer un nouveau réveil
        </a>
        <button
            class="btn btn-info"
            on:click={() => newCyclesAlarm(5)}
        >
            <Icon name="node-plus" />
            5 cycles
        </button>
        <button
            class="btn btn-info"
            on:click={() => newCyclesAlarm(6)}
        >
            <Icon name="node-plus" />
            6 cycles
        </button>
    </div>
    <div class="d-flex gap-3 mt-3 justify-content-center">
        <button class="btn btn-outline-info">
            <Icon name="skip-end-fill" />
            Chanson suivante
        </button>
        <button class="btn btn-danger">
            <Icon name="stop-circle" />
            Éteindre le réveil
        </button>
        <button class="btn btn-outline-info">
            <Icon name="fast-forward-fill" />
            Passer cette étape de la routine
        </button>
    </div>
</Container>
