"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Tooltip = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_native_1 = require("react-native");
const theme_1 = require("../../lib/theme/theme");
const text_1 = require("../ui/text");
exports.Tooltip = (0, react_1.forwardRef)(({ content, children, position = "top", style }, ref) => {
    const { theme } = (0, theme_1.useTheme)();
    const [isVisible, setIsVisible] = (0, react_1.useState)(false);
    const styles = createStyles(theme, position);
    const handleHoverIn = () => {
        setIsVisible(true);
    };
    const handleHoverOut = () => {
        setIsVisible(false);
    };
    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { ref: ref, style: [styles.container, style], onPointerEnter: handleHoverIn, onPointerLeave: handleHoverOut, children: [children, isVisible && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.tooltip, children: (0, jsx_runtime_1.jsx)(text_1.Text, { style: styles.tooltipText, children: content }) }))] }));
});
exports.Tooltip.displayName = "Tooltip";
function createStyles(theme, position) {
    const positionStyles = {
        top: {
            tooltip: {
                bottom: "100%",
                left: "50%",
                transform: [{ translateX: -50 }],
                marginBottom: theme.spacing[1],
            },
            arrow: {
                top: "100%",
                left: "50%",
                transform: [{ translateX: -50 }],
                borderTopColor: theme.colors.card,
            },
        },
        bottom: {
            tooltip: {
                top: "100%",
                left: "50%",
                transform: [{ translateX: -50 }],
                marginTop: theme.spacing[1],
            },
            arrow: {
                bottom: "100%",
                left: "50%",
                transform: [{ translateX: -50 }],
                borderBottomColor: theme.colors.card,
            },
        },
        left: {
            tooltip: {
                right: "100%",
                top: "50%",
                transform: [{ translateY: -50 }],
                marginRight: theme.spacing[1],
            },
            arrow: {
                left: "100%",
                top: "50%",
                transform: [{ translateY: -50 }],
                borderLeftColor: theme.colors.card,
            },
        },
        right: {
            tooltip: {
                left: "100%",
                top: "50%",
                transform: [{ translateY: -50 }],
                marginLeft: theme.spacing[1],
            },
            arrow: {
                right: "100%",
                top: "50%",
                transform: [{ translateY: -50 }],
                borderRightColor: theme.colors.card,
            },
        },
    };
    const currentPosition = positionStyles[position];
    return react_native_1.StyleSheet.create({
        container: {
            position: "relative",
        },
        tooltip: {
            position: "absolute",
            backgroundColor: theme.colors.card,
            borderRadius: theme.borderRadius.md,
            padding: theme.spacing[2],
            maxWidth: 200,
            ...theme.shadows.lg,
            ...currentPosition.tooltip,
            zIndex: 1000,
        },
        tooltipText: {
            color: theme.colors.text,
            fontSize: 12,
            lineHeight: 16,
            textAlign: "left",
        },
    });
}
//# sourceMappingURL=tooltip.js.map