<script>
    import { onMount } from 'svelte';
    import { draw, fade } from 'svelte/transition';

    import { appState, completeRequest } from '../lib/state.js';
    
    let success = false;
    let error = null;

    let drawDuration = $appState.config.rehide_ms >= 750 ? 500 : 0;
    let fadeDuration = drawDuration * 0.6;
    let fadeDelay = drawDuration * 0.4;

    onMount(() => {
        window.setTimeout(
            completeRequest,
            // Extra 50ms so the window can finish disappearing before the redraw
            Math.min(5000, $appState.config.rehide_ms + 50),
        )
    })
</script>


<div class="flex flex-col h-screen items-center justify-center max-w-max m-auto">
    {#if $appState.currentRequest.approval === 'Approved'}
        <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: drawDuration}}" stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
    {:else}
        <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>
    {/if}

    <div in:fade="{{duration: fadeDuration, delay: fadeDelay}}" class="text-2xl font-bold">
        {$appState.currentRequest.approval}!
    </div>
</div>
