<script>

    import { createEventDispatcher } from 'svelte';
    import { fade, slide } from 'svelte/transition';
    import { invoke } from '@tauri-apps/api/core';

    import ErrorAlert from '../../ui/ErrorAlert.svelte';
    import Icon from '../../ui/Icon.svelte';
    import PassphraseInput from '../../ui/PassphraseInput.svelte';


    export let record;

    let local = JSON.parse(JSON.stringify(record));
    $: isModified = JSON.stringify(local) !== JSON.stringify(record);
    let showDetails = record?.isNew;

    let alert;
    const dispatch = createEventDispatcher();
    async function saveCredential() {
        await invoke('save_credential', {record: local});
        dispatch('save', local);
        showDetails = false;
    }
</script>

<div class="rounded-box space-y-4 bg-base-200">
    <div class="flex items-center px-6 py-4 gap-x-4">
        {#if !record.isNew}
            {#if showDetails}
                <input
                    type="text"
                    class="input input-bordered bg-transparent text-lg font-bold grow"
                    bind:value={local.name}
                >
            {:else}
                <h3 class="text-lg font-bold break-all">
                    {record.name}
                </h3>
            {/if}
        {/if}

        <div class="join ml-auto">
            <button
                type="button"
                class="btn btn-outline join-item"
                on:click={() => showDetails = !showDetails}
            >
                <Icon name="pencil" class="size-6" />
            </button>
            <button
                type="button"
                class="btn btn-outline btn-error join-item"
                on:click={() => dispatch('delete', record)}
            >
                <Icon name="trash" class="size-6" />
            </button>
        </div>
    </div>

    {#if showDetails}
        <form
            transition:slide|local={{duration: 200}}
            class=" px-6 pb-4 space-y-4"
            on:submit|preventDefault={() => alert.run(saveCredential)}
        >
            <ErrorAlert bind:this={alert} />

            <div class="grid grid-cols-[auto_1fr] items-center gap-4">
                {#if record.isNew}
                    <span class="justify-self-end">Name</span>
                    <input
                        type="text"
                        class="input input-bordered bg-transparent"
                        bind:value={local.name}
                    >
                {/if}

                <span class="justify-self-end">Server URL</span>
                <input
                    type="text"
                    class="input input-bordered font-mono bg-transparent"
                    bind:value={local.credential.ServerURL}
                >

                <span class="justify-self-end">Username</span>
                <input
                    type="text"
                    class="input input-bordered font-mono bg-transparent"
                    bind:value={local.credential.Username}
                >

                <span>Password</span>
                <div class="font-mono">
                    <PassphraseInput class="bg-transparent" bind:value={local.credential.Secret} />
                </div>
            </div>

            <div class="flex justify-end">
                {#if isModified}
                    <button
                        transition:fade={{duration: 100}}
                        type="submit"
                        class="btn btn-primary"
                    >
                        Save
                    </button>
                {/if}
            </div>
        </form>
    {/if}
</div>