<script>
    import { onMount, createEventDispatcher } from 'svelte';
    import { invoke } from '@tauri-apps/api/tauri';
    import Button from '../ui/Button.svelte';

    export let appState;

    const dispatch = createEventDispatcher();
    onMount(async () => {
        // will block until a request comes in
        let req = await appState.pendingRequests.get();
        appState.currentRequest = req;
        console.log('Got credentials request from queue:');
        console.log(req);
        dispatch('navigate', {target: 'Approve'});
    });

    let status = 'unknown';
    onMount(async() => {
        status = await invoke('get_session_status');
    })
</script>

<h1 class="text-4xl text-gray-300">Creddy</h1>

<p>Credential status: {status}</p>

{#if status === 'locked'}
    <Button on:click={() => dispatch('navigate', {target: 'Unlock'})}>Unlock</Button>
{:else if status === 'empty'}
    <Button on:click={() => dispatch('navigate', {target: 'EnterCredentials'})}>
        Enter Credentials
    </Button>
{/if}