<script>
    import { onMount } from 'svelte';
    import { draw, fade } from 'svelte/transition';
    import { emit } from '@tauri-apps/api/event';
    import { invoke } from '@tauri-apps/api/tauri';

    import { appState } from '../lib/state.js';
    import { navigate } from '../lib/routing.js';
    import ErrorAlert from '../ui/ErrorAlert.svelte';
    import Icon from '../ui/Icon.svelte';
    import Link from '../ui/Link.svelte';
    
    let error = null;
    
    async function respond() {
        let response = {
            id: $appState.currentRequest.id,
            approval: 'Denied',
        }

        try {
            await invoke('respond', {response});
            $appState.currentRequest = null;
            window.setTimeout(() => navigate('Home'), 1000);
        }
        catch (e) {
            error = e;
        }

    }

    onMount(respond);
</script>

{#if error}
    <div class="flex flex-col h-screen items-center justify-center m-auto max-w-lg">
        <ErrorAlert>
            {error}
            <svelte:fragment slot="buttons">
                <Link target="Home">
                    <button class="btn btn-sm bg-transparent hover:bg-[#cd5a5a] border border-error-content text-error-content" on:click="{() => navigate('Home')}">
                        Ok
                    </button>
                </Link>
            </svelte:fragment>
        </ErrorAlert>
    </div>
{:else}
    <div class="flex flex-col items-center justify-center h-screen max-w-max m-auto">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-36 h-36" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor">
            <path in:draw="{{duration: 500}}" stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>

        <div in:fade="{{delay: 200, duration: 300}}" class="text-2xl font-bold">Denied!</div>
    </div>
{/if}