<script lang="ts">
    import {api, globalRpc, session, token, workingWrapper} from '../../store';
    import {Checkbox, Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell} from 'flowbite-svelte';
    import {Checkmark, Error} from '../../icons';
    import LinkButton from '../../components/LinkButton.svelte';
    import {replace} from 'svelte-spa-router';

    let users: api.UserInfo[] = [];

    async function fetchUsers() {
        const resp = await workingWrapper(() => globalRpc.admin.listUsers());
        users = resp || [];
    }

    async function changeEnabled(user: number, target: boolean) {
        await workingWrapper(() => globalRpc.admin.setEnabled(user, target));
        await fetchUsers();
    }

    async function changeAdmin(user: number, target: boolean) {
        await workingWrapper(() => globalRpc.admin.setAdmin(user, target));
        await fetchUsers();
    }

    async function sudo(user: number) {
        await workingWrapper(() => globalRpc.admin.sudo(user))
        await session.update('');
        await replace('/view/0');
    }

    async function logout(user: number) {
        await workingWrapper(() => globalRpc.admin.logout(user));
        await fetchUsers();
    }

    async function removeTfa(user: number) {
        await workingWrapper(() => globalRpc.admin.disableTfa(user));
        await fetchUsers();
    }

    async function deleteUser(user: number) {
        await workingWrapper(() => globalRpc.admin.deleteUser(user));
        await fetchUsers();
    }

    async function shutdown() {
        if (confirm('Do you really want to shutdown the server?')) {
            await globalRpc.admin.shutdown();
        }
    }

    fetchUsers();
</script>

<Table hoverable divClass="w-full max-w-4xl relative">
    <TableHead>
        <TableHeadCell>Name</TableHeadCell>
        <TableHeadCell>Tfa</TableHeadCell>
        <TableHeadCell>Enabled</TableHeadCell>
        <TableHeadCell>Admin</TableHeadCell>
        <TableHeadCell class="sr-only">Actions</TableHeadCell>
    </TableHead>
    <TableBody>
        {#each users as user (user.id)}
            <TableBodyRow>
                <TableBodyCell>{user.name}</TableBodyCell>
                <TableBodyCell>{#if user.tfaEnabled}<Checkmark/>{:else}<Error/>{/if}</TableBodyCell>
                <TableBodyCell>
                    <Checkbox checked={user.enabled} on:change={changeEnabled.bind(null, user.id, !user.enabled)}></Checkbox>
                </TableBodyCell>
                <TableBodyCell>
                    <Checkbox checked={user.admin} on:change={changeAdmin.bind(null, user.id, !user.admin)}></Checkbox>
                </TableBodyCell>
                <TableBodyCell class="flex">
                    <LinkButton class="flex-auto" on:click={sudo.bind(null, user.id)}>Sudo</LinkButton>
                    <LinkButton class="flex-auto" on:click={logout.bind(null, user.id)}>Logout</LinkButton>
                    {#if user.tfaEnabled}<LinkButton class="flex-auto" color="amber" on:click={removeTfa.bind(null, user.id)}>Remove tfa</LinkButton>{/if}
                    <LinkButton class="flex-auto" color="red" on:click={deleteUser.bind(null, user.id)}>Delete</LinkButton>
                </TableBodyCell>
            </TableBodyRow>
        {/each}
    </TableBody>
</Table>
<LinkButton class="w-full max-w-4xl relative mt-8" color="red" on:click={shutdown}>Shutdown</LinkButton>
