<script>
    import { onMount }        from 'svelte';

    import { api }            from '../urls.svelte';
    import { t }              from '../translations.svelte';

    import Autocomplete       from './Autocomplete.svelte';
    import PermissionSelector from './PermissionSelector.svelte';

    let {
        addMember        = (entry)    => console.log(`no handler for addMember(${entry})`),
        dropMember       = (member)   => console.log(`no handler for dropMember(${member})`),
        getCandidates    = text => {},
        members,
        updatePermission = (uid,perm) => console.log(`no handler for updatePermission(${uid}, ${perm})`)
    } = $props();

    let permissions   = $state(null);
    let sortedMembers = $derived.by(() => Object.values(members).sort((a, b) => a.user.name.localeCompare(b.user.name)));

    async function loadPermissions(){
        const url  = api('task/permissions');
        const resp = await fetch(url,{credentials: 'include'});
        if (resp.ok){
            permissions = await resp.json();
        } else {
            message = await resp.text();
        }
    }

    function onSelect(entry){
        addMember(entry);
    }

    onMount(loadPermissions);
</script>

<table>
    <tbody>
    {#each sortedMembers as member,i}
    <tr>
        <td>{member.user.name}</td>
        <td>
            <PermissionSelector {permissions} selected={member.permission.code} onchange={(perm) => updatePermission(member.user.id,perm)} />
            {#if member.permission.name != 'OWNER'}
            <button onclick={() => dropMember(member)}>x</button>
            {/if}
        </td>
    </tr>
    {/each}
    <tr>
        <td>{t('add_object',{object:t('member')})}</td>
        <td>
            <Autocomplete {getCandidates} {onSelect} />
        </td>
    </tr>
    </tbody>
</table>
