<script>
	import {onMount} from "svelte";
	import {location, link} from "svelte-spa-router";
	import {logout_user} from "$app/lib/services/user-service";
	import {random_string, switch_theme} from "$shared/lib/helpers";
	import {get_session_data} from "$shared/lib/session";
	import ProfileModal from "$app/pages/views/profile-modal.svelte";
	import {Menu, MenuItem, MenuItemSeparator} from "$shared/components/menu";
	import Button from "$shared/components/button.svelte";
	import {IconNames} from "$shared/lib/configuration";

	let ProfileModalFunctions = {};
	let showUserMenu = false;
	let userMenuTriggerNode;
	const userMenuId = "__menu_" + random_string(3);
	const username = get_session_data().profile.username;

	onMount(() => {
		userMenuTriggerNode = document.getElementById("open-user-menu");
	});
</script>

<ProfileModal bind:functions={ProfileModalFunctions}/>

<nav class="container max-width-xl@md width-fit-content@md width-100% max-width-none margin-y-xs@md margin-bottom-xs block@md position-relative@md position-absolute bottom-unset@md bottom-0">
    <div class="tabs-nav-v2 justify-between">
        <div class="tab-v2">
            <div class="tab-v2">
                <a href="/home"
                   use:link
                   class="tabs-nav-v2__item {$location === '/home' ? 'tabs-nav-v2__item--selected' : ''}">Home</a>
            </div>
            <div class="tab-v2">
                <a href="/data"
                   use:link
                   class="tabs-nav-v2__item {$location === '/data' ? 'tabs-nav-v2__item--selected' : ''}">Data</a>
            </div>
            <div class="tab-v2">
                <a href="/settings"
                   use:link
                   class="tabs-nav-v2__item {$location === '/settings' ? 'tabs-nav-v2__item--selected' : ''}">Settings</a>
            </div>
        </div>
        <div class="tab-v2 padding-x-sm">
            <Button class="user-menu-control"
                    variant="reset"
                    id="open-user-menu"
                    on:click={() => showUserMenu = !showUserMenu}
                    text={username}
                    icon={IconNames.chevronDown}
                    icon_width="2rem"
                    icon_height="2rem"
                    icon_right_aligned="true"
                    title="Toggle user menu"
                    aria-controls="{userMenuId}"
            />
            <Menu bind:show="{showUserMenu}"
                  trigger={userMenuTriggerNode}
                  id="{userMenuId}">
                <div slot="options">
                    <MenuItem on:click={() => ProfileModalFunctions.open()}>
                        <span title="Administrate your profile">Profile</span>
                    </MenuItem>
                    <MenuItem on:click={() => switch_theme()}>
                        <span title="Change between a dark and light theme">Switch theme</span>
                    </MenuItem>
                    <MenuItemSeparator/>
                    <MenuItem danger="true" on:click={() => logout_user()}>
                        <span title="Log out of your profile">Log out</span>
                    </MenuItem>
                </div>
            </Menu>
        </div>
    </div>
</nav>

<main class="container max-width-xl">
    <slot/>
</main>
