Made of little things.

import { html } from 'lit';
import { editor, type ConfirmView } from '../editor-controller';
import { LightElement } from './light-element';

/** Modal yes/no prompt; `ask` resolves with the player's answer. */
export class BsConfirmDialog extends LightElement implements ConfirmView {
    static properties = { heading: { state: true }, message: { state: true } };
    declare heading: string;
    declare message: string;
    #resolve?: (answer: boolean) => void;
    constructor() {
        super();
        this.heading = 'Confirm';
        this.message = '';
    }
    connectedCallback() {
        super.connectedCallback();
        editor.ui.confirm = this;
    }
    get #dialog() {
        return this.querySelector<HTMLDialogElement>('dialog')!;
    }
    get isOpen() {
        return this.#dialog.open;
    }
    ask(message: string, title: string): Promise<boolean> {
        this.#finish(false);
        this.heading = title;
        this.message = message;
        this.#dialog.showModal();
        return new Promise((resolve) => (this.#resolve = resolve));
    }
    #finish(answer: boolean) {
        const resolve = this.#resolve;
        this.#resolve = undefined;
        if (this.isOpen) this.#dialog.close();
        resolve?.(answer);
    }
    render() {
        return html`<dialog
            id="confirm"
            class="confirm-dialog"
            @cancel=${(e: Event) => {
                e.preventDefault();
                this.#finish(false);
            }}
            @close=${() => editor.confirmClosed()}
        >
            <h2 id="confirm-title">${this.heading}</h2>
            <p id="confirm-message">${this.message}</p>
            <div class="buttons">
                <button id="confirm-cancel" @click=${() => this.#finish(false)}>Cancel</button>
                <button id="confirm-ok" class="primary" @click=${() => this.#finish(true)}>
                    Continue
                </button>
            </div>
        </dialog>`;
    }
}
customElements.define('bs-confirm-dialog', BsConfirmDialog);