"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.IOButton = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _reactNativeHapticFeedback = _interopRequireDefault(require("react-native-haptic-feedback"));
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
var _core = require("../../../core");
var _hooks = require("../../../hooks");
var _icons = require("../../icons");
var _loadingSpinner = require("../../loadingSpinner");
var _typography = require("../../typography");
var _ButtonText = require("../../typography/ButtonText");
var _styles = require("./styles");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const IOButton = exports.IOButton = /*#__PURE__*/(0, _react.forwardRef)(({
  variant = "solid",
  color = "primary",
  label,
  fullWidth = false,
  disabled = false,
  loading = false,
  numberOfLines = 1,
  textAlign = "auto",
  icon,
  iconPosition = "start",
  onPress,
  accessibilityLabel,
  accessibilityHint,
  accessibilityRole = "button",
  testID
}, ref) => {
  const mapColorStates = (0, _styles.useButtonColorMap)(variant);
  const {
    progress,
    onPressIn,
    onPressOut,
    scaleAnimatedStyle
  } = (0, _hooks.useScaleAnimation)();
  const {
    buttonAnimatedStyle,
    labelAnimatedStyle,
    iconColorAnimatedStyle
  } = (0, _styles.useButtonAnimatedStyles)(variant, color, progress);
  const reducedMotion = (0, _reactNativeReanimated.useReducedMotion)();
  const isLinkButton = variant === "link";

  // ---------------------------------------
  // VISUAL ATTRIBUTES
  // ---------------------------------------
  const btnIconSizeMap = {
    solid: 20,
    outline: 20,
    link: 24
  };
  const btnBorderWidthMap = {
    solid: 0,
    outline: 2,
    link: 0
  };
  const btnPaddingHorizontalMap = {
    default: 24,
    fullWidth: 16,
    link: 0
  };
  const btnLinkHitSlop = {
    top: 14,
    right: 24,
    bottom: 14,
    left: 24
  };
  const btnIconSize = btnIconSizeMap[variant];
  const btnBorderWidth = btnBorderWidthMap[variant];
  const btnBorderRadius = 8;
  const btnSizeDefault = 48;
  const ICON_MARGIN = 8;
  const DISABLED_OPACITY = 0.5;

  // Background color
  const backgroundColor = disabled ? mapColorStates[color].background.disabled : mapColorStates[color].background.default;

  // Label & Icons colors
  const foregroundColor = disabled ? mapColorStates[color]?.foreground?.disabled : mapColorStates[color]?.foreground?.default;

  // ---------------------------------------
  // BUTTON INNER LOGIC
  // ---------------------------------------

  /* Prevent the component from triggering the `isEntering' transition
       on the on the first render. Solution from this discussion:
       https://github.com/software-mansion/react-native-reanimated/discussions/2513
    */
  const isMounted = (0, _react.useRef)(false);
  (0, _react.useEffect)(() => {
    // eslint-disable-next-line functional/immutable-data
    isMounted.current = true;
  }, []);
  const handleOnPress = (0, _react.useCallback)(event => {
    /* Don't call `onPress` if the button is
      in loading state */
    if (loading) {
      return;
    }
    _reactNativeHapticFeedback.default.trigger("impactLight");
    onPress(event);
  }, [loading, onPress]);

  // ---------------------------------------
  // BUTTON INNER CONTENT
  // ---------------------------------------
  const renderButtonContent = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.LayoutAnimationConfig, {
      skipExiting: true,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
        style: styles.buttonInner,
        entering: isMounted.current ? _core.enterTransitionInnerContentSmall : undefined,
        exiting: _core.exitTransitionInnerContent,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_loadingSpinner.LoadingSpinner, {
          color: foregroundColor
        })
      })
    }), !loading && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
      style: [styles.buttonInner, {
        columnGap: ICON_MARGIN
      }, iconPosition === "end" && {
        flexDirection: "row-reverse"
      }],
      entering: isMounted.current ? _core.enterTransitionInnerContent : undefined,
      children: [icon && (!disabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.AnimatedIconWithColorTransition, {
        allowFontScaling: true,
        name: icon,
        animatedProps: iconColorAnimatedStyle,
        size: btnIconSize
      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.AnimatedIcon, {
        allowFontScaling: true,
        name: icon,
        color: mapColorStates[color]?.foreground?.disabled,
        size: btnIconSize
      })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.AnimatedIOText, {
        weight: "Semibold",
        size: _ButtonText.buttonTextFontSize,
        lineHeight: isLinkButton ? _ButtonText.buttonTextLineHeight : undefined,
        accessible: false,
        accessibilityElementsHidden: true,
        importantForAccessibility: "no-hide-descendants",
        numberOfLines: numberOfLines,
        ellipsizeMode: "tail",
        style: [{
          textAlign
        }, disabled ? {
          color: mapColorStates[color]?.foreground?.disabled
        } : {
          color: mapColorStates[color]?.foreground?.default
        }, !disabled && labelAnimatedStyle],
        children: label
      })]
    })]
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
    ref: ref,
    accessible: true
    // Using || operator because empty string is not an accepted value
    ,
    accessibilityLabel: accessibilityLabel || label,
    accessibilityHint: accessibilityHint,
    accessibilityRole: accessibilityRole,
    accessibilityState: {
      busy: loading,
      disabled: disabled || false
    },
    onPress: handleOnPress,
    onPressIn: onPressIn,
    onPressOut: onPressOut,
    disabled: disabled,
    hitSlop: isLinkButton ? btnLinkHitSlop : undefined,
    style: isLinkButton ? {
      alignSelf: "flex-start"
    } : fullWidth ? {
      flexShrink: 0,
      alignSelf: "stretch"
    } : {
      flexShrink: 1,
      alignSelf: "auto"
    },
    testID: testID,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
      style: [styles.button,
      /* Prevent Reanimated from overriding background colors
          if button is disabled */
      !disabled && !reducedMotion && scaleAnimatedStyle, !disabled && buttonAnimatedStyle, {
        paddingHorizontal: isLinkButton ? btnPaddingHorizontalMap.link : fullWidth ? btnPaddingHorizontalMap.fullWidth : btnPaddingHorizontalMap.default
      }, {
        height: isLinkButton ? undefined : btnSizeDefault,
        backgroundColor,
        borderWidth: btnBorderWidth,
        borderRadius: btnBorderRadius,
        borderColor: foregroundColor
      }, disabled ? {
        opacity: DISABLED_OPACITY
      } : {}],
      children: renderButtonContent()
    })
  });
});
const styles = _reactNative.StyleSheet.create({
  button: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    textAlignVertical: "center",
    // Prop supported on Android only
    borderCurve: "continuous",
    overflow: "hidden",
    elevation: 0
  },
  buttonInner: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center"
  }
});
//# sourceMappingURL=IOButton.js.map