Overlays and portals

use zgui::prelude::*;

#[component]
fn Toolbar() -> impl IntoView {
    let open = RwSignal::new(false);

    view! {
        row(class = "toolbar") {
            control(on:click = move |_| open.set(true)) {"Delete"}
            if move || open.get() {
                Portal(layer = OverlayLayer::Modal) {
                    box(class = "dialog") {"Really delete?"}
                }
            }
        }
    }
}

overlay_root                        { display: block; position: fixed; inset: 0;
                                      pointer-events: none; }
overlay_root > [data-layer]         { position: absolute; inset: 0; pointer-events: none; }
overlay_root > [data-layer] > *     { pointer-events: auto; }
overlay_root > [data-layer=content] { z-index: 10; }
overlay_root > [data-layer=popover] { z-index: 20; }
overlay_root > [data-layer=modal]   { z-index: 30; }
overlay_root > [data-layer=toast]   { z-index: 40; }

use zgui::geom::{Device, DevicePx, Rect};
use zgui::reactive::RenderEffect;

/// Places its children against `anchor`, and keeps them inside the window.
#[component]
fn Anchored(
    /// What the surface is placed against.
    anchor: NodeRef,
    /// How far off the anchor the surface sits, in CSS pixels.
    #[prop(default = 4.0)]
    gap: f32,
    /// Classes on the positioner.
    #[prop(into, optional)]
    class: Classes,
    /// The surface.
    children: Children,
) -> impl IntoView {
    let positioner = NodeRef::new();
    let anchor_box = anchor.observe_border_box();
    let surface_size = positioner.observe_content_size();

    // The window's own rectangle, observed rather than read once: a resize moves the edge the
    // surface is being kept inside of. It is acquired from an effect because the root is only
    // reachable through a handle that is bound, and this component's handle binds as its element
    // is built.
    let window_box: RwSignal<
        Option<Signal<Option<Rect<DevicePx, Device>>, LocalStorage>>,
        LocalStorage,
    > = RwSignal::new_local(None);
    let watching = RenderEffect::new(move |_| {
        if positioner.get().is_none() || window_box.get_untracked().is_some() {
            return;
        }
        if let Some(root) = positioner.window_root() {
            window_box.set(Some(root.observe_border_box()));
        }
    });
    on_cleanup_local(move || drop(watching));

    let origin = Signal::derive_local(move || {
        let anchor = anchor_box.get()?;
        let size = surface_size.get();
        // Before the first measurement the surface has no size, and a placement made from nothing
        // is the one frame in the wrong place this whole arrangement exists to remove.
        if size.width.0 <= 0.0 && size.height.0 <= 0.0 {
            return None;
        }
        let window = window_box.get()?.get()?;
        let scale = positioner.scale();
        let gap = gap * scale;

        let below = anchor.origin.y.0 + anchor.size.height.0 + gap;
        let above = anchor.origin.y.0 - size.height.0 - gap;
        // Cross to the other side only when this side does not fit and the other one does. Crossing
        // to a side that is merely less short is how a surface flips on every frame.
        let fits_below = below + size.height.0 <= window.origin.y.0 + window.size.height.0;
        let y = if fits_below || above < window.origin.y.0 {
            below
        } else {
            above
        };

        // Slide along the anchor's edge until the surface is inside the window.
        let furthest = window.origin.x.0 + window.size.width.0 - size.width.0;
        let x = anchor.origin.x.0.clamp(
            window.origin.x.0,
            furthest.max(window.origin.x.0),
        );

        // Device pixels in, CSS pixels out.
        Some((x / scale, y / scale))
    });

    let left = move || origin.get().map(|(x, _)| format!("{x}px"));
    let top = move || origin.get().map(|(_, y)| format!("{y}px"));
    let hidden = move || origin.get().is_none().then(|| "hidden".to_owned());

    view! {
        box(
            class = class,
            node_ref = positioner,
            style:position = "fixed",
            style:left = left,
            style:top = top,
            style:visibility = hidden
        ) {
            {children.into_view_once()}
        }
    }
}

/// Calls `close` when a press lands outside `surface` and outside `trigger`.
///
/// Called from a component body. The listener lives as long as that body's scope.
fn close_on_outside_press(surface: NodeRef, trigger: NodeRef, close: UnsyncCallback<()>) {
    let guard: StoredValue<Option<ListenerGuard>, LocalStorage> = StoredValue::new_local(None);

    let attaching = RenderEffect::new(move |_| {
        // A handle binds as its element is built, so the first run finds nothing. Reading it here
        // is what brings the effect back when it does bind.
        if surface.get().is_none() || guard.with_value(Option::is_some) {
            return;
        }
        let Some(window) = surface.window_root() else {
            return;
        };
        // The capture leg, so the decision is taken before anything on the pressed element's own
        // path runs. A surface that closed on the bubble would be closed by its own trigger's
        // press, and then re-opened by the click that press becomes.
        guard.set_value(window.listen(
            events::POINTER_DOWN,
            ListenerOptions::CAPTURE,
            move |ev: &mut EventCx<'_, events::PointerDown>| {
                // The guard outlives the surface, which is unmounted while it is closed. There is
                // then nothing to close.
                if surface.get_untracked().is_none() {
                    return;
                }
                if !surface.contains(ev.target) && !trigger.contains(ev.target) {
                    close.run(());
                }
            },
        ));
    });

    on_cleanup_local(move || {
        drop(attaching);
        guard.set_value(None);
    });
}

on:key_down = move |ev| {
    if ev.key == Key::Named(NamedKey::Escape) {
        // Escape belongs to exactly one surface. Swallowing it here is what stops one press
        // closing a menu and the dialog behind it in the same breath.
        ev.stop_propagation();
        open.set(false);
    }
}

let focused = focused_node();
let watching = RenderEffect::new(move |_| {
    if let Some(node) = focused.get()
        && !surface.contains(node)
        && !trigger.contains(node)
    {
        open.set(false);
    }
});
on_cleanup_local(move || drop(watching));

/// Confines sequential focus navigation to `surface` while `active` answers true.
fn trap_focus_while(
    surface: NodeRef,
    options: FocusTrapOptions,
    active: impl Fn() -> bool + 'static,
) {
    let held: StoredValue<Option<FocusTrap>, LocalStorage> = StoredValue::new_local(None);

    let installing = RenderEffect::new(move |_| {
        if active() && surface.get().is_some() {
            // Held across runs rather than made afresh on each: installing a second trap over the
            // first is a stack two deep for one dialog.
            if held.with_value(Option::is_none) {
                held.set_value(surface.trap_focus(options));
            }
        } else {
            held.set_value(None);
        }
    });

    on_cleanup_local(move || drop(installing));
}

use core::time::Duration;
use zgui::view::TimeoutHandle;

/// Shows `tip` beside whatever it wraps.
#[component]
fn Tooltip(
    /// What the tooltip says.
    #[prop(into)]
    tip: String,
    /// What the tooltip is about.
    children: Children,
) -> impl IntoView {
    let open = RwSignal::new(false);
    let trigger = NodeRef::new();
    // Taken in the body, where the scope knows which window this is, and carried into the
    // listeners, which run in a scope that does not.
    let clock = Timers::current().expect("a component body is inside a window");
    let pending = StoredValue::new_local(None::<TimeoutHandle>);
    let described = tip.clone();

    view! {
        box(
            class = "tip__trigger",
            node_ref = trigger,
            // A tooltip is a description, and the description belongs to the trigger. Written here
            // it reaches a screen reader whether or not the surface is ever shown.
            a11y:description = described,
            on:pointer_enter = move |_| {
                let handle = clock.set_timeout(Duration::from_millis(500), move || open.set(true));
                pending.set_value(Some(handle));
            },
            on:pointer_leave = move |_| {
                pending.set_value(None);
                open.set(false);
            },
            // Focus is not a pointer that might not have meant it. A keyboard user arrived on
            // purpose, so there is no delay to wait out.
            on:focus_in = move |_| {
                pending.set_value(None);
                open.set(true);
            },
            on:focus_out = move |_| {
                pending.set_value(None);
                open.set(false);
            },
            on:key_down = move |ev| {
                // Only when something is showing: a trigger that swallowed every Escape would stop
                // the dialog around it from ever closing.
                if ev.key == Key::Named(NamedKey::Escape) && open.get_untracked() {
                    ev.stop_propagation();
                    open.set(false);
                }
            }
        ) {
            {children.into_view_once()}
            if move || open.get() {
                Portal {
                    Anchored(anchor = trigger, class = "tip") {
                        box(class = "tip__body", a11y:role = Role::Tooltip) {{tip.clone()}}
                    }
                }
            }
        }
    }
}

const TOOLTIP: &str = css!(
    ".tip__trigger { display: inline-block; }

    /* The surface must never answer the pointer: a tooltip under the cursor would take the
       pointer-leave that closes it. pointer-events is inherited, so one rule covers the
       whole subtree. */
    .tip { pointer-events: none; }

    .tip__body {
        padding: 4px 8px;
        border-radius: 6px;
        background-color: #11151c;
        color: #e6e9ef;
        font-size: 12px;
    }"
);

use zgui::vocab::HasPopup;

#[component]
fn ActionsMenu() -> impl IntoView {
    let open = RwSignal::new(false);
    let chosen = RwSignal::new(String::new());
    let trigger = NodeRef::new();
    let surface = NodeRef::new();

    close_on_outside_press(surface, trigger, UnsyncCallback::new(move |()| open.set(false)));
    // MODAL, not CONFINE_ONLY: a menu opened by a click should take focus, and should give it back
    // to the trigger when it closes.
    trap_focus_while(surface, FocusTrapOptions::MODAL, move || open.get());

    let choose = move |label: &str| {
        chosen.set(label.to_owned());
        open.set(false);
    };

    view! {
        column(class = "menu") {
            control(
                class = "menu__trigger",
                node_ref = trigger,
                a11y:has_popup = HasPopup::Menu,
                a11y:expanded = move || open.get(),
                on:click = move |_| open.update(|open| *open = !*open)
            ) {
                "Actions"
            }
            text(class = "menu__chosen") {{move || chosen.get()}}

            if move || open.get() {
                Portal {
                    Anchored(anchor = trigger) {
                        column(
                            class = "menu__list",
                            node_ref = surface,
                            a11y:role = Role::Menu,
                            on:key_down = move |ev| {
                                match &ev.key {
                                    Key::Named(NamedKey::ArrowDown) => {
                                        surface.focus_move(FocusMove::Next);
                                    }
                                    Key::Named(NamedKey::ArrowUp) => {
                                        surface.focus_move(FocusMove::Prev);
                                    }
                                    Key::Named(NamedKey::Home) => {
                                        surface.focus_move(FocusMove::First);
                                    }
                                    Key::Named(NamedKey::End) => {
                                        surface.focus_move(FocusMove::Last);
                                    }
                                    Key::Named(NamedKey::Escape) => open.set(false),
                                    _ => return,
                                }
                                // These keys belong to the menu. Nothing above it acts on them too,
                                // and the arrows do not also scroll whatever is behind it.
                                ev.stop_propagation();
                                ev.prevent_default();
                            }
                        ) {
                            control(
                                class = "menu__item",
                                a11y:role = Role::MenuItem,
                                on:click = move |_| choose("Rename")
                            ) {"Rename"}
                            control(
                                class = "menu__item",
                                a11y:role = Role::MenuItem,
                                on:click = move |_| choose("Duplicate")
                            ) {"Duplicate"}
                            control(
                                class = "menu__item",
                                a11y:role = Role::MenuItem,
                                on:click = move |_| choose("Delete")
                            ) {"Delete"}
                        }
                    }
                }
            }
        }
    }
}

const MENU: &str = css!(
    ".menu { gap: 8px; align-items: flex-start; }
    .menu__chosen { color: #6b7689; font-size: 12px; }

    .menu__trigger {
        padding: 6px 14px;
        border: 1px solid #2f3646;
        border-radius: 8px;
        background-color: #232936;
    }

    .menu__list {
        min-width: 180px;
        padding: 4px;
        border: 1px solid #2f3646;
        border-radius: 10px;
        background-color: #191d26;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    }

    .menu__item { padding: 6px 10px; border-radius: 6px; }
    .menu__item:hover { background-color: #262b36; }
    .menu__item:focus-visible { outline: 2px solid #7aa2ff; outline-offset: -2px; }"
);

#[component]
fn ConfirmDialog(
    /// Whether the dialog is showing. The caller owns it.
    open: RwSignal<bool>,
    /// What is being confirmed.
    #[prop(into)]
    question: String,
    /// Called when the person confirms. A callback prop, not a listener.
    on_confirm: UnsyncCallback<()>,
) -> impl IntoView {
    let surface = NodeRef::new();
    trap_focus_while(surface, FocusTrapOptions::MODAL, move || open.get());

    view! {
        if move || open.get() {
            Portal(layer = OverlayLayer::Modal) {
                box(
                    class = "dialog__backdrop",
                    on:pointer_down = move |ev| {
                        if !surface.contains(ev.target) {
                            open.set(false);
                        }
                    }
                ) {
                    column(
                        class = "dialog",
                        node_ref = surface,
                        a11y:role = Role::Dialog,
                        a11y:modal = true,
                        a11y:label = "Confirm",
                        on:key_down = move |ev| {
                            if ev.key == Key::Named(NamedKey::Escape) {
                                ev.stop_propagation();
                                open.set(false);
                            }
                        }
                    ) {
                        text(class = "dialog__question") {{question.clone()}}
                        row(class = "dialog__actions") {
                            control(
                                class = "dialog__button",
                                on:click = move |_| open.set(false)
                            ) {"Cancel"}
                            control(
                                class = "dialog__button dialog__button--danger",
                                on:click = move |_| {
                                    open.set(false);
                                    on_confirm.run(());
                                }
                            ) {"Delete"}
                        }
                    }
                }
            }
        }
    }
}

const DIALOG: &str = css!(
    ".dialog__backdrop {
        position: fixed;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(6, 8, 12, 0.6);
    }

    .dialog {
        min-width: 320px;
        gap: 16px;
        padding: 20px;
        border: 1px solid #2f3646;
        border-radius: 12px;
        background-color: #161a22;
    }

    .dialog__actions { gap: 8px; justify-content: flex-end; }

    .dialog__button {
        padding: 6px 14px;
        border: 1px solid #2f3646;
        border-radius: 8px;
        background-color: #232936;
    }

    .dialog__button--danger { background-color: #b23b3b; border-color: #b23b3b; }
    .dialog__button:focus-visible { outline: 2px solid #7aa2ff; outline-offset: 2px; }"
);