<script>
    import { onMount } from 'svelte';
    import { slide, fade } from 'svelte/transition';
    import { writable } from 'svelte/store';
    import { invoke } from '@tauri-apps/api/core';

    import AwsCredential from './credentials/AwsCredential.svelte';
    import ConfirmDelete from './credentials/ConfirmDelete.svelte';
    import SshKey from './credentials/SshKey.svelte';
    // import NewSshKey from './credentials/NewSshKey.svelte';
    // import EditSshKey from './credentials/EditSshKey.svelte';
    import Icon from '../ui/Icon.svelte';
    import Nav from '../ui/Nav.svelte';


    let records = null
    $: awsRecords = (records || []).filter(r => r.credential.type === 'AwsBase');
    $: sshRecords = (records || []).filter(r => r.credential.type === 'Ssh');

    let defaults = writable({});
    async function loadCreds() {
        records = await invoke('list_credentials');
        let pairs = records.filter(r => r.is_default).map(r => [r.credential.type, r.id]);
        $defaults = Object.fromEntries(pairs);
    }
    onMount(loadCreds);

    function newAws() {
        records.push({
            id: crypto.randomUUID(),
            name: null,
            is_default: false,
            credential: {type: 'AwsBase', AccessKeyId: '', SecretAccessKey: ''},
            isNew: true,
        });
        records = records;
    }

    function newSsh() {
        records.push({
            id: crypto.randomUUID(),
            name: null,
            is_default: false,
            credential: {type: 'Ssh', algorithm: '', comment: '', private_key: '', public_key: '',},
            isNew: true,
        });
        records = records;
    }

    let confirmDelete;
    function handleDelete(evt) {
        const record = evt.detail;
        if (record.isNew) {
            records = records.filter(r => r.id !== record.id);
        }
        else {
            confirmDelete.confirm(record);
        }
    }
</script>


<Nav>
    <h1 slot="title" class="text-2xl font-bold">Credentials</h1>
</Nav>

<div class="max-w-xl mx-auto mb-12 flex flex-col gap-y-12 justify-center">
    <div class="flex flex-col gap-y-4">
        <div class="divider">
            <h2 class="text-xl font-bold">AWS Access Keys</h2>
        </div>

        {#if awsRecords.length > 0}
            {#each awsRecords as record (record.id)}
                <AwsCredential
                    {record} {defaults}
                    on:update={loadCreds}
                    on:delete={handleDelete}
                />
            {/each}
            <button class="btn btn-primary btn-wide mx-auto" on:click={newAws}>
                <Icon name="plus-circle-mini" class="size-5" />
                Add
            </button>
        {:else if records !== null}
            <div class="flex flex-col gap-6 items-center rounded-box border-2 border-dashed border-neutral-content/30 p-6">
                <div>You have no saved AWS credentials.</div>
                <button class="btn btn-primary btn-wide mx-auto" on:click={newAws}>
                    <Icon name="plus-circle-mini" class="size-5" />
                    Add
                </button>
            </div>
        {/if}
    </div>

    <div class="flex flex-col gap-y-4">
        <div class="divider">
            <h2 class="text-xl font-bold">SSH Keys</h2>
        </div>

        {#if sshRecords.length > 0}
            {#each sshRecords as record (record.id)}
                <SshKey {record} on:save={loadCreds} on:delete={handleDelete} />
            {/each}
            <button class="btn btn-primary btn-wide mx-auto" on:click={newSsh}>
                <Icon name="plus-circle-mini" class="size-5" />
                Add
            </button>
        {:else if records !== null}
            <div class="flex flex-col gap-6 items-center rounded-box border-2 border-dashed border-neutral-content/30 p-6">
                <div>You have no saved SSH keys.</div>
                <button class="btn btn-primary btn-wide mx-auto" on:click={newSsh}>
                    <Icon name="plus-circle-mini" class="size-5" />
                    Add
                </button>
            </div>
        {/if}
    </div>

</div>

<ConfirmDelete bind:this={confirmDelete} on:confirm={loadCreds} />
