<script>
    import Icon from "../../common/Icon.svelte";
    import {randomId} from "../../../helpers";

    export let blockId;
    export let blockData;
    $: showOptions = false;
    let validUis = ["text", "textarea", "rich", "reference"];

    function createBlock(e, validUI) {
        e.preventDefault();
        blockData = [...blockData, {
            ui: validUI,
            id: randomId(),
            key: "",
            value: null
        }];
        showOptions = false;

    }
</script>

<button
    type="button"
    class:is-first={!blockId}
    class=" btn btn-lg btn-link text-decoration-none block-buttons"
    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 validUis as validUi}

            <div class="me-2">
                <button
                    class="btn btn-sm btn-primary"
                    on:click={(e) => createBlock(e, validUi)}
                >{validUi}
                </button>
            </div>
        {/each}
    </div>
{/if}

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

    :global(.block-field-wrapper .block-buttons) {
        visibility: hidden;
    }


    :global(.block-field-wrapper:hover .block-buttons) {
        visibility: visible;
    }

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