<script>
    import { getApp } from "../../app";
    import { post } from "../../modules/remote";
    import Icon from "./../../common/Icon.svelte";
    let { record, status } = $props();
    let date = $state(null);
    const app = getApp();
    function handlePublish() {
        post(app.url("records/publish"), { id: record.id }, (data, err) => {
            Turbo.visit(window.location.href);
        });
    }

    function handleTrash() {
        post(app.url("records/trash"), { id: record.id }, (data, err) => {
            Turbo.visit(window.location.href);
        });
    }
    function handleSchedule() {
        post(
            app.url("records/schedule"),
            { id: record.id, date: date },
            (data, err) => {
                Turbo.visit(window.location.href);
            },
        );
    }
</script>

<div style="display: flex; gap:20px">
    {#if status != "trashed"}
        <button onclick={handlePublish}>Publish Now</button>
    {/if}
    <details class="dropdown">
        <summary role="button" class="secondary"
            ><Icon icon="ellipsis-vertical"></Icon></summary
        >
        <ul>
            <li>
                <form onsubmit={handleSchedule}>
                    <fieldset role="group">
                        <input
                            bind:value={date}
                            type="datetime-local"
                            aria-label="Datetime local"
                            required
                        />
                        <button>Schedule</button>
                    </fieldset>
                </form>
            </li>
            <li><a href="#">View Revisions</a></li>
            {#if status != "trashed"}
                <li>
                    <button onclick={handleTrash}>Move to trash</button>
                </li>
            {/if}
        </ul>
    </details>
</div>
