"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DropdownMenuBottomSheet = exports.DropdownMenuInfo = exports.DropdownMenuGroup = exports.DropdownMenuSeparator = exports.DropdownMenuLabel = exports.DropdownMenuRadioItem = exports.DropdownMenuCheckboxItem = exports.DropdownMenuItem = exports.ResponsiveDropdownMenuContent = exports.DropdownMenuContentWithoutPortal = exports.DropdownMenuContent = exports.DropdownMenuSubContent = exports.DropdownMenuSubTrigger = exports.DropdownMenuSub = exports.DropdownMenuRadioGroup = exports.DropdownMenuPortal = exports.DropdownMenuTrigger = exports.DropdownMenu = void 0;
exports.DropdownMenuShortcut = DropdownMenuShortcut;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const RadixDropdownMenu = tslib_1.__importStar(require("@radix-ui/react-dropdown-menu"));
const DropdownMenuPrimitive = tslib_1.__importStar(require("@rn-primitives/dropdown-menu"));
const lucide_react_native_1 = require("lucide-react-native");
const react_1 = tslib_1.__importStar(require("react"));
const react_native_1 = require("react-native");
const atoms_1 = require("../../lib/theme/atoms");
const ui_1 = require("../../ui");
const text_1 = require("./primitives/text");
const text_2 = require("./text");
exports.DropdownMenu = DropdownMenuPrimitive.Root;
exports.DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
exports.DropdownMenuPortal = DropdownMenuPrimitive.Portal;
exports.DropdownMenuRadioGroup = (0, react_1.forwardRef)(({ children, ...props }, ref) => {
    return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.RadioGroup, { ref: ref, ...props, children: children }));
});
exports.DropdownMenuSub = (0, react_1.forwardRef)(({ children, ...props }, ref) => {
    return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Sub, { ref: ref, ...props, children: children }));
});
exports.DropdownMenuSubTrigger = (0, react_1.forwardRef)(({ inset, children, subMenuTitle, style, ...props }, ref) => {
    const { icons } = (0, ui_1.useTheme)();
    const { open } = DropdownMenuPrimitive.useSubContext();
    const Icon = react_native_1.Platform.OS === "web" ? lucide_react_native_1.ChevronRight : open ? lucide_react_native_1.ChevronUp : lucide_react_native_1.ChevronDown;
    return ((0, jsx_runtime_1.jsx)(text_1.TextContext.Provider, { value: (0, text_1.objectFromObjects)([
            atoms_1.a.textColors.primary[500],
            atoms_1.a.fontSize.base,
            open && atoms_1.a.textColors.primary[700],
        ]), children: (0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.SubTrigger, { ref: ref, ...props, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
                    inset && atoms_1.gap[2],
                    atoms_1.layout.flex.row,
                    atoms_1.layout.flex.alignCenter,
                    atoms_1.p[2],
                    atoms_1.pr[8],
                    style,
                ], children: [children, (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [atoms_1.a.layout.position.absolute, atoms_1.a.position.right[1]], children: (0, jsx_runtime_1.jsx)(Icon, { size: 18, color: icons.color.muted }) })] }) }) }));
});
exports.DropdownMenuSubContent = (0, react_1.forwardRef)(({ children, portalHost, sideOffset, alignOffset, avoidCollisions = true, ...props }, ref) => {
    const { zero: zt } = (0, ui_1.useTheme)();
    const [portalContainer, setPortalContainer] = react_1.default.useState(null);
    react_1.default.useEffect(() => {
        if (react_native_1.Platform.OS === "web" && portalHost) {
            const element = document.querySelector(`[data-portal-host="${portalHost}"]`);
            setPortalContainer(element);
        }
    }, [portalHost]);
    const styles = [
        atoms_1.a.sizes.minWidth[64],
        atoms_1.a.sizes.maxWidth[64],
        atoms_1.a.overflow.hidden,
        atoms_1.a.radius.all.md,
        atoms_1.a.borders.width.thin,
        zt.border.default,
        atoms_1.mt[1],
        zt.bg.popover,
        atoms_1.p[1],
        atoms_1.a.shadows.md,
    ];
    // On web, use Radix directly to support custom portal container
    if (react_native_1.Platform.OS === "web") {
        const { forceMount } = props;
        // Flatten RN style array into a plain CSS object for DOM
        const flattenedStyles = react_native_1.StyleSheet.flatten(styles);
        return ((0, jsx_runtime_1.jsx)(RadixDropdownMenu.Portal, { ...(portalContainer ? { container: portalContainer } : {}), children: (0, jsx_runtime_1.jsx)(RadixDropdownMenu.SubContent, { ref: ref, style: flattenedStyles, forceMount: forceMount, sideOffset: sideOffset, alignOffset: alignOffset, avoidCollisions: avoidCollisions, children: children }) }));
    }
    // On native, use rn-primitives
    return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.SubContent, { ref: ref, style: styles, ...props, children: children }));
});
exports.DropdownMenuContent = (0, react_1.forwardRef)(({ overlayStyle, portalHost, style, children, ...props }, ref) => {
    const { zero: zt } = (0, ui_1.useTheme)();
    const { height } = (0, react_native_1.useWindowDimensions)();
    const maxHeight = height * 0.9;
    const [portalContainer, setPortalContainer] = react_1.default.useState(null);
    react_1.default.useEffect(() => {
        if (react_native_1.Platform.OS === "web" && portalHost) {
            const element = document.querySelector(`[data-portal-host="${portalHost}"]`);
            setPortalContainer(element);
            console.log("set portal container to", element);
        }
    }, [portalHost]);
    return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Portal, { hostName: portalHost, ...(react_native_1.Platform.OS === "web" && portalContainer
            ? { container: portalContainer }
            : {}), children: (0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Overlay, { style: [
                react_native_1.Platform.OS !== "web" ? react_native_1.StyleSheet.absoluteFill : undefined,
                overlayStyle,
            ], children: (0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Content, { ref: ref, style: [
                    atoms_1.a.zIndex[50],
                    atoms_1.a.sizes.minWidth[64],
                    atoms_1.a.sizes.maxWidth[64],
                    { maxHeight: maxHeight },
                    atoms_1.a.overflow.hidden,
                    atoms_1.a.radius.all.md,
                    atoms_1.a.borders.width.thin,
                    zt.border.default,
                    zt.bg.popover,
                    atoms_1.p[2],
                    atoms_1.a.shadows.md,
                    style,
                ], ...props, children: (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { showsVerticalScrollIndicator: false, children: typeof children === "function"
                        ? children({ pressed: false })
                        : children }) }) }) }));
});
exports.DropdownMenuContentWithoutPortal = (0, react_1.forwardRef)(({ overlayStyle, maxHeightPercentage = 0.9, children, style, ...props }, ref) => {
    const { theme } = (0, ui_1.useTheme)();
    const { height } = (0, react_native_1.useWindowDimensions)();
    const maxHeight = height * maxHeightPercentage;
    return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Overlay, { style: [
            react_native_1.Platform.OS !== "web" ? react_native_1.StyleSheet.absoluteFill : undefined,
            overlayStyle,
        ], children: (0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Content, { ref: ref, style: [
                { zIndex: 999999 },
                atoms_1.a.sizes.minWidth[64],
                atoms_1.a.sizes.maxWidth[64],
                { maxHeight: maxHeight },
                atoms_1.a.radius.all.md,
                atoms_1.a.borders.width.thin,
                { borderColor: theme.colors.border },
                { backgroundColor: theme.colors.popover },
                atoms_1.p[2],
                atoms_1.a.shadows.md,
                style,
            ], ...props, children: (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { showsVerticalScrollIndicator: false, children: typeof children === "function"
                    ? children({ pressed: false })
                    : children }) }) }));
});
exports.ResponsiveDropdownMenuContent = (0, react_1.forwardRef)(({ children, onModeChange, ...props }, ref) => {
    const { width } = (0, react_native_1.useWindowDimensions)();
    const isBottomSheet = react_native_1.Platform.OS !== "web" || (react_native_1.Platform.OS === "web" && width <= 980);
    react_1.default.useEffect(() => {
        onModeChange?.(isBottomSheet);
    }, [isBottomSheet, onModeChange]);
    if (isBottomSheet) {
        return ((0, jsx_runtime_1.jsx)(exports.DropdownMenuContent, { align: "start", ref: ref, ...props, children: children }));
    }
    return ((0, jsx_runtime_1.jsx)(exports.DropdownMenuContent, { ref: ref, ...props, children: children }));
});
exports.DropdownMenuItem = (0, react_1.forwardRef)(({ inset, disabled, style, children, ...props }, ref) => {
    const { theme } = (0, ui_1.useTheme)();
    return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Item, { ref: ref, ...props, children: (0, jsx_runtime_1.jsx)(text_1.TextContext.Provider, { value: (0, text_1.objectFromObjects)([
                { color: theme.colors.popoverForeground },
                atoms_1.a.fontSize.base,
            ]), children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
                    atoms_1.a.layout.flex.row,
                    atoms_1.a.layout.flex.alignCenter,
                    atoms_1.a.radius.all.sm,
                    atoms_1.py[1],
                    atoms_1.pl[2],
                    atoms_1.pr[2],
                ], children: typeof children === "function" ? (children({ pressed: true })) : typeof children === "string" ? ((0, jsx_runtime_1.jsx)(text_2.Text, { style: [inset && atoms_1.gap[2], disabled && { opacity: 0.5 }], children: children })) : (children) }) }) }));
});
exports.DropdownMenuCheckboxItem = (0, react_1.forwardRef)(({ children, checked, ...props }, ref) => {
    const { theme } = (0, ui_1.useTheme)();
    return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.CheckboxItem, { ref: ref, checked: checked, closeOnPress: props.closeOnPress || false, ...props, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
                atoms_1.a.layout.flex.row,
                atoms_1.a.layout.flex.alignCenter,
                atoms_1.a.radius.all.sm,
                atoms_1.py[1],
                atoms_1.pl[2],
                atoms_1.pr[2],
                atoms_1.pr[8],
            ], children: [children, (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [atoms_1.pl[1], atoms_1.layout.position.absolute, atoms_1.right[1]], children: checked && ((0, jsx_runtime_1.jsx)(lucide_react_native_1.Check, { size: 14, strokeWidth: 3, color: theme.colors.foreground })) })] }) }));
});
exports.DropdownMenuRadioItem = (0, react_1.forwardRef)(({ children, value, ...props }, ref) => {
    const { theme } = (0, ui_1.useTheme)();
    return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.RadioItem, { ref: ref, closeOnPress: props.closeOnPress || false, value: value, ...props, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
                atoms_1.a.layout.flex.row,
                atoms_1.a.layout.flex.alignCenter,
                atoms_1.a.radius.all.sm,
                atoms_1.py[1],
                atoms_1.pl[2],
                atoms_1.pr[1],
            ], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [atoms_1.pl[1], atoms_1.layout.position.absolute, atoms_1.right[1]], children: (0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.ItemIndicator, { children: (0, jsx_runtime_1.jsx)(lucide_react_native_1.Check, { size: 14, strokeWidth: 3, color: theme.colors.foreground }) }) }), children] }) }));
});
exports.DropdownMenuLabel = (0, react_1.forwardRef)(({ inset, ...props }, ref) => {
    const { theme } = (0, ui_1.useTheme)();
    return ((0, jsx_runtime_1.jsx)(text_2.Text, { ref: ref, style: [
            atoms_1.px[2],
            atoms_1.py[2],
            { color: theme.colors.textMuted },
            atoms_1.a.fontSize.base,
            (inset && atoms_1.gap[2]),
        ], ...props }));
});
exports.DropdownMenuSeparator = (0, react_1.forwardRef)((props, ref) => {
    const { theme } = (0, ui_1.useTheme)();
    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { ref: ref, style: [
            {
                borderBottomWidth: 1,
                borderBottomColor: theme.colors.border,
                marginVertical: -0.5,
            },
        ], ...props }));
});
function DropdownMenuShortcut(props) {
    const { theme } = (0, ui_1.useTheme)();
    return ((0, jsx_runtime_1.jsx)(text_2.Text, { style: [
            atoms_1.ml.auto,
            { color: theme.colors.textMuted },
            atoms_1.a.fontSize.sm,
            atoms_1.a.letterSpacing.widest,
        ], ...props }));
}
exports.DropdownMenuGroup = (0, react_1.forwardRef)((props, ref) => {
    const { theme } = (0, ui_1.useTheme)();
    const { inset, title, children, description, ...rest } = props;
    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [inset && atoms_1.gap[2]], ref: ref, ...rest, children: [title && ((0, jsx_runtime_1.jsx)(text_2.Text, { style: [
                    { color: theme.colors.text },
                    description ? atoms_1.pt[1] : atoms_1.py[1],
                    atoms_1.pl[2],
                ], children: title })), description && ((0, jsx_runtime_1.jsx)(text_2.Text, { style: [{ color: theme.colors.textMuted }, atoms_1.pb[2], atoms_1.pl[2], atoms_1.fontSize.sm], children: description })), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
                    { backgroundColor: theme.colors.muted },
                    react_native_1.Platform.OS === "web" ? [atoms_1.px[2], atoms_1.py[1]] : atoms_1.p[2],
                    atoms_1.gap.all[1],
                    { borderRadius: atoms_1.borderRadius.lg },
                ], children: children })] }));
});
exports.DropdownMenuInfo = (0, react_1.forwardRef)(({ description, ...props }, ref) => {
    const { theme } = (0, ui_1.useTheme)();
    return ((0, jsx_runtime_1.jsx)(text_2.Text, { style: [
            { color: theme.colors.textMuted },
            atoms_1.pt[1],
            atoms_1.pl[2],
            atoms_1.pb[2],
            atoms_1.fontSize.sm,
        ], children: description }));
});
// Re-export DropdownMenuBottomSheet for compatibility with native
exports.DropdownMenuBottomSheet = exports.DropdownMenuContent;
//# sourceMappingURL=dropdown.js.map