<script>
    import { getApp } from "../../app";
    import { post } from "../../modules/remote";
    let { record, status } = $props();
    const app = getApp();

    function handleUntrash() {
        post(app.url("records/untrash"), { id: record.id }, (data, err) => {
            Turbo.visit(window.location.href);
        });
    }
    function handleUnschedule() {
        post(app.url("records/unschedule"), { id: record.id }, (data, err) => {
            Turbo.visit(window.location.href);
        });
    }
    function handleUnpublish() {
        post(app.url("records/unpublish"), { id: record.id }, (data, err) => {
            Turbo.visit(window.location.href);
        });
    }
</script>

<div
    class="record-status record-status-{status}"
    style="display: flex; gap:20px"
>
    {#if status === "trashed"}
        <span>This record is Trashed</span>
        <button onclick={handleUntrash}>Restore</button>
    {:else if status === "scheduled_and_published"}
        <div>
            <div>
                <span>
                    This record was published at {record.publishedAt}
                </span>
                <button onclick={handleUnpublish}>Unpublish</button>
            </div>
            <div>
                <span>
                    It is scheduled to be republished at {record.scheduledAt}
                </span>
                <button onclick={handleUnschedule}>Unschedule</button>
            </div>
        </div>
    {:else if status === "published"}
        <span>
            This record was published at {record.publishedAt}
        </span>
        <button onclick={handleUnpublish}>Cancel</button>
    {:else if status === "scheduled"}
        <span>
            This record is scheduled to be published at {record.scheduledAt}
        </span>
        <button onclick={handleUnschedule}>Cancel</button>
    {:else}
        <span>This record is a draft. Not yet published</span>
    {/if}
</div>

<style>
    .record-status {
        border: 1px solid;
        border-radius: 7px;
        padding: 10px 20px;
        margin: 0 0 30px;
        font-size: 20px;
    }
    .record-status-trashed {
        border-color: red;
    }
    .record-status-scheduled_and_published {
        border-color: blue;
    }
    .record-status-published {
        border-color: green;
    }
    .record-status-scheduled {
        border-color: orange;
    }
    .record-status-draft {
        border-color: gray;
    }
</style>
