<script lang="ts">
    import {api, rpc, session, state, StateE, token, workingWrapperO, workingWrapperR} from '../store';
    import {Checkbox, Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell} from 'flowbite-svelte';
    import {Checkmark, Error} from 'carbon-icons-svelte';
    import LinkButton from '../components/LinkButton.svelte';

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

    async function fetchUsers() {
        const resp = await workingWrapperR<api.UserInfo[]>(() => rpc.Admin_list_users($token ?? ''));
        if (resp != null)
            users = resp;
    }

    async function changeEnabled(user: number, target: boolean) {
        await workingWrapperO(() => rpc.Admin_set_enabled($token ?? '', user, target));
        await fetchUsers();
    }

    async function changeAdmin(user: number, target: boolean) {
        await workingWrapperO(() => rpc.Admin_set_admin($token ?? '', user, target));
        await fetchUsers();
    }

    async function sudo(user: number) {
        if (await workingWrapperO(() => rpc.Admin_sudo($token ?? '', user))) {
            await session.update($token);
            state.set({s: StateE.VIEW, view_node: 0});
        }
    }

    async function logout(user: number) {
        await workingWrapperO(() => rpc.Admin_logout($token ?? '', user));
        await fetchUsers();
    }

    async function removeTfa(user: number) {
        await workingWrapperO(() => rpc.Admin_disable_tfa($token ?? '', user));
        await fetchUsers();
    }

    async function deleteUser(user: number) {
        await workingWrapperO(() => rpc.Admin_delete_user($token ?? '', user));
        await fetchUsers();
    }

    async function shutdown() {
        if (confirm('Do you really want to shutdown the server?')) {
            await rpc.Admin_shutdown($token ?? '');
        }
    }

    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.tfa}<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.tfa}<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>
