<script>
    import {getContext} from "svelte";
    import PreviewCard from "../../PreviewCard.svelte";
    import {sortByField} from "../../../edges/sortEdges";
    import ReferenceInlineButtons from "../../elements/ReferenceInlineButtons.svelte"
    import Sortable from "../../../libs/Sortable.svelte";
    import {insertEdges} from "../../elements/reference";
    import BrowseModal from "../../elements/BrowseModal.svelte";


    const channel = getContext("channel");
    export let block;
    export let record;
    export let field;
    export let graph;
    let browseModal;
    let blockFieldName = field.name + ":" + block.id;

    $: references = graph.edges
        .filter((edge) => edge.field === blockFieldName)
        .map((edge) => {
            return graph.records.find((increc) => increc.id === edge.target && record.id === edge.source);
        }).filter((rec) => (rec?.id ? true : false)) ?? [];

    let collections = channel.schemas.filter((aschema) =>
        block.meta.collections.includes(aschema.name)
    );

    function removeReference(e) {
        e.preventDefault();
        graph.edges = graph.edges.filter(
            (edge) => !(edge.target === e.detail && edge.field === blockFieldName)
        );
        block.value = graph.edges.filter(edge => edge.field === blockFieldName) ?? [];

    }

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

    function reorder(e) {
        graph.edges = sortByField(e.detail.source, e.detail.target, graph.edges, blockFieldName);
    }

    function insert(e) {
        e.preventDefault();
        browseModal.close();
        graph = insertEdges(graph,record,e.detail.records,blockFieldName,e.detail.action);
    }

</script>


<div class="mb-0">
    {#if block.meta.collections.length === 1}
        <button
                class="btn btn-outline-primary"
                on:click={(e) => openBrowseModal(e, collections[0].name)}
        >
            Browse
        </button>
    {:else}
        <div class="dropdown d-inline-block">
            <button
                    class="btn btn-outline-primary btn-sm"
                    type="button"
                    data-bs-toggle="dropdown"
                    aria-expanded="false"
            >
                Browse
            </button>
            <ul class="dropdown-menu">
                {#each collections as collection}
                    <li>
                        <!-- {`${channelurl}/content/${collection.name}?parent=${record.id}&parentfield=${field.name}`} -->
                        <a
                                class="dropdown-item"
                                on:click={(e) =>
                                openBrowseModal(e, collection.name)}
                                href="/">{collection.label}</a
                        >
                    </li>
                {/each}
            </ul>
        </div>
    {/if}
</div>
{#if references.length > 0}
    <Sortable sortableClass="row row-cols-3 mt-3" on:update={reorder}>
        {#each references as reference (reference.id)}
            <div class="col mb-3">
                <PreviewCard
                    classes="h-100"
                    record={reference}
                    hasDelete={true}
                    on:remove={removeReference}
                />
            </div>
        {/each}
    </Sortable>
{/if}

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