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

    const channel = getContext("channel");
    export let status = "draft";
    export let record;
    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="d-flex justify-content-between">
    <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>
    {#if channel.previewTarget}
        <a href="{channel.previewTargetUrl}?schema={schema.name}&id={record.id}" target="_blank" class="btn btn-info ms-3">
            Preview
        </a>
    {/if}
</div>
