import { Theme, AnimationPresets } from "../theme.slint";

/// NeonTooltip — overlay contextual help.
///
/// Slint's `PopupWindow` is method-driven (`.show()` / `.close()`),
/// not property-driven, so we can't bind `showing: root.shown`
/// directly. Instead we drive a Rectangle's `opacity` + the
/// PopupWindow's `show`/`close` from a `changed shown` handler.
/// Caller flips `shown` and the change handler dispatches to the
/// popup. The Rectangle inside renders the actual visual; the
/// PopupWindow adds the z-stacking that makes the tooltip
/// overlay everything else.
export component NeonTooltip {
    in property <string> text;
    in-out property <bool> shown: false;
    in property <length> offset-x: 0px;
    in property <length> offset-y: -28px;

    changed shown => {
        if (root.shown) {
            popup.show();
        } else {
            popup.close();
        }
    }

    popup := PopupWindow {
        close-policy: no-auto-close;
        x: root.offset-x;
        y: root.offset-y;
        Rectangle {
            opacity: root.shown ? 1.0 : 0.0;
            animate opacity { duration: AnimationPresets.scale-in; }
            background: Theme.bg-tooltip;
            border-radius: Theme.radius-sm;
            border-width: 1px;
            border-color: Theme.border;
            HorizontalLayout {
                padding-left: Theme.sp-2;
                padding-right: Theme.sp-2;
                padding-top: 4px;
                padding-bottom: 4px;
                Text {
                    text: root.text;
                    font-size: Theme.font-xs;
                    color: Theme.text-primary;
                    horizontal-alignment: center;
                }
            }
        }
    }
}
