"use strict";

import React, { useMemo, memo } from 'react';
import { ActivityIndicator, Animated, Platform, Pressable, StyleSheet, Text, View } from 'react-native';
import { useTheme } from "../theme/use-theme.js";
import { usePressAnimation } from "../hooks/usePressAnimation.js";
import { useInteractionState } from "../hooks/useInteractionState.js";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const SIZE_CONFIG = {
  small: {
    paddingVertical: 6,
    paddingHorizontal: 12,
    fontSize: 14,
    minHeight: 32
  },
  medium: {
    paddingVertical: 8,
    paddingHorizontal: 16,
    fontSize: 15,
    minHeight: 40
  },
  large: {
    paddingVertical: 12,
    paddingHorizontal: 20,
    fontSize: 16,
    minHeight: 48
  }
};
const ICON_HIT_SLOP = {
  top: 10,
  bottom: 10,
  left: 10,
  right: 10
};
const PRESS_SCALE = 0.97;
const SCALE_VARIANTS = new Set(['primary', 'secondary', 'inverse']);
const ButtonComponent = ({
  onPress,
  children,
  disabled = false,
  variant = 'primary',
  size = 'medium',
  style,
  textStyle,
  icon,
  iconPosition = 'left',
  loading = false,
  loadingColor,
  accessibilityLabel,
  accessibilityHint,
  hitSlop,
  activeOpacity,
  testID,
  className
}) => {
  const theme = useTheme();
  const hasScaleFeedback = SCALE_VARIANTS.has(variant);
  const isInteractionBlocked = disabled || loading;
  const {
    scaleAnim,
    onPressIn: onScalePressIn,
    onPressOut: onScalePressOut
  } = usePressAnimation(hasScaleFeedback && !isInteractionBlocked ? PRESS_SCALE : undefined);
  // Non-scale variants (icon/ghost/text) convey press feedback via an opacity
  // dip. We drive it through component state + onPressIn/onPressOut rather than
  // Pressable's function-form `style` because NativeWind v4's css-interop
  // rewrites the `style` prop of every JSX element and swallows the function
  // form, which would drop ALL base styles (background, radius, padding,
  // minHeight). A static style array is merged correctly by css-interop.
  const {
    state: pressed,
    onIn: onPressedIn,
    onOut: onPressedOut
  } = useInteractionState();
  const handlePressIn = useMemo(() => {
    if (isInteractionBlocked) return undefined;
    return () => {
      onScalePressIn();
      onPressedIn();
    };
  }, [isInteractionBlocked, onScalePressIn, onPressedIn]);
  const handlePressOut = useMemo(() => {
    if (isInteractionBlocked) return undefined;
    return () => {
      onScalePressOut();
      onPressedOut();
    };
  }, [isInteractionBlocked, onScalePressOut, onPressedOut]);
  const baseStyles = useMemo(() => {
    const sizeConfig = SIZE_CONFIG[size];
    const styles = {
      alignItems: 'center',
      justifyContent: 'center',
      flexDirection: 'row',
      overflow: 'hidden'
    };
    if (variant !== 'icon') {
      styles.paddingVertical = sizeConfig.paddingVertical;
      styles.paddingHorizontal = sizeConfig.paddingHorizontal;
      styles.minHeight = sizeConfig.minHeight;
    }
    switch (variant) {
      case 'primary':
        styles.backgroundColor = theme.colors.primary;
        styles.borderRadius = 20;
        break;
      case 'secondary':
        styles.backgroundColor = 'transparent';
        styles.borderWidth = 1;
        styles.borderColor = theme.colors.border;
        styles.borderRadius = 20;
        break;
      case 'inverse':
        styles.backgroundColor = '#FFFFFF';
        styles.borderRadius = 20;
        break;
      case 'icon':
        styles.borderRadius = 100;
        styles.padding = 8;
        styles.width = sizeConfig.minHeight;
        styles.height = sizeConfig.minHeight;
        break;
      case 'ghost':
        styles.backgroundColor = 'transparent';
        styles.borderRadius = 8;
        break;
      case 'text':
        styles.backgroundColor = 'transparent';
        styles.paddingVertical = 4;
        styles.paddingHorizontal = 8;
        break;
    }
    return styles;
  }, [variant, size, theme]);
  const resolvedTextColor = useMemo(() => {
    switch (variant) {
      case 'primary':
        return theme.colors.primaryForeground;
      case 'secondary':
        return theme.colors.text;
      case 'inverse':
        return '#000000';
      case 'ghost':
      case 'text':
        return theme.colors.primary;
      case 'icon':
      default:
        return theme.colors.text;
    }
  }, [variant, theme]);
  const computedTextStyle = useMemo(() => {
    const sizeConfig = SIZE_CONFIG[size];
    return {
      fontSize: sizeConfig.fontSize,
      fontWeight: Platform.OS === 'web' ? 'bold' : '600',
      color: resolvedTextColor
    };
  }, [size, resolvedTextColor]);
  const defaultHitSlop = variant === 'icon' ? ICON_HIT_SLOP : undefined;
  const resolvedActiveOpacity = activeOpacity ?? (variant === 'icon' ? 0.7 : 0.8);
  const resolvedClassName = className ?? (variant === 'icon' ? 'bg-background border border-border' : undefined);
  const content = /*#__PURE__*/_jsxs(_Fragment, {
    children: [iconPosition === 'left' && icon, children != null && /*#__PURE__*/_jsx(Text, {
      style: [computedTextStyle, textStyle],
      children: children
    }), iconPosition === 'right' && icon]
  });
  return /*#__PURE__*/_jsx(Animated.View, {
    style: hasScaleFeedback ? {
      transform: [{
        scale: scaleAnim
      }]
    } : undefined,
    children: /*#__PURE__*/_jsx(Pressable, {
      ...(resolvedClassName ? {
        className: resolvedClassName
      } : {}),
      style: [baseStyles, disabled && !loading && {
        opacity: 0.5
      }, pressed && !hasScaleFeedback && !isInteractionBlocked && {
        opacity: resolvedActiveOpacity
      }, style],
      onPress: isInteractionBlocked ? undefined : onPress,
      onPressIn: handlePressIn,
      onPressOut: handlePressOut,
      disabled: isInteractionBlocked,
      hitSlop: hitSlop ?? defaultHitSlop,
      accessibilityLabel: accessibilityLabel,
      accessibilityHint: accessibilityHint,
      accessibilityRole: "button",
      accessibilityState: loading ? {
        disabled: isInteractionBlocked,
        busy: true
      } : {
        disabled: isInteractionBlocked
      },
      testID: testID,
      children: loading ? /*#__PURE__*/_jsxs(_Fragment, {
        children: [/*#__PURE__*/_jsx(View, {
          style: styles.loadingHiddenContent,
          importantForAccessibility: "no-hide-descendants",
          accessibilityElementsHidden: true,
          children: content
        }), /*#__PURE__*/_jsx(View, {
          style: styles.loadingOverlay,
          children: /*#__PURE__*/_jsx(ActivityIndicator, {
            size: "small",
            color: loadingColor ?? resolvedTextColor
          })
        })]
      }) : content
    })
  });
};
const styles = StyleSheet.create({
  loadingHiddenContent: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    opacity: 0,
    pointerEvents: 'none'
  },
  loadingOverlay: {
    ...StyleSheet.absoluteFill,
    alignItems: 'center',
    justifyContent: 'center',
    pointerEvents: 'none'
  }
});
export const Button = /*#__PURE__*/memo(ButtonComponent);
Button.displayName = 'Button';
export const PrimaryButton = /*#__PURE__*/memo(props => /*#__PURE__*/_jsx(Button, {
  ...props,
  variant: "primary"
}));
PrimaryButton.displayName = 'PrimaryButton';
export const SecondaryButton = /*#__PURE__*/memo(props => /*#__PURE__*/_jsx(Button, {
  ...props,
  variant: "secondary"
}));
SecondaryButton.displayName = 'SecondaryButton';
export const IconButton = /*#__PURE__*/memo(props => /*#__PURE__*/_jsx(Button, {
  ...props,
  variant: "icon"
}));
IconButton.displayName = 'IconButton';
export const GhostButton = /*#__PURE__*/memo(props => /*#__PURE__*/_jsx(Button, {
  ...props,
  variant: "ghost"
}));
GhostButton.displayName = 'GhostButton';
export const InverseButton = /*#__PURE__*/memo(props => /*#__PURE__*/_jsx(Button, {
  ...props,
  variant: "inverse"
}));
InverseButton.displayName = 'InverseButton';
export const TextButton = /*#__PURE__*/memo(props => /*#__PURE__*/_jsx(Button, {
  ...props,
  variant: "text"
}));
TextButton.displayName = 'TextButton';
//# sourceMappingURL=Button.js.map