<script>
    import Status from "./Status.svelte";
    import {getStatus, getStatusList} from "./StatusText";

    export let status = "draft";
    export let schema;
    let dropdown;
    $: currentStatus = getStatus(status);
    const statusList = Object.values(getStatusList());

    function updateStatus(e, statusValue) {
        // e.preventDefault();
        status = statusValue;
        dropdown.click();
    }
</script>

<!-- Example split danger button -->
<div class="btn-group dropup">
    <button type="button" class="btn btn-{currentStatus.bg}"
    >{currentStatus.text}</button
    >
    <button
        bind:this={dropdown}
        type="button"
        class="btn btn-{currentStatus.bg} dropdown-toggle dropdown-toggle-split"
        data-bs-toggle="dropdown"
        aria-expanded="false"
    >
        <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
        <div class="dropdown-header">Change status to</div>
        {#each statusList as astatus}
            {#if astatus.value !== status}
                <button
                    type="button"
                    class="dropdown-item my-2 rounded w-100 bg-{astatus.bg} text-{astatus.color}"
                    on:click={(e) => updateStatus(e, astatus.value)}
                >
                    {astatus.text}
                </button>
            {/if}
        {/each}
    </div>
</div>
