<script>
    import {createEventDispatcher, getContext} from "svelte";
    import Icon from "../../common/Icon.svelte";
    import InlineEdit from "../InlineEdit.svelte";
    import Dialog from "../../dialog/Dialog.svelte";
    import DialogRecord from "../../dialog/DialogRecord.svelte";
    import axios from "axios";
    const dispatch = createEventDispatcher();
    const channel = getContext("channel");
    export let schemas;
    export let recordId;
    $: showOptions = false;
    let browseModal;
    let dialogRecord;
    let inLineCreateRecord;

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

    function save(e) {
        e.preventDefault();
        console.log("Save inline");
        inLineCreateRecord = null;
        dialogRecord.close()
        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;
                dialogRecord.open()
                showOptions = false;
            })
            .catch((error) => {
                console.log(error);
            });
    }
</script>

{#if schemas.length > 1}
    <button
            type="button"
            class:is-first={!recordId}
            class="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 style="display:flex;align-items: center;gap: 4px">
        <button
                class="button"
                on:click={(e) => createInlineReference(e, schemas[0].name)}
        >New
        </button>
        <button
                class="button"
                on:click={(e) => openBrowseModal(e, schemas[0].name)}
        >
            <Icon icon="magnifying-glass"/>
        </button
        >
    </div>
{/if}

<DialogRecord bind:this={dialogRecord}>
    {#if inLineCreateRecord}

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

    {/if}
</DialogRecord>

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