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

    import { api, eventStream }   from '../../urls.svelte.js';
    import { error, yikes }       from '../../warn.svelte';
    import { t }                  from '../../translations.svelte.js';

    const router   = useTinyRouter();
    let events     = null;
    let projects   = $state(null);
    let companies  = $state(null);
    let showClosed = $state(router.query.closed == "show");

    let sortedProjects = $derived.by(() => Object.values(projects).sort((a, b) => a.name.localeCompare(b.name)));

    function handleUpdate(evt){
        let json = JSON.parse(evt.data);
        if (json.project) projects[json.project.id] = json.project;
    }

    async function loadProjects(){
        events = eventStream(handleUpdate,handleUpdate,null);
        let url  = api('company/list');
        let resp = await fetch(url,{credentials:'include'});
        if (resp.ok){
            companies = await resp.json();
            url       = `${location.protocol}//${location.host.replace('5173','8080')}/api/project/list`;
            resp = await fetch(url,{
                credentials : 'include',
                method      : 'POST',
                body        : JSON.stringify({show_closed:showClosed})
            });
            if (resp.ok){
                projects = await resp.json();
                yikes();
            } else {
	        error(resp);
            }
        } else {
            error(resp);
        }
    }

    async function setState(pid,state_name){
        const url  = api(`project/${pid}`);
        const resp = await fetch(url,{
            credentials : 'include',
            method      : 'PATCH',
            body        : JSON.stringify({status:state_name})
        });
        if (resp.ok){
            var prj                 = await resp.json();
            projects[prj.id].status = prj.status;
            yikes();
        } else {
            error(await resp.text());
        }
    }

    function show(e){
        e.preventDefault();
        let target = e.currentTarget;
        let href = target.getAttribute('href');
        if (href) router.navigate(href);
        return false;
    }

    function toggleClosed(){
        router.navigate(showClosed?'/project':'/project?closed=show');
        showClosed = !showClosed;
        loadProjects();
    }

    onMount(loadProjects);
	onDestroy(() => {
		if (events) events.close();
	})
</script>

<svelte:head>
    <title>Umbrella – {t('Projects')}</title>
</svelte:head>

<fieldset>
    <legend>
        {t('projects')}
        <button onclick={() => router.navigate('/project/add')}><span class="symbol"></span> {t('create_new_object',{object:t('project')})}</button>
        <button onclick={toggleClosed}><span class="symbol"></span> {t(showClosed?'hide_closed':'show_closed')}</button>
    </legend>
    {#if projects}
    <table class="project list">
        <thead>
            <tr>
                <th>{t('name')}</th>
                <th>{t('company')}</th>
                <th>{t('state')}</th>
                <th>{t('members')}</th>
                <th>{t('actions')}</th>
            </tr>
        </thead>
        <tbody>
            {#each sortedProjects as project}
            <tr>
                <td class="name" onclick={show} href={`/project/${project.id}/view`} >
                    <a href={`/project/${project.id}/view`} onclick={show}>{project.name}</a>
                </td>
                <td class="company" onclick={show} href={`/project/${project.id}/view`} >
                    {#if project.company_id && companies[project.company_id]}
                    {companies[project.company_id].name}
                    {/if}
                </td>
                <td class="state" onclick={show} href={`/project/${project.id}/view`} >
                    <a href={`/project/${project.id}/view`} onclick={show}>{t("state_"+project.allowed_states[project.status]?.toLowerCase())}</a>
                </td>
                <td class="members" onclick={show} href={`/project/${project.id}/view`} >
                    <a href={`/project/${project.id}/view`} onclick={show}>
                    {#each Object.entries(project.members) as [uid,member]}
                    <div>{member.user.name}</div>
                    {/each}
                    </a>
                </td>
                <td class="actions">
                    <!-- <button class="edit     symbol" title={t('edit')}></button> -->
                    {#if project.status < 60}
                    <button class="complete symbol" title={t('complete')} onclick={() => setState(project.id,'COMPLETE')} ></button>
                    <button class="abort    symbol" title={t('abort')} onclick={() => setState(project.id,'CANCELLED')} ></button>
                    {:else}
                    <button class="open     symbol" title={t('open')} onclick={() => setState(project.id,'OPEN')} ></button>
                    {/if}
                </td>
            </tr>
            {/each}
        </tbody>
    </table>
    {/if}
</fieldset>
