<script>
    import Heading from "./elements/Heading.svelte";
    import Textarea from "./elements/Textarea.svelte";
    import Rich from "./elements/Rich.svelte";
    import Reference from "./elements/Reference.svelte";
    import Icon from "../../common/Icon.svelte";
    import {insertBlock} from "./block";
    import { getContext} from "svelte";
    import File from "./elements/File.svelte";

    const channel = getContext("channel");
    export let record;
    export let blockData;
    export let field;
    export let graph;

    export let block;
    let blockSchema = channel.schemas.find((s) => s.name === field.schema);
    function createBlock(e, ui, blockId) {
        e.preventDefault();
        blockData = insertBlock(blockData, ui, blockId);
    }

    function deleteBlock(e, blockId) {
        e.preventDefault();
        blockData = blockData.filter(b => b.id !== blockId)
    }

</script>

<div class="card editor-field d-flex">
    <div class="d-flex justify-content-between">
        <span class="text-muted d-block fs-6 mb-1">{block.meta.label} <i>{block.meta.info.name}</i> </span>
        <div class="dropdown d-inline-block">
            <button
                    class="btn btn-link btn-sm"
                    type="button"
                    data-bs-toggle="dropdown"
                    aria-expanded="false"
            >
                <Icon icon="ellipsis"/>
            </button>
            <div class="dropdown-menu">

                <h6 class="dropdown-header">
                    Block id: <input class="form-control-plaintext" readonly value={block.id}/>
                    Block name: <input class="form-control-plaintext" readonly value={block.meta.name}/>
                </h6>
                <h6 class="dropdown-header">Actions</h6>
                <button
                        class="dropdown-item"
                        on:click={(e) => deleteBlock(e, block.id)}
                >Delete
                </button
                >
                <h6 class="dropdown-header">Insert after</h6>

                {#each blockSchema.fields as blockField}
                    <button
                            class="dropdown-item"
                            on:click={(e) => createBlock(e, blockField, block.id)}
                    >{blockField.label}
                    </button
                    >
                {/each}
            </div>
        </div>
    </div>
    {#if block.meta.info.name === "heading"}

        <Heading
                bind:block={block}
        />

    {:else if block.meta.info.name === "textarea"}

        <Textarea
                bind:block={block}
        />

    {:else if block.meta.info.name === "rich"}
        <Rich
                bind:block={block}
        />
    {:else if block.meta.info.name === "file"}
                <File
                    {record}
                    {field}
                    bind:graph
                    bind:block={block}
                />
    {:else if block.meta.info.name === "reference"}
        <Reference
                {record}
                {field}
                bind:graph
                bind:block={block}
        />
    {/if}

</div>
