"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Alert = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _reactNativeReanimated = _interopRequireDefault(require("react-native-reanimated"));
var _context = require("../../context");
var _core = require("../../core");
var _IOColors = require("../../core/IOColors");
var _IOShapes = require("../../core/IOShapes");
var _IOSpacing = require("../../core/IOSpacing");
var _hooks = require("../../hooks");
var _accessibility = require("../../utils/accessibility");
var _icons = require("../icons");
var _layout = require("../layout");
var _typography = require("../typography");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const ICON_SIZE = 24;
const [padding, paddingFullWidth] = _IOSpacing.IOAlertSpacing;
// COMPONENT CONFIGURATION

const mapVariantStatesLightMode = {
  error: {
    icon: "errorFilled",
    background: _IOColors.IOColors["error-100"],
    foreground: "error-850"
  },
  warning: {
    icon: "warningFilled",
    background: _IOColors.IOColors["warning-100"],
    foreground: "warning-850"
  },
  info: {
    icon: "infoFilled",
    background: _IOColors.IOColors["info-100"],
    foreground: "info-850"
  },
  success: {
    icon: "success",
    background: _IOColors.IOColors["success-100"],
    foreground: "success-850"
  }
};
const bgOpacityDarkMode = 0.2;
const mapVariantStatesDarkMode = {
  error: {
    icon: "errorFilled",
    background: (0, _IOColors.hexToRgba)(_IOColors.IOColors["error-400"], bgOpacityDarkMode),
    foreground: "error-100"
  },
  warning: {
    icon: "warningFilled",
    background: (0, _IOColors.hexToRgba)(_IOColors.IOColors["warning-400"], bgOpacityDarkMode),
    foreground: "warning-100"
  },
  info: {
    icon: "infoFilled",
    background: (0, _IOColors.hexToRgba)(_IOColors.IOColors["info-400"], bgOpacityDarkMode),
    foreground: "info-100"
  },
  success: {
    icon: "success",
    background: (0, _IOColors.hexToRgba)(_IOColors.IOColors["success-400"], bgOpacityDarkMode),
    foreground: "success-100"
  }
};
const Alert = exports.Alert = /*#__PURE__*/(0, _react.forwardRef)(({
  variant,
  content,
  action,
  onPress,
  fullWidth = false,
  accessibilityHint,
  testID
}, viewRef) => {
  const {
    onPressIn,
    onPressOut,
    scaleAnimatedStyle
  } = (0, _hooks.useScaleAnimation)("medium");
  const {
    dynamicFontScale,
    spacingScaleMultiplier
  } = (0, _accessibility.useIOFontDynamicScale)();
  const {
    themeType
  } = (0, _context.useIOThemeContext)();
  const paddingDefaultVariant = {
    padding,
    borderRadius: _IOShapes.IOAlertRadius * dynamicFontScale * spacingScaleMultiplier,
    borderCurve: "continuous"
  };
  const mapVariantStates = themeType === "light" ? mapVariantStatesLightMode : mapVariantStatesDarkMode;
  const renderMainBlock = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_layout.HStack, {
    space: _core.IOVisualCostants.iconMargin,
    allowScaleSpacing: true,
    style: {
      alignItems: "center"
    },
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
      allowFontScaling: true,
      name: mapVariantStates[variant].icon,
      size: ICON_SIZE,
      color: mapVariantStates[variant].foreground
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: {
        marginTop: -4 * dynamicFontScale,
        marginBottom: -4 * dynamicFontScale,
        flex: 1
      },
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_layout.VStack, {
        space: 8,
        allowScaleSpacing: true,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.Body, {
          color: mapVariantStates[variant].foreground,
          weight: "Regular",
          accessibilityRole: "text",
          children: content
        }), action && /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.ButtonText, {
          color: mapVariantStates[variant].foreground,
          numberOfLines: 1,
          ellipsizeMode: "tail",
          children: action
        })]
      })
    })]
  });
  const StaticComponent = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
    ref: viewRef,
    style: [fullWidth ? {
      padding
    } : paddingDefaultVariant, {
      backgroundColor: mapVariantStates[variant].background
    }],
    testID: testID,
    accessible: false,
    accessibilityRole: "alert",
    accessibilityHint: accessibilityHint,
    children: renderMainBlock()
  });
  const PressableButton = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
    ref: viewRef,
    testID: testID,
    onPress: onPress,
    onPressIn: onPressIn,
    onPressOut: onPressOut,
    onTouchEnd: onPressOut
    // A11y related props
    ,
    accessible: true,
    accessibilityHint: accessibilityHint,
    accessibilityRole: "button",
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
      style: [fullWidth ? {
        padding: paddingFullWidth
      } : paddingDefaultVariant, {
        backgroundColor: mapVariantStates[variant].background
      },
      // Disable pressed animation when component is full width
      !fullWidth && scaleAnimatedStyle],
      children: renderMainBlock()
    })
  });
  return action ? /*#__PURE__*/(0, _jsxRuntime.jsx)(PressableButton, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(StaticComponent, {});
});
//# sourceMappingURL=Alert.js.map