/**
 * @license
 * Copyright 2025-2026 Open Home Foundation
 * SPDX-License-Identifier: Apache-2.0
 */

import "@material/web/button/text-button";
import "@material/web/dialog/dialog";
import type { MdDialog } from "@material/web/dialog/dialog.js";
import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators.js";
import { preventDefault } from "../../util/prevent_default.js";
import type { PromptDialogBoxParams } from "./show-dialog-box.js";
@customElement("dialog-box")
export class DialogBox extends LitElement {
    @property({ attribute: false }) public params!: PromptDialogBoxParams;

    @property({ attribute: false }) public dialogResult!: (result: boolean) => void;

    @property() public type!: "alert" | "prompt";

    protected override render() {
        const params = this.params;
        return html`
            <md-dialog open @cancel=${preventDefault} @closed=${this._handleClosed}>
                ${params.title ? html`<div slot="headline">${params.title}</div>` : ""}
                ${params.text
                    ? html`<div slot="content">
                          ${params.asCodeBlock && typeof params.text === "string"
                              ? html`<code>${params.text}</code>`
                              : params.text}
                      </div>`
                    : ""}
                <div slot="actions">
                    ${this.type === "prompt"
                        ? html`
                              <md-text-button @click=${this._cancel}>${params.cancelText ?? "Cancel"}</md-text-button>
                          `
                        : ""}
                    <md-text-button @click=${this._confirm}>${params.confirmText ?? "OK"}</md-text-button>
                </div>
            </md-dialog>
        `;
    }

    private _cancel() {
        this._setResult(false);
    }

    private _confirm() {
        this._setResult(true);
    }

    _setResult(result: boolean) {
        this.dialogResult(result);
        this.shadowRoot!.querySelector<MdDialog>("md-dialog")!.close();
    }

    private _handleClosed() {
        this.parentElement!.removeChild(this);
    }

    static override styles = css`
        code {
            display: block;
            white-space: pre-wrap;
            word-break: break-all;
            overflow-y: auto;
            max-height: 60vh;
            font-size: 0.8rem;
            line-height: 1.4;
            padding: 8px;
            background-color: var(--md-sys-color-surface-container-highest);
            border-radius: 4px;
        }
    `;
}

declare global {
    interface HTMLElementTagNameMap {
        "dialog-box": DialogBox;
    }
}