<script>
    import {createEventDispatcher, getContext} from "svelte";
    import Icon from "../../common/Icon.svelte";
    import InlineEdit from "../InlineEdit.svelte";
    import BrowseModal from "./BrowseModal.svelte";

    const dispatch = createEventDispatcher();
    // export let field;
    // export let buttonLabel = "";
    // export let buttonClass = "";

    const channel = getContext("channel");
    export let schemas;
    export let recordId;
    $: showOptions = false;
    let browseModal;
    let inLineCreateRecord;

    function openBrowseModal(e, schema) {
        e.preventDefault();
        browseModal.open(schema);
    }

    function save(e) {
        e.preventDefault();
        console.log("Save inline");
        inLineCreateRecord = null;
        dispatch("save", {
            records: e.detail.records,
            after: recordId,
        });
    }

    function insert(e) {
        e.preventDefault();
        browseModal.close();
        showOptions = false;
        dispatch("insert", {
            records: e.detail.records,
            after: recordId,
        });
    }

    function createInlineReference(e, schemaUId) {
        e.preventDefault();
        axios
            .get(channel.lucentUrl + "/records/newInline?schema=" + schemaUId)
            .then((response) => {
                inLineCreateRecord = response.data;
                showOptions = false;
            })
            .catch((error) => {
                console.log(error);
            });
    }
</script>

{#if schemas.length > 1}
    <button
            type="button"
            class:is-first={!recordId}
            class=" btn btn-lg btn-link text-decoration-none inline-card-button"
            on:click|preventDefault={(e) => (showOptions = !showOptions)}
    >
        <Icon width={24} height={24} icon="circle-plus"/>
    </button>

    {#if showOptions}
        <div class="bg-light lx-card d-flex">
            {#each schemas as schema}
                <div
                        class="lx-card p-4 text-center me-4"
                        style="max-width: 250px;"
                >
                    <p>{schema.label}</p>

                    <div class="mb-2">
                        <button
                                class="btn btn-sm btn-primary"
                                on:click={(e) =>
                                createInlineReference(e, schema.name)}
                        >New
                        </button>
                        <button
                                class="btn btn-sm btn-outline-primary"
                                on:click={(e) => openBrowseModal(e, schema.name)}
                        >
                            <Icon icon="magnifying-glass"/>
                        </button
                        >
                    </div>
                </div>
            {/each}
        </div>
    {/if}
{:else}
    <div class="pb-2 text-start">
        <div class="mb-2">
            <button
                    class="btn btn-sm btn-primary"
                    on:click={(e) => createInlineReference(e, schemas[0].name)}
            >New
            </button>
            <button
                    class="btn btn-sm btn-outline-primary"
                    on:click={(e) => openBrowseModal(e, schemas[0].name)}
            >
                <Icon icon="magnifying-glass"/>
            </button
            >
        </div>
    </div>
{/if}

{#if inLineCreateRecord}
    <InlineEdit
            {...inLineCreateRecord}
            on:cancel={(e) => (inLineCreateRecord = null)}
            on:inlinesaved={save}
    />
{/if}

<BrowseModal bind:this={browseModal} on:insert={insert}/>

<style>
    :global(.inline-card-wrapper) {
        display: flex;
        flex-direction: column;
    }

    :global(.inline-card-wrapper .inline-card-button) {
        visibility: hidden;
    }

    :global(.inline-card-wrapper .inline-card-button.is-first) {
        visibility: visible;
    }

    :global(.inline-card-wrapper:hover .inline-card-button) {
        visibility: visible;
    }

    .inline-card-button {
        /* padding: 0 5px; */
        display: inline-block;
        z-index: 1;
        margin: 10px auto 0;
    }
</style>
