"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
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.DropdownMenuBottomSheet = 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 bottom_sheet_1 = tslib_1.__importStar(require("@gorhom/bottom-sheet"));
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 react_native_reanimated_1 = tslib_1.__importStar(require("react-native-reanimated"));
const react_native_safe_area_context_1 = require("react-native-safe-area-context");
const atoms_1 = require("../../lib/theme/atoms");
const ui_1 = require("../../ui");
const text_1 = require("./primitives/text");
const text_2 = require("./text");
const NavigationStackContext = (0, react_1.createContext)(null);
const useNavigationStack = () => {
    const context = (0, react_1.useContext)(NavigationStackContext);
    return context;
};
const SubMenuContext = (0, react_1.createContext)(null);
const RadioGroupContext = (0, react_1.createContext)(null);
exports.DropdownMenu = DropdownMenuPrimitive.Root;
exports.DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
exports.DropdownMenuPortal = DropdownMenuPrimitive.Portal;
exports.DropdownMenuRadioGroup = (0, react_1.forwardRef)(({ children, value, onValueChange, ...props }, ref) => {
    return ((0, jsx_runtime_1.jsx)(RadioGroupContext.Provider, { value: { value, onValueChange }, children: children }));
});
exports.DropdownMenuSub = (0, react_1.forwardRef)(({ children, ...props }, ref) => {
    const navStack = useNavigationStack();
    const [subMenuTitle, setSubMenuTitle] = (0, react_1.useState)();
    const renderContentRef = (0, react_1.useRef)(null);
    const [subMenuKey, setSubMenuKey] = (0, react_1.useState)(null);
    const trigger = () => {
        if (renderContentRef.current && navStack) {
            const key = `submenu-${Date.now()}`;
            setSubMenuKey(key);
            navStack.push({
                key,
                title: subMenuTitle,
                content: (props) => {
                    const renderFn = renderContentRef.current;
                    return renderFn ? renderFn() : null;
                },
            });
        }
    };
    const setRenderContent = (renderer) => {
        renderContentRef.current = renderer;
    };
    const contextValue = react_1.default.useMemo(() => ({
        renderContent: () => renderContentRef.current?.(),
        setRenderContent,
        title: subMenuTitle,
        setTitle: setSubMenuTitle,
        trigger,
        key: subMenuKey,
    }), [subMenuTitle, subMenuKey, navStack]);
    return ((0, jsx_runtime_1.jsx)(SubMenuContext.Provider, { value: contextValue, children: children }));
});
exports.DropdownMenuBottomSheet = (0, react_1.forwardRef)(function DropdownMenuBottomSheet({ overlayStyle, portalHost, children, ...rest }, _ref) {
    const { onOpenChange } = DropdownMenuPrimitive.useRootContext();
    const { zero: zt, theme } = (0, ui_1.useTheme)();
    const sheetRef = (0, react_1.useRef)(null);
    const { width } = (0, react_native_1.useWindowDimensions)();
    const isWide = width >= 450;
    const sheetWidth = isWide ? 450 : width;
    const horizontalMargin = isWide ? (width - sheetWidth) / 2 : 0;
    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
    const [stack, setStack] = (0, react_1.useState)([
        { key: "root", content: children },
    ]);
    react_1.default.useEffect(() => {
        setStack((prev) => {
            if (!Array.isArray(prev) || prev.length === 0) {
                return [{ key: "root", content: children }];
            }
            const newStack = [...prev];
            newStack[0] = { ...newStack[0], content: children };
            return newStack;
        });
    }, [children]);
    const slideAnim = (0, react_native_reanimated_1.useSharedValue)(0);
    const fadeAnim = (0, react_native_reanimated_1.useSharedValue)(1);
    const push = (item) => {
        setStack((prev) => {
            if (!Array.isArray(prev))
                return [{ key: "root", content: children }, item];
            return [...prev, item];
        });
        slideAnim.value = 40;
        fadeAnim.value = 0;
        slideAnim.value = (0, react_native_reanimated_1.withTiming)(0, { duration: 350 });
        fadeAnim.value = (0, react_native_reanimated_1.withTiming)(1, { duration: 350 });
    };
    const popStack = () => {
        (0, react_1.startTransition)(() => {
            setStack((prev) => {
                if (!Array.isArray(prev) || prev.length <= 1) {
                    return [{ key: "root", content: children }];
                }
                return prev.slice(0, -1);
            });
        });
    };
    const resetAnimationValues = () => {
        setTimeout(() => {
            slideAnim.value = 0;
            fadeAnim.value = 1;
        }, 5);
    };
    const pop = () => {
        if (stack.length <= 1)
            return;
        slideAnim.value = (0, react_native_reanimated_1.withTiming)(40, { duration: 150 });
        fadeAnim.value = (0, react_native_reanimated_1.withTiming)(0, { duration: 150 }, (finished) => {
            if (finished) {
                (0, react_native_reanimated_1.runOnJS)(popStack)();
                (0, react_native_reanimated_1.runOnJS)(resetAnimationValues)();
            }
        });
    };
    const animatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
        transform: [{ translateX: slideAnim.value }],
        opacity: fadeAnim.value,
    }));
    const headerAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
        opacity: fadeAnim.value,
    }));
    const currentLevel = stack[stack.length - 1];
    const isNested = stack.length > 1;
    const onBackgroundTap = () => {
        if (sheetRef.current)
            sheetRef.current?.close();
        setTimeout(() => {
            onOpenChange?.(false);
        }, 300);
    };
    if (!currentLevel) {
        return null;
    }
    return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Portal, { hostName: portalHost, children: (0, jsx_runtime_1.jsx)(NavigationStackContext.Provider, { value: { stack, push, pop, isNested }, children: (0, jsx_runtime_1.jsxs)(bottom_sheet_1.default, { ref: sheetRef, enablePanDownToClose: true, enableDynamicSizing: true, detached: isWide, bottomInset: isWide ? 0 : 0, backdropComponent: ({ style }) => ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: [style, react_native_1.StyleSheet.absoluteFill], onPress: () => onBackgroundTap() })), onClose: () => onOpenChange?.(false), style: [
                    overlayStyle,
                    react_native_1.StyleSheet.flatten(rest.style),
                    isWide && { marginHorizontal: horizontalMargin },
                ], backgroundStyle: [zt.bg.popover, atoms_1.a.radius.all.md, atoms_1.a.shadows.md, atoms_1.p[1]], handleIndicatorStyle: [
                    atoms_1.a.sizes.width[12],
                    atoms_1.a.sizes.height[1],
                    zt.bg.mutedForeground,
                ], children: [isNested && ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [
                            headerAnimatedStyle,
                            atoms_1.a.layout.flex.row,
                            atoms_1.a.layout.flex.alignCenter,
                            atoms_1.px[4],
                            atoms_1.pb[2],
                            {
                                borderBottomWidth: 1,
                                borderBottomColor: theme.colors.border,
                            },
                        ], children: (0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { onPress: pop, style: [
                                atoms_1.a.layout.flex.row,
                                atoms_1.a.layout.flex.alignCenter,
                                atoms_1.gap.all[2],
                            ], hitSlop: 80, children: [(0, jsx_runtime_1.jsx)(lucide_react_native_1.ChevronLeft, { size: 20, color: theme.colors.foreground }), currentLevel?.title ? ((0, jsx_runtime_1.jsx)(text_2.Text, { size: "lg", children: currentLevel.title })) : null] }) })), (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: animatedStyle, children: (0, jsx_runtime_1.jsx)(bottom_sheet_1.BottomSheetScrollView, { style: [atoms_1.px[4]], contentContainerStyle: {
                                paddingBottom: insets.bottom + 50,
                                overflow: "hidden",
                            }, children: stack.map((level, index) => {
                                const isCurrent = index === stack.length - 1;
                                return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [{ display: isCurrent ? "flex" : "none" }], children: typeof level.content === "function"
                                        ? level.content({ pressed: true })
                                        : level.content }, level.key));
                            }) }) })] }) }) }));
});
exports.DropdownMenuSubTrigger = (0, react_1.forwardRef)(({ inset, children, subMenuTitle, ...props }, ref) => {
    const subMenuContext = (0, react_1.useContext)(SubMenuContext);
    const { icons } = (0, ui_1.useTheme)();
    react_1.default.useEffect(() => {
        if (subMenuContext &&
            subMenuTitle &&
            subMenuContext.title !== subMenuTitle) {
            subMenuContext.setTitle(subMenuTitle);
        }
    }, [subMenuContext, subMenuTitle]);
    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => {
            subMenuContext?.trigger();
        }, ...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.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, { children: 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)(lucide_react_native_1.ChevronRight, { size: 18, color: icons.color.muted }) })] }) }));
});
exports.DropdownMenuSubContent = (0, react_1.forwardRef)(({ children, ...props }, ref) => {
    const subMenuContext = (0, react_1.useContext)(SubMenuContext);
    const navStack = useNavigationStack();
    const prevChildrenRef = (0, react_1.useRef)(null);
    react_1.default.useEffect(() => {
        if (subMenuContext && navStack) {
            if (prevChildrenRef.current === children) {
                return;
            }
            prevChildrenRef.current = children;
            subMenuContext.setRenderContent(() => children);
        }
    }, [children, subMenuContext, navStack]);
    return null;
});
exports.DropdownMenuContent = (0, react_1.forwardRef)(({ overlayStyle, portalHost, style, children, ...props }, ref) => {
    return ((0, jsx_runtime_1.jsx)(exports.DropdownMenuBottomSheet, { ...props, children: children }));
});
exports.DropdownMenuContentWithoutPortal = (0, react_1.forwardRef)(({ overlayStyle, maxHeightPercentage = 0.8, children, style, ...props }, ref) => {
    return ((0, jsx_runtime_1.jsx)(exports.DropdownMenuBottomSheet, { ...props, children: children }));
});
exports.ResponsiveDropdownMenuContent = (0, react_1.forwardRef)(({ children, onModeChange, ...props }, ref) => {
    react_1.default.useEffect(() => {
        onModeChange?.(true);
    }, [onModeChange]);
    return ((0, jsx_runtime_1.jsx)(exports.DropdownMenuBottomSheet, { 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)(react_native_1.Pressable, { ...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)(react_native_1.Pressable, { onPress: (e) => {
            props.onCheckedChange?.(!checked);
            props.onPress?.(e);
        }, ...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.CheckCircle, { size: 14, strokeWidth: 3, color: theme.colors.foreground })) : ((0, jsx_runtime_1.jsx)(lucide_react_native_1.Circle, { size: 14, strokeWidth: 3, color: theme.colors.mutedForeground })) })] }) }));
});
exports.DropdownMenuRadioItem = (0, react_1.forwardRef)(({ children, value, ...props }, ref) => {
    const { theme } = (0, ui_1.useTheme)();
    const radioGroupContext = (0, react_1.useContext)(RadioGroupContext);
    const isSelected = radioGroupContext?.value === value;
    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: (e) => {
            if (value && radioGroupContext?.onValueChange) {
                radioGroupContext.onValueChange(value);
            }
            props.onPress?.(e);
        }, ...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[8],
            ], children: [children, isSelected && ((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)(lucide_react_native_1.Check, { size: 14, strokeWidth: 3, color: theme.colors.foreground }) }))] }) }));
});
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, ...rest } = props;
    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [atoms_1.pt[2], inset && atoms_1.gap[2]], ref: ref, ...rest, children: [title && ((0, jsx_runtime_1.jsx)(text_2.Text, { style: [{ color: theme.colors.textMuted }, atoms_1.pb[1], atoms_1.pl[2]], children: title })), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
                    { backgroundColor: theme.colors.muted },
                    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 }));
});
//# sourceMappingURL=dropdown.native.js.map