"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MenuInfo = exports.MenuSeparator = exports.MenuLabel = exports.MenuItem = exports.MenuGroup = exports.MenuContainer = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_native_1 = require("react-native");
const react_native_gesture_handler_1 = require("react-native-gesture-handler");
const react_native_reanimated_1 = require("react-native-reanimated");
const atoms_1 = require("../../lib/theme/atoms");
const ui_1 = require("../../ui");
const text_1 = require("./text");
exports.MenuContainer = (0, react_1.forwardRef)(({ children, style }, ref) => {
    const { theme } = (0, ui_1.useTheme)();
    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { ref: ref, style: [atoms_1.gap.all[4], atoms_1.mt[4], atoms_1.mx[2], style], children: children }));
});
exports.MenuGroup = (0, react_1.forwardRef)(({ children, style }, ref) => {
    const { theme } = (0, ui_1.useTheme)();
    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { ref: ref, style: [
            { backgroundColor: (0, ui_1.hexToRgba)(theme.colors.muted, 0.75) },
            react_native_1.Platform.OS === "web" ? [atoms_1.px[1], atoms_1.py[1]] : atoms_1.p[1],
            atoms_1.gap.all[1],
            { borderRadius: atoms_1.borderRadius.lg },
            style,
        ], children: children }));
});
exports.MenuItem = (0, react_1.forwardRef)(({ children, disabled, style, draggable, dragHandle, _dragIndex, _dragTotalItems, _onDragMove, _onDragEnd, }, ref) => {
    const { theme } = (0, ui_1.useTheme)();
    if (draggable &&
        _dragIndex !== undefined &&
        _dragTotalItems !== undefined &&
        _onDragMove &&
        _onDragEnd) {
        const translateY = (0, react_native_reanimated_1.useSharedValue)(0);
        const isDragging = (0, react_native_reanimated_1.useSharedValue)(false);
        const ITEM_HEIGHT = 60;
        const panGesture = react_native_gesture_handler_1.Gesture.Pan()
            .onStart(() => {
            isDragging.value = true;
        })
            .onUpdate((event) => {
            translateY.value = event.translationY;
            const newIndex = Math.round(_dragIndex + translateY.value / ITEM_HEIGHT);
            const clampedIndex = Math.max(0, Math.min(_dragTotalItems - 1, newIndex));
            if (clampedIndex !== _dragIndex) {
                (0, react_native_reanimated_1.runOnJS)(_onDragMove)(_dragIndex, clampedIndex);
            }
        })
            .onEnd(() => {
            const newIndex = Math.round(_dragIndex + translateY.value / ITEM_HEIGHT);
            const clampedIndex = Math.max(0, Math.min(_dragTotalItems - 1, newIndex));
            (0, react_native_reanimated_1.runOnJS)(_onDragEnd)(_dragIndex, clampedIndex);
            translateY.value = (0, react_native_reanimated_1.withSpring)(0);
            isDragging.value = false;
        });
        const animatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
            transform: [{ translateY: translateY.value }],
            zIndex: isDragging.value ? 100 : 1,
            opacity: isDragging.value ? 0.8 : 1,
        }));
        return ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: animatedStyle, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { ref: ref, 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[3],
                    atoms_1.pr[2],
                    disabled && { opacity: 0.5 },
                    style,
                ], children: [dragHandle && ((0, jsx_runtime_1.jsx)(react_native_gesture_handler_1.GestureDetector, { gesture: panGesture, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: { marginRight: 8 }, children: dragHandle }) })), typeof children === "string" ? ((0, jsx_runtime_1.jsx)(text_1.Text, { style: { color: theme.colors.popoverForeground }, children: children })) : (children)] }) }));
    }
    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { ref: ref, 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[3],
            atoms_1.pr[2],
            disabled && { opacity: 0.5 },
            style,
        ], children: typeof children === "string" ? ((0, jsx_runtime_1.jsx)(text_1.Text, { style: { color: theme.colors.popoverForeground }, children: children })) : (children) }));
});
exports.MenuLabel = (0, react_1.forwardRef)(({ children, style }, ref) => {
    const { theme } = (0, ui_1.useTheme)();
    return ((0, jsx_runtime_1.jsx)(text_1.Text, { ref: ref, style: (0, ui_1.mergeStyles)(atoms_1.px[4], atoms_1.pt[2], { color: theme.colors.textMuted }, atoms_1.a.fontSize.base, style), children: children }));
});
exports.MenuSeparator = (0, react_1.forwardRef)(({ style }, ref) => {
    const { theme } = (0, ui_1.useTheme)();
    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { ref: ref, style: [
            atoms_1.mx[2],
            {
                height: 1,
                backgroundColor: theme.colors.border,
                marginVertical: 0,
            },
            style,
        ] }));
});
exports.MenuInfo = (0, react_1.forwardRef)(({ description, style }, ref) => {
    const { theme } = (0, ui_1.useTheme)();
    return ((0, jsx_runtime_1.jsx)(text_1.Text, { ref: ref, style: (0, ui_1.mergeStyles)({ color: theme.colors.textMuted, marginTop: -8 }, atoms_1.pt[1], atoms_1.pb[2], atoms_1.fontSize.sm, style), children: description }));
});
//# sourceMappingURL=menu.js.map