<script lang="ts">
    import {error_banner, rpc, session, token, workingWrapperO} from '../store';
    import {Accordion, AccordionItem, Button, ButtonGroup, Input, InputAddon} from 'flowbite-svelte';
    import {Password} from '../icons';
    import {info_banner} from '../store.js';

    const s = session.s;
    const tfa_enabled: boolean = $s?.tfa_enabled ?? false;
    const change_pw_data = {o: '', n: '', n2: ''}

    async function changePw() {
        const { o: old, n: password, n2: password2 } = change_pw_data;
        if (password != password2) {
            error_banner.set('Password doesn\'t match');
            return;
        }

        const resp = await workingWrapperO(() => rpc.Auth_change_password($token ?? '', old, password));
        if (resp) {
            info_banner.set('Changed password');
            change_pw_data.o = '';
            change_pw_data.n = '';
            change_pw_data.n2 = '';
        }
    }

    async function disableTfa() {
        await workingWrapperO(() => rpc.Auth_tfa_disable($token ?? ''));
        token.set(null);
    }

    async function logoutAll() {
        await workingWrapperO(() => rpc.Auth_logout_all($token ?? ''));
        token.set(null);
    }

    async function deleteAccount() {
        if (confirm("Do your really want to delete your account?")) {
            await workingWrapperO(() => rpc.Auth_delete_user($token ?? ''));
            token.set(null);
        }
    }

    function keyUp(e: KeyboardEvent) {
        if (e.key == 'Enter') changePw();
    }
</script>


<Accordion class="w-full max-w-lg text-">
    <AccordionItem>
        <span slot="header">Change password</span>
        <ButtonGroup class="w-full mb-4">
            <InputAddon><Password /></InputAddon>
            <Input type="password" placeholder="Old password" bind:value={change_pw_data.o} on:keyup={keyUp}></Input>
        </ButtonGroup>
        <ButtonGroup class="w-full mb-2">
            <InputAddon><Password /></InputAddon>
            <Input type="password" placeholder="New password" bind:value={change_pw_data.n} on:keyup={keyUp}></Input>
        </ButtonGroup>
        <ButtonGroup class="w-full mb-4">
            <InputAddon><Password /></InputAddon>
            <Input type="password" placeholder="Repeat new password" bind:value={change_pw_data.n2} on:keyup={keyUp}></Input>
        </ButtonGroup>
        <Button class="w-full" color="primary" on:click={changePw}>Change password</Button>
    </AccordionItem>
    <AccordionItem>
        <span slot="header">Two factor authentication: <span class={tfa_enabled ? 'text-green-600' : 'text-red-600'}>{tfa_enabled ? 'enabled': 'disabled'}</span></span>
        {#if tfa_enabled}
            <Button class="w-full" color="red" on:click={disableTfa}>Disable</Button>
        {:else}
            <Button class="w-full" color="green" href="#/tfa">Enable</Button>
        {/if}
    </AccordionItem>
    <AccordionItem>
        <span slot="header">Account actions</span>
        <ButtonGroup class="w-full">
            <Button class="w-full" color="red" on:click={logoutAll}>Logout everywhere</Button>
            <Button class="w-full" color="red" on:click={deleteAccount}>Delete account</Button>
        </ButtonGroup>
    </AccordionItem>
</Accordion>
