<script>
    import { authenticated, token, user, preferences } from "../stores/auth";
    import { PreferencesForm, AddForm } from "./forms";
    import { addFormOpen } from "../stores/forms";

    const logout = () => { 
        preferences.reset();
        user.reset();
        token.unauthenticate();
    }
    let preferenceFormOpen = false;

    function showPreferencesDialog() {
        preferenceFormOpen = true;
    }

    function closePreferenceDialog() {
        preferenceFormOpen = false;
    }

    function showAddDialog() {
        addFormOpen.set(true);
    }
</script>

<div class="layout">
    {#if $authenticated}
        <nav>
            <div>
                <h1>Water</h1>
            </div>
            <div>
                <button on:click={showAddDialog}>
                    <span class="btn-icon">➕</span>
                    <span class="btn-content">Log Water</span>
                </button>
                <button on:click={showPreferencesDialog}>
                    <span class="btn-icon">⚙</span>
                    <span class="btn-content">Preference</span>
                </button>
                <button on:click={logout}>
                    <span class="btn-icon">🔒</span>
                    <span class="btn-content">Logout</span>
                </button>
            </div>
        </nav>
        <PreferencesForm open={preferenceFormOpen} on:close={closePreferenceDialog} />
    {/if}
    <div id="content">
        <slot />
    </div>
</div>

<style>
    nav {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        height: 64px;
        padding: 1em 0;
    }

    nav div button {
        margin: 0 .5em;
    }

    nav div button:first-child {
        margin-left: 0;
    }

    nav div button:last-child {
        margin-right: 0;
    }


    nav .btn-content {
        display: none;
    }

    nav div {
        width: fit-content;
    }

    nav div h1 {
        font-size: 1.75em;
    }

    #content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 2em;
        margin-top: 1em;
    }

    @media (min-width: 916px) {
        nav .btn-content {
            display: inline;
            margin-left: 1em;
        }
    }
</style>
