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

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

import TimeRecorder from './TimeRecorder.svelte';

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

async function fetchModules(){
    const url  = `${location.protocol}//${location.host.replace('5173','8080')}/legacy/user/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 onclick(e){
    e.preventDefault();
    let href = e.target.getAttribute('href');
    if (href) router.navigate(href);
    return false;
}

async function search(e){
    e.preventDefault();
    router.navigate(`/search?key=${key}`);
    return false;
}

onMount(fetchModules);
</script>

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

<nav>
    <form onsubmit={search}>
        <input type="text" bind:value={key} />
        <button type="submit">{t('search')}</button>
    </form>
    <a href="/user" {onclick}>{t('users')}</a>
    <a href="/company" {onclick}>{t('companies')}</a>
    <a href="/project" {onclick}>{t('projects')}</a>
    <a href="/task" {onclick}>{t('tasks')}</a>
    <a href="/document" {onclick}>{t('documents')}</a>
    <a href="/bookmark" {onclick}>{t('bookmarks')}</a>
    <a href="/notes" {onclick}>{t('notes')}</a>
    <a href="/time" {onclick}>{t('timetracking')}</a>
    <a href="/wiki" {onclick}>{t('wiki')}</a>
    <a href="https://svelte.dev/tutorial/svelte/state" target="_blank">{t('tutorial')}</a>
    {#each modules as module,i}
    {#if module.name.trim()}<a href={module.url}>{module.name}</a>{/if}
    {/each}
    {#if user.name }
    <a onclick={logout}>{t('logout_user',{user:user.name})}</a>
    {/if}
    <TimeRecorder />
</nav>
