"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.buttonVariants = exports.Button = 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 = tslib_1.__importStar(require("react"));
const react_native_1 = require("react-native");
const theme_1 = require("../../lib/theme/theme");
const zero = tslib_1.__importStar(require("../../ui"));
const button_1 = require("./primitives/button");
const text_1 = require("./primitives/text");
// Button variants using class-variance-authority pattern
const buttonVariants = (0, class_variance_authority_1.cva)("", {
    variants: {
        variant: {
            primary: "primary",
            secondary: "secondary",
            outline: "outline",
            ghost: "ghost",
            destructive: "destructive",
            success: "success",
        },
        size: {
            sm: "sm",
            md: "md",
            lg: "lg",
            xl: "xl",
            pill: "pill",
            icon: "icon",
        },
    },
    defaultVariants: {
        variant: "primary",
        size: "md",
    },
});
exports.buttonVariants = buttonVariants;
exports.Button = (0, react_1.forwardRef)(({ variant = "primary", size = "md", href, children, leftIcon, rightIcon, loading = false, loadingText, disabled, style, width = "full", hoverStyle, ...props }, ref) => {
    const { zero: zt, icons } = (0, theme_1.useTheme)();
    // Get variant styles using theme.zero
    const buttonStyle = (0, react_1.useMemo)(() => {
        switch (variant) {
            case "primary":
                return zt.button.primary;
            case "secondary":
                return zt.button.secondary;
            case "outline":
                return zt.button.outline;
            case "ghost":
                return zt.button.ghost;
            case "destructive":
                return [zt.bg.destructive, zero.shadows.sm];
            case "success":
                return [zt.bg.success, zero.shadows.sm];
            default:
                return zt.button.primary;
        }
    }, [variant, zt]);
    // Get text styles using theme.zero
    const textStyle = (0, react_1.useMemo)(() => {
        switch (variant) {
            case "primary":
                return [zt.text.primaryForeground, { fontWeight: "600" }];
            case "secondary":
                return [zt.text.secondaryForeground, { fontWeight: "500" }];
            case "outline":
            case "ghost":
                return [zt.text.foreground, { fontWeight: "500" }];
            case "destructive":
                return [zt.text.destructiveForeground, { fontWeight: "600" }];
            case "success":
                return [zt.text.successForeground, { fontWeight: "600" }];
            default:
                return [zt.text.primaryForeground, { fontWeight: "600" }];
        }
    }, [variant, zt]);
    // Size styles using theme.zero
    const sizeStyles = (0, react_1.useMemo)(() => {
        switch (size) {
            case "sm":
                return {
                    button: [
                        zero.px[3],
                        zero.py[2],
                        { borderRadius: zero.borderRadius.md },
                    ],
                    inner: { gap: 4 },
                    text: zero.typography.universal.sm,
                };
            case "lg":
                return {
                    button: [
                        zero.px[6],
                        zero.py[3],
                        { borderRadius: zero.borderRadius.md },
                    ],
                    inner: { gap: 12 },
                    text: zero.typography.universal.lg,
                };
            case "xl":
                return {
                    button: [
                        zero.px[8],
                        zero.py[4],
                        { borderRadius: zero.borderRadius.lg },
                    ],
                    inner: { gap: 12 },
                    text: zero.typography.universal.xl,
                };
            case "pill":
                return {
                    button: [
                        zero.px[2],
                        zero.py[1],
                        { borderRadius: zero.borderRadius.full },
                    ],
                    inner: { gap: 4 },
                    text: zero.typography.universal.xs,
                };
            case "icon":
                return {
                    button: [zero.p[2], { borderRadius: zero.borderRadius.md }],
                    inner: { gap: 0 },
                    text: zero.typography.universal.sm,
                };
            case "md":
            default:
                return {
                    button: [
                        zero.px[4],
                        zero.py[2],
                        { borderRadius: zero.borderRadius.md },
                    ],
                    inner: { gap: 6 },
                    text: zero.typography.universal.sm,
                };
        }
    }, [size, zt]);
    const iconSize = react_1.default.useMemo(() => {
        switch (size) {
            case "sm":
                return icons.size.sm;
            case "lg":
                return icons.size.lg;
            case "xl":
                return icons.size.xl;
            case "md":
            default:
                return icons.size.md;
        }
    }, [size, icons]);
    const spinnerSize = (0, react_1.useMemo)(() => {
        switch (size) {
            case "sm":
                return "small";
            case "lg":
            case "xl":
                return "large";
            case "md":
            default:
                return "small";
        }
    }, [size]);
    const spinnerColor = (0, react_1.useMemo)(() => {
        switch (variant) {
            case "outline":
            case "ghost":
                return icons.color.primary;
            case "secondary":
                return icons.color.secondary;
            case "destructive":
                return icons.color.destructive;
            case "success":
                return icons.color.success;
            default:
                return icons.color.default;
        }
    }, [variant, icons]);
    const widthStyle = (0, react_1.useMemo)(() => {
        if (width === "full") {
            return { width: "100%" };
        }
        else if (width === "min") {
            return { alignSelf: "flex-start" };
        }
        else {
            return { width };
        }
    }, [width]);
    // if href, wrap in pressable that renders as <a> on web
    let Wrapper = react_1.default.Fragment;
    let wrapperProps = {};
    if (href) {
        Wrapper = react_native_1.Pressable;
        wrapperProps = {
            href,
            as: "a",
        };
    }
    return ((0, jsx_runtime_1.jsx)(Wrapper, { children: (0, jsx_runtime_1.jsx)(button_1.ButtonPrimitive.Root, { ref: ref, disabled: disabled || loading, style: [buttonStyle, sizeStyles.button, widthStyle, style], hoverStyle: hoverStyle, ...props, children: (0, jsx_runtime_1.jsxs)(button_1.ButtonPrimitive.Content, { style: sizeStyles.inner, children: [loading && !leftIcon ? ((0, jsx_runtime_1.jsx)(button_1.ButtonPrimitive.Icon, { position: "left", children: (0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: spinnerSize, color: spinnerColor }) })) : leftIcon ? ((0, jsx_runtime_1.jsx)(button_1.ButtonPrimitive.Icon, { position: "left", children: leftIcon })) : null, typeof children === "string" ? ((0, jsx_runtime_1.jsx)(text_1.TextPrimitive.Root, { style: [textStyle, sizeStyles.text], children: loading && loadingText ? loadingText : children })) : loading && loadingText ? (loadingText) : (children), loading && rightIcon ? ((0, jsx_runtime_1.jsx)(button_1.ButtonPrimitive.Icon, { position: "right", children: (0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: spinnerSize, color: spinnerColor }) })) : rightIcon ? ((0, jsx_runtime_1.jsx)(button_1.ButtonPrimitive.Icon, { position: "right", style: { width: iconSize, height: iconSize }, children: rightIcon })) : null] }) }) }));
});
exports.Button.displayName = "Button";
//# sourceMappingURL=button.js.map