"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.dialogVariants = exports.DialogFooter = exports.DialogDescription = exports.DialogTitle = exports.ResponsiveDialog = exports.Dialog = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const bottom_sheet_1 = tslib_1.__importStar(require("@gorhom/bottom-sheet"));
// to get the portal
const Portal = tslib_1.__importStar(require("@rn-primitives/portal"));
const class_variance_authority_1 = require("class-variance-authority");
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_safe_area_context_1 = require("react-native-safe-area-context");
const theme_1 = require("../../lib/theme/theme");
const icons_1 = require("./icons");
const modal_1 = require("./primitives/modal");
const text_1 = require("./text");
const ThemedX = (0, icons_1.createThemedIcon)(lucide_react_native_1.X);
// Dialog variants using class-variance-authority pattern
const dialogVariants = (0, class_variance_authority_1.cva)("", {
    variants: {
        variant: {
            default: "default",
            sheet: "sheet",
            fullscreen: "fullscreen",
        },
        size: {
            sm: "sm",
            md: "md",
            lg: "lg",
            xl: "xl",
            full: "full",
        },
        position: {
            center: "center",
            top: "top",
            bottom: "bottom",
            left: "left",
            right: "right",
        },
    },
    defaultVariants: {
        variant: "default",
        size: "md",
        position: "center",
    },
});
exports.dialogVariants = dialogVariants;
// Bottom Sheet Dialog Component
const DialogBottomSheet = (0, react_1.forwardRef)(function DialogBottomSheet({ overlayStyle, portalHost, children, title, description, showCloseButton = true, onClose, open = false, onOpenChange, ...props }, _ref) {
    const { theme } = (0, theme_1.useTheme)();
    const sheetRef = (0, react_1.useRef)(null);
    const { top } = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
    const dims = (0, react_native_1.useWindowDimensions)();
    const handleClose = react_1.default.useCallback(() => {
        if (onClose) {
            onClose();
        }
        if (onOpenChange) {
            onOpenChange(false);
        }
    }, [onClose, onOpenChange]);
    if (!open) {
        return null;
    }
    return ((0, jsx_runtime_1.jsx)(Portal.Portal, { name: "dialog", children: (0, jsx_runtime_1.jsx)(bottom_sheet_1.default, { ref: sheetRef, index: open ? 0 : -1, enablePanDownToClose: true, enableDynamicSizing: true, maxDynamicContentSize: dims.height - top, keyboardBehavior: "interactive", keyboardBlurBehavior: "restore", enableContentPanningGesture: false, backdropComponent: ({ style }) => ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: [style, react_native_1.StyleSheet.absoluteFill], onPress: handleClose })), onClose: handleClose, style: [overlayStyle], backgroundStyle: {
                backgroundColor: theme.colors.card,
                borderRadius: theme.borderRadius.lg,
                ...theme.shadows.lg,
            }, handleIndicatorStyle: {
                width: 48,
                height: 4,
                backgroundColor: theme.colors.textMuted,
            }, children: (0, jsx_runtime_1.jsxs)(bottom_sheet_1.BottomSheetScrollView, { style: {
                    flex: 1,
                    width: "100%",
                }, contentContainerStyle: { flexGrow: 1 }, children: [(title || showCloseButton) && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: {
                            paddingHorizontal: theme.spacing[4],
                            paddingVertical: theme.spacing[4],
                            flexDirection: "row",
                            alignItems: "center",
                            justifyContent: "space-between",
                            width: "100%",
                        }, children: [title && (0, jsx_runtime_1.jsx)(exports.DialogTitle, { children: title }), showCloseButton && ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: handleClose, style: {
                                    width: theme.touchTargets.minimum,
                                    height: theme.touchTargets.minimum,
                                    alignItems: "center",
                                    justifyContent: "center",
                                    borderRadius: theme.borderRadius.sm,
                                    marginLeft: theme.spacing[2],
                                }, children: (0, jsx_runtime_1.jsx)(DialogCloseIcon, {}) }))] })), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: {
                            paddingHorizontal: theme.spacing[4],
                            paddingBottom: theme.spacing[6],
                            flex: 1,
                            width: "100%",
                        }, children: [description && ((0, jsx_runtime_1.jsx)(exports.DialogDescription, { children: description })), children] })] }) }) }));
});
exports.Dialog = (0, react_1.forwardRef)(({ variant = "default", size = "md", position = "center", children, title, description, dismissible = true, showCloseButton = true, onClose, open = false, onOpenChange, ...props }, ref) => {
    const { theme } = (0, theme_1.useTheme)();
    // Create dynamic styles based on theme
    const styles = react_1.default.useMemo(() => createStyles(theme), [theme]);
    const handleClose = react_1.default.useCallback(() => {
        if (onClose) {
            onClose();
        }
        if (onOpenChange) {
            onOpenChange(false);
        }
    }, [onClose, onOpenChange]);
    const presentationStyle = react_1.default.useMemo(() => {
        if (variant === "sheet" && react_native_1.Platform.OS === "ios") {
            return "pageSheet";
        }
        if (variant === "fullscreen") {
            return "fullScreen";
        }
        return react_native_1.Platform.OS === "ios"
            ? "pageSheet"
            : "fullScreen";
    }, [variant]);
    const animationType = react_1.default.useMemo(() => {
        if (variant === "sheet") {
            return "slide";
        }
        return "fade";
    }, [variant]);
    return ((0, jsx_runtime_1.jsx)(modal_1.ModalPrimitive.Root, { ref: ref, open: open, onOpenChange: onOpenChange, presentationStyle: presentationStyle, animationType: animationType, ...props, children: (0, jsx_runtime_1.jsx)(modal_1.ModalPrimitive.Overlay, { dismissible: dismissible, onDismiss: handleClose, style: styles.overlay, children: (0, jsx_runtime_1.jsxs)(modal_1.ModalPrimitive.Content, { position: position || "center", size: size || "md", style: [
                    styles.content,
                    variant === "sheet" && styles.sheetContent,
                    variant === "fullscreen" && styles.fullscreenContent,
                    size === "sm" && styles.smContent,
                    size === "md" && styles.mdContent,
                    size === "lg" && styles.lgContent,
                    size === "xl" && styles.xlContent,
                    size === "full" && styles.fullContent,
                ], children: [(title || showCloseButton) && ((0, jsx_runtime_1.jsxs)(modal_1.ModalPrimitive.Header, { withBorder: variant !== "sheet", style: styles.header, children: [(0, jsx_runtime_1.jsx)(exports.DialogTitle, { children: title }), showCloseButton && ((0, jsx_runtime_1.jsx)(modal_1.ModalPrimitive.Close, { onClose: handleClose, style: styles.closeButton, children: (0, jsx_runtime_1.jsx)(DialogCloseIcon, {}) }))] })), (0, jsx_runtime_1.jsxs)(modal_1.ModalPrimitive.Body, { scrollable: variant !== "fullscreen", style: styles.body, children: [description && ((0, jsx_runtime_1.jsx)(exports.DialogDescription, { children: description })), children] })] }) }) }));
});
exports.Dialog.displayName = "Dialog";
/// Responsive Dialog Component. On mobile this will render a *bottom sheet*.
/// Prefer this over the regular Dialog component for better mobile UX.
exports.ResponsiveDialog = (0, react_1.forwardRef)(({ children, size, ...props }, ref) => {
    const { width } = (0, react_native_1.useWindowDimensions)();
    // On web, you might want to always use the normal dialog
    // On mobile (width < 800), use the bottom sheet
    const isBottomSheet = react_native_1.Platform.OS !== "web" && width < 800;
    if (isBottomSheet) {
        return ((0, jsx_runtime_1.jsx)(DialogBottomSheet, { ref: ref, ...props, size: "full", showCloseButton: false, variant: "fullscreen", children: children }));
    }
    // Use larger default size for regular dialogs to give more room
    const dialogSize = size || "lg";
    return ((0, jsx_runtime_1.jsx)(exports.Dialog, { ref: ref, size: dialogSize, ...props, children: children }));
});
exports.ResponsiveDialog.displayName = "ResponsiveDialog";
exports.DialogTitle = (0, react_1.forwardRef)(({ children, style, ...props }, ref) => {
    const { theme } = (0, theme_1.useTheme)();
    const styles = react_1.default.useMemo(() => createStyles(theme), [theme]);
    if (!children)
        return null;
    return ((0, jsx_runtime_1.jsx)(text_1.Text, { ref: ref, style: [styles.title, style], ...props, children: children }));
});
exports.DialogTitle.displayName = "DialogTitle";
exports.DialogDescription = (0, react_1.forwardRef)(({ children, style, ...props }, ref) => {
    const { theme } = (0, theme_1.useTheme)();
    const styles = react_1.default.useMemo(() => createStyles(theme), [theme]);
    if (!children)
        return null;
    return ((0, jsx_runtime_1.jsx)(text_1.Text, { ref: ref, style: [styles.description, style], ...props, children: children }));
});
exports.DialogDescription.displayName = "DialogDescription";
exports.DialogFooter = (0, react_1.forwardRef)(({ children, direction = "row", justify = "flex-end", withBorder = true, style, ...props }, ref) => {
    const { theme } = (0, theme_1.useTheme)();
    const styles = react_1.default.useMemo(() => createStyles(theme), [theme]);
    if (!children)
        return null;
    return ((0, jsx_runtime_1.jsx)(modal_1.ModalPrimitive.Footer, { ref: ref, withBorder: withBorder, direction: direction, justify: justify, style: [styles.footer, style], ...props, children: children }));
});
exports.DialogFooter.displayName = "DialogFooter";
// Dialog Close Icon component (Lucide X)
const DialogCloseIcon = () => {
    return (0, jsx_runtime_1.jsx)(ThemedX, { size: "md", variant: "default" });
};
// Create theme-aware styles
function createStyles(theme) {
    return react_native_1.StyleSheet.create({
        overlay: {
            backgroundColor: "rgba(0, 0, 0, 0.5)",
        },
        content: {
            backgroundColor: theme.colors.card,
            borderRadius: theme.borderRadius.lg,
            ...theme.shadows.lg,
            maxHeight: "90%",
            maxWidth: "90%",
        },
        // Variant styles
        sheetContent: {
            borderTopLeftRadius: theme.borderRadius.xl,
            borderTopRightRadius: theme.borderRadius.xl,
            borderBottomLeftRadius: 0,
            borderBottomRightRadius: 0,
            marginTop: "auto",
            marginBottom: 0,
            maxHeight: "80%",
            width: "100%",
            maxWidth: "100%",
        },
        fullscreenContent: {
            width: "100%",
            height: "100%",
            maxWidth: "100%",
            maxHeight: "100%",
            borderRadius: 0,
            margin: 0,
        },
        // Size styles
        smContent: {
            width: 400,
            minWidth: 300,
            maxWidth: 500,
            minHeight: 200,
        },
        mdContent: {
            width: 500,
            minWidth: 400,
            maxWidth: 600,
            minHeight: 300,
        },
        lgContent: {
            width: 600,
            minWidth: 500,
            maxWidth: 800,
            minHeight: 400,
        },
        xlContent: {
            width: 800,
            minWidth: 600,
            maxWidth: 1000,
            minHeight: 500,
        },
        fullContent: {
            width: "95%",
            height: "95%",
            maxWidth: "95%",
            maxHeight: "95%",
        },
        header: {
            paddingHorizontal: theme.spacing[6],
            paddingVertical: theme.spacing[4],
            flexDirection: "row",
            alignItems: "center",
            justifyContent: "space-between",
        },
        body: {
            paddingHorizontal: theme.spacing[6],
            paddingBottom: theme.spacing[6],
            flex: 1,
        },
        footer: {
            paddingHorizontal: theme.spacing[6],
            paddingVertical: theme.spacing[4],
            gap: theme.spacing[2],
            width: "100%",
        },
        title: {
            fontSize: 20,
            fontWeight: "600",
            color: theme.colors.text,
            flex: 1,
            lineHeight: 24,
        },
        description: {
            fontSize: 16,
            color: theme.colors.textMuted,
            lineHeight: 22,
            marginVertical: theme.spacing[4],
        },
        closeButton: {
            width: theme.touchTargets.minimum,
            height: theme.touchTargets.minimum,
            alignItems: "center",
            justifyContent: "center",
            borderRadius: theme.borderRadius.sm,
            marginLeft: theme.spacing[2],
        },
    });
}
//# sourceMappingURL=dialog.js.map