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

    const logout = () => 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}>Log Water</button>
                <button on:click={showPreferencesDialog}>Preference</button>
                <button on:click={logout}>Logout</button>
            </div>
        </nav>
        <PreferencesForm open={preferenceFormOpen} on:close={closePreferenceDialog} />
    {/if}
    <div id="content">
        <slot />
    </div>
</div>

<style>
    .layout {
        height: 100vh;
    }

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

    nav div {
        width: fit-content;
    }

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

    #content {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 2em;
        margin-top: 4em;
    }
</style>
