import {openModal, closeModal} from "./modalFocus.js";

export function createConversationPanel(id, title) {
    const overlay = document.createElement("div");
    overlay.id = id;
    overlay.className = "modal-overlay hidden";
    overlay.innerHTML = `<section class="modal-card conversation-panel" role="dialog" aria-modal="true" aria-labelledby="${id}Title" tabindex="-1">
        <div class="modal-header"><h3 id="${id}Title"></h3><button type="button" class="secondary-action">Close</button></div>
        <p class="panel-notice status" role="status"></p><div class="panel-content"></div></section>`;
    overlay.querySelector("h3").textContent = title;
    document.body.append(overlay);
    const close = () => closeModal(overlay);
    overlay.querySelector("button").onclick = close;
    overlay.onclick = event => { if (event.target === overlay) close(); };
    return {element: overlay, content: overlay.querySelector(".panel-content"), close,
        open() { if (overlay.classList.contains("hidden")) openModal(overlay); },
        notice(text = "", error = false) {
            const notice = overlay.querySelector(".panel-notice");
            notice.textContent = text;
            notice.classList.toggle("error", error);
        }};
}

export function actionButton(label, action) {
    const button = document.createElement("button");
    button.type = "button";
    button.className = "secondary-action";
    button.textContent = label;
    button.onclick = async () => { button.disabled = true; try { await action(); } finally { button.disabled = false; } };
    return button;
}