<script>
    import Package from './components/Package.svelte';

    let pluginsHeaders = [ 'Name', 'Description', 'Version', 'Owner', 'Site', 'Date' ];
    let pluginsPromise = getPlugins();
    let isDesc = true;

    $: sortedPlugins = pluginsPromise.then((plugins) => {
        return plugins.sort((first, second) => {
            return (isDesc ? -1 : 1) * Date.parse(first.date) - Date.parse(second.date);
        });
    });

    async function getPlugins() {
        const response = await fetch('http://localhost:80/');
        const text = await response.text();

        if (response.ok) {
            return JSON.parse(text).packages;
        }

        throw new Error(text);
    }

</script>

<style>
    .container {
        padding: 1rem;
    }

    .package-list {
        border: 1px solid #dddddd;
    }

    .button {
        cursor: pointer;
    }

    :global(tr) {
        display: flex;
    }

    :global(td), :global(th) {
        padding: 0.5rem;
        flex: 1;
    }

    .error {
        color: red;
    }
</style>

<main class="container">

    {#await sortedPlugins}

        <p>Waiting for plugins...</p>

    {:then plugins}

        <table class="package-list">

            <tr>
                {#each pluginsHeaders as header, id (id)}
                    {#if header === 'Date'}
                        <th on:click="{e => isDesc = !isDesc}" class="button">
                            {header} {isDesc ? '🡱' : '🡳'}
                        </th>
                    {:else}
                        <th>{header}</th>
                    {/if}
                {/each}
            </tr>

            {#each plugins as plugin, index (index) }
                <Package {...plugin} />
            {/each}

        </table>

    {:catch error}

        <p class="error">
            {error.message}
        </p>

    {/await}

</main>