<script>
import { onMount }       from 'svelte';
import { useTinyRouter } from 'svelte-tiny-router';

import { logout, user }  from '../user.svelte.js';
import { t }             from '../translations.svelte.js';

const router  = useTinyRouter();
const modules = $state([]);

async function fetchModules(){
    const url  = `${location.protocol}//${location.host.replace('5173','8080')}/legacy/modules`;
    const resp = await fetch(url,{credentials:'include'});
    if (resp.ok){
        const arr = await resp.json();
        for (let entry of arr) {
            let name = t('module.'+entry.module);
            if (name) modules.push({name:name,url:entry.url});
        }
    } else {
        console.log('error');
    }
}

function go(path){
    router.navigate(path);
    return false;
}

onMount(fetchModules);
</script>

<style>
    nav a{
        padding: 3px;
    }
</style>

<nav>
    <a href="#" onclick={() => go('/user')}>{t('users')}</a>
    <a href="#" onclick={() => go('/project')}>{t('projects')}</a>
    <a href="#" onclick={() => go('/task')}>{t('tasks')}</a>
    <a href="#" onclick={() => go('/document')}>{t('documents')}</a>
    <a href="#" onclick={() => go('/bookmark')}>{t('bookmarks')}</a>
    <a href="#" onclick={() => go('/notes')}>{t('notes')}</a>
    <a href="https://svelte.dev/tutorial/svelte/state" target="_blank">{t('tutorial')}</a>
    {#each modules as module,i}<a href={module.url}>{module.name}</a>{/each}
    {#if user.name }
    <a onclick={logout}>{t('logout')}</a>
    {/if}
</nav>
