"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.viewVariants = exports.Center = exports.Column = exports.Row = exports.Overlay = exports.Surface = exports.Container = exports.Card = exports.View = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const class_variance_authority_1 = require("class-variance-authority");
const react_1 = require("react");
const react_native_1 = require("react-native");
const theme_1 = require("../../lib/theme/theme");
const zero = tslib_1.__importStar(require("../../ui"));
// View variants using class-variance-authority pattern
const viewVariants = (0, class_variance_authority_1.cva)("", {
    variants: {
        variant: {
            default: "default",
            card: "card",
            overlay: "overlay",
            surface: "surface",
            container: "container",
        },
        padding: {
            none: "none",
            xs: "xs",
            sm: "sm",
            md: "md",
            lg: "lg",
            xl: "xl",
        },
        margin: {
            none: "none",
            xs: "xs",
            sm: "sm",
            md: "md",
            lg: "lg",
            xl: "xl",
        },
        direction: {
            row: "row",
            column: "column",
            "row-reverse": "row-reverse",
            "column-reverse": "column-reverse",
        },
        align: {
            start: "start",
            center: "center",
            end: "end",
            stretch: "stretch",
            baseline: "baseline",
        },
        justify: {
            start: "start",
            center: "center",
            end: "end",
            between: "between",
            around: "around",
            evenly: "evenly",
        },
        flex: {
            none: "none",
            auto: "auto",
            initial: "initial",
        },
    },
    defaultVariants: {
        variant: "default",
        padding: "none",
        margin: "none",
        direction: "column",
        align: "stretch",
        justify: "start",
        flex: "none",
    },
});
exports.viewVariants = viewVariants;
exports.View = (0, react_1.forwardRef)(({ variant = "default", padding = "none", margin = "none", direction = "column", align = "stretch", justify = "start", flex = "none", fullWidth = false, fullHeight = false, centered = false, backgroundColor, borderColor, borderWidth, borderRadius, shadow = false, style, ...props }, ref) => {
    const { zero: zt } = (0, theme_1.useTheme)();
    // Map variant to styles using theme.zero
    const variantStyles = (() => {
        switch (variant) {
            case "card":
                return {
                    ...zt.bg.card,
                    borderRadius: zero.borderRadius.lg,
                    ...zero.shadows.md,
                };
            case "overlay":
                return zt.bg.overlay;
            case "surface":
                return zt.bg.background;
            case "container":
                return {
                    ...zt.bg.background,
                    ...zero.p[8],
                };
            default:
                return {};
        }
    })();
    // Map padding to zero tokens
    const paddingValue = (() => {
        switch (padding) {
            case "xs":
                return zero.p[1];
            case "sm":
                return zero.p[2];
            case "md":
                return zero.p[4];
            case "lg":
                return zero.p[6];
            case "xl":
                return zero.p[8];
            default:
                return {};
        }
    })();
    // Map margin to zero tokens
    const marginValue = (() => {
        switch (margin) {
            case "xs":
                return zero.m[1];
            case "sm":
                return zero.m[2];
            case "md":
                return zero.m[4];
            case "lg":
                return zero.m[6];
            case "xl":
                return zero.m[8];
            default:
                return {};
        }
    })();
    // Map flex direction
    const flexDirection = (() => {
        switch (direction) {
            case "row":
                return "row";
            case "column":
                return "column";
            case "row-reverse":
                return "row-reverse";
            case "column-reverse":
                return "column-reverse";
            default:
                return "column";
        }
    })();
    // Map align items
    const alignItems = (() => {
        switch (align) {
            case "start":
                return "flex-start";
            case "center":
                return "center";
            case "end":
                return "flex-end";
            case "stretch":
                return "stretch";
            case "baseline":
                return "baseline";
            default:
                return "stretch";
        }
    })();
    // Map justify content
    const justifyContent = (() => {
        switch (justify) {
            case "start":
                return "flex-start";
            case "center":
                return "center";
            case "end":
                return "flex-end";
            case "between":
                return "space-between";
            case "around":
                return "space-around";
            case "evenly":
                return "space-evenly";
            default:
                return "flex-start";
        }
    })();
    // Map flex value
    const flexValue = (() => {
        if (typeof flex === "number") {
            return flex;
        }
        switch (flex) {
            case "auto":
                return undefined; // auto is default
            case "initial":
                return 0;
            case "none":
            default:
                return undefined;
        }
    })();
    const computedStyle = {
        ...variantStyles,
        ...paddingValue,
        ...marginValue,
        flexDirection,
        alignItems,
        justifyContent,
        ...(flexValue !== undefined && { flex: flexValue }),
        ...(fullWidth && { width: "100%" }),
        ...(fullHeight && { height: "100%" }),
        ...(centered && {
            alignItems: "center",
            justifyContent: "center",
        }),
        ...(backgroundColor && { backgroundColor }),
        ...(borderColor && { borderColor }),
        ...(borderWidth !== undefined && { borderWidth }),
        ...(borderRadius !== undefined && { borderRadius }),
        ...(shadow && zero.shadows.md),
    };
    const finalStyle = Array.isArray(style)
        ? [computedStyle, ...style]
        : [computedStyle, style];
    return (0, jsx_runtime_1.jsx)(react_native_1.View, { ref: ref, style: finalStyle, ...props });
});
exports.View.displayName = "View";
// Convenience components
exports.Card = (0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(exports.View, { ref: ref, variant: "card", ...props }));
exports.Card.displayName = "Card";
exports.Container = (0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(exports.View, { ref: ref, variant: "container", ...props }));
exports.Container.displayName = "Container";
exports.Surface = (0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(exports.View, { ref: ref, variant: "surface", ...props }));
exports.Surface.displayName = "Surface";
exports.Overlay = (0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(exports.View, { ref: ref, variant: "overlay", ...props }));
exports.Overlay.displayName = "Overlay";
exports.Row = (0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(exports.View, { ref: ref, direction: "row", ...props }));
exports.Row.displayName = "Row";
exports.Column = (0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)(exports.View, { ref: ref, direction: "column", ...props }));
exports.Column.displayName = "Column";
exports.Center = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(exports.View, { ref: ref, centered: true, ...props })));
exports.Center.displayName = "Center";
//# sourceMappingURL=view.js.map