<script>
    import { createEventDispatcher } from 'svelte';
    import { appState, cleanupRequest } from '../../lib/state.js';

    import Link from '../../ui/Link.svelte';
    import KeyCombo from '../../ui/KeyCombo.svelte';


    // Executable paths can be long, so ensure they only break on \ or /
    function breakPath(path) {
        return path.replace(/(\\|\/)/g, '$1<wbr>');
    }

    // Extract executable name from full path
    const client = $appState.currentRequest.client;
    const m = client.exe?.match(/\/([^/]+?$)|\\([^\\]+?$)/);
    const appName = m[1] || m[2];

    const dispatch = createEventDispatcher();

    function setResponse(approval, base) {
        $appState.currentRequest.response = {
            id: $appState.currentRequest.id,
            approval,
            base,
        };
        dispatch('response');
    }
</script>


{#if $appState.currentRequest?.base}
    <div class="alert alert-warning shadow-lg">
        <div>
            <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
            <span>
                WARNING: This application is requesting your base AWS credentials.
                These credentials are less secure than session credentials, since they don't expire automatically.
            </span>
        </div>
    </div>
{/if}

<div class="space-y-1 mb-4">
    <h2 class="text-xl font-bold">
        {#if $appState.currentRequest.type === 'Aws'}
            {#if $appState.currentRequest.name}
                {appName ? `"${appName}"` : 'An appplication'} would like to access your AWS access key "{$appState.currentRequest.name}".
            {:else}
                {appName ? `"${appName}"` : 'An appplication'} would like to access your default AWS access key
            {/if}
        {:else if $appState.currentRequest.type === 'Ssh'}
            {appName ? `"${appName}"` : 'An application'} would like to use your SSH key "{$appState.currentRequest.key_name}".
        {:else if $appState.currentRequest.type === 'Docker'}
            {appName ? `"${appName}"` : 'An application'} would like to use your Docker credentials for <code>{$appState.currentRequest.server_url}</code>.
        {/if}
    </h2>

    <div class="grid grid-cols-[auto_1fr] gap-x-3">
        <div class="text-right">Path:</div>
        <code class="">{@html client.exe ? breakPath(client.exe) : 'Unknown'}</code>
        <div class="text-right">PID:</div>
        <code>{client.pid}</code>
    </div>
</div>

<div class="w-full grid grid-cols-[1fr_auto] items-center gap-y-6">
        <!-- Don't display the option to approve with session credentials if base was specifically requested -->
        {#if !$appState.currentRequest?.base}
            <h3 class="font-semibold">
                {#if $appState.currentRequest.type === 'Aws'}
                    Approve with session credentials
                {:else}
                    Approve
                {/if}
            </h3>
            <Link target={() => setResponse('Approved', false)} hotkey="Enter" shift={true}>
                <button class="w-full btn btn-success">
                    <KeyCombo keys={['Shift', 'Enter']} />
                </button>
            </Link>
        {/if}

        {#if $appState.currentRequest.type === 'Aws'}
            <h3 class="font-semibold">
                <span class="mr-2">
                    {#if $appState.currentRequest?.base}
                        Approve
                    {:else}
                        Approve with base credentials
                    {/if}
                </span>
            </h3>
            <Link target={() => setResponse('Approved', true)} hotkey="Enter" shift={true} ctrl={true}>
                <button class="w-full btn btn-warning">
                    <KeyCombo keys={['Ctrl', 'Shift', 'Enter']} />
                </button>
            </Link>
        {/if}

        <h3 class="font-semibold">
            <span class="mr-2">Deny</span>
        </h3>
        <Link target={() => setResponse('Denied', false)} hotkey="Escape">
            <button class="w-full btn btn-error">
                <KeyCombo keys={['Esc']} />
            </button>
        </Link>
</div>
