//! 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::*;
use wasm_bindgen::JsCast;
use web_sys::MouseEvent;

#[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(())
            // A click on the backdrop targets the <dialog> itself; a click
            // anywhere inside targets that element instead. The card below
            // carries the padding, so the dialog box is never a click
            // target except on the backdrop.
            on:click=move |ev: MouseEvent| {
                let Some(el) = dialog.get() else { return };
                let on_backdrop = ev
                    .target()
                    .and_then(|t| t.dyn_into::<web_sys::Node>().ok())
                    .is_some_and(|t| el.is_same_node(Some(&t)));
                if on_backdrop {
                    on_close.run(());
                }
            }
        >
            <div class=format!("modal {class}")>{children()}</div>
        </dialog>
    }
}