//! The one modal shell, a native `<dialog>`.
//!
//! Opened with `showModal()`, so the browser supplies the backdrop
//! (`::backdrop`), the focus trap, inertness for the rest of the page, the
//! top layer, and Escape-to-close. None of that is hand-rolled here.

use leptos::prelude::*;

#[component]
pub fn Modal(
    /// Classes for the card, appended to `modal` (e.g. `"card picker"`).
    #[prop(into)]
    class: String,
    /// Runs when the dialog asks to close: Escape, or a backdrop click.
    /// The owner clears its own state, which unmounts the dialog.
    on_close: Callback<()>,
    children: Children,
) -> impl IntoView {
    let dialog: NodeRef<leptos::html::Dialog> = NodeRef::new();
    Effect::new(move |_| {
        if let Some(el) = dialog.get() {
            // `show_modal`, never `show`: only the modal form gets the top
            // layer, the backdrop and the focus trap.
            let _ = el.show_modal();
        }
    });
    view! {
        <dialog
            node_ref=dialog
            class="modal-host"
            // Fires once the browser has closed the dialog, which Escape
            // does on its own. Tell the owner so its state clears too.
            // Unmounting an open dialog does not fire this, so the close
            // path the owner drives cannot loop back here.
            on:close=move |_| on_close.run(())
            // Light dismiss: a backdrop click closes the dialog like Escape.
            closedby="any"
        >
            <div class=format!("modal {class}")>{children()}</div>
        </dialog>
    }
}