"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.bannerBackgroundColours = exports.Banner = 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 _hooks = require("../../hooks");
var _buttons = require("../buttons");
var _layout = require("../layout");
var _pictograms = require("../pictograms");
var _typography = require("../typography");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/* Styles */const sizePictogram = 80;
const closeButtonDistanceFromEdge = 10;
const closeButtonOpacity = 0.6;
const bannerPadding = _core.IOBannerBigSpacing;
const styles = _reactNative.StyleSheet.create({
  container: {
    flexDirection: "row",
    alignItems: "flex-start",
    alignContent: "center",
    padding: bannerPadding,
    borderRadius: _core.IOBannerRadius,
    borderCurve: "continuous"
  },
  bleedPictogram: {
    marginRight: -bannerPadding
  },
  closeIconButton: {
    position: "absolute",
    right: closeButtonDistanceFromEdge,
    top: closeButtonDistanceFromEdge,
    opacity: closeButtonOpacity
  }
});

/* Component Types */

/* Description only */

/* Title only */

/* Title + Description */

// Banner will display a close button if this event is provided

// COMPONENT CONFIGURATION

/* Used to generate automatically the colour variants
in the Design System screen */
const bannerBackgroundColours = exports.bannerBackgroundColours = ["neutral", "turquoise"];
const mapBackgroundColorLightMode = {
  neutral: "grey-50",
  turquoise: "turquoise-50"
};
const mapBackgroundColorDarkMode = {
  neutral: "grey-50",
  turquoise: "turquoise-300"
};
const Banner = exports.Banner = /*#__PURE__*/(0, _react.forwardRef)(({
  color,
  pictogramName,
  title,
  content,
  action,
  labelClose,
  onPress,
  onClose,
  accessibilityHint,
  accessibilityLabel,
  accessibilityRole = "button",
  testID
}, viewRef) => {
  const {
    onPressIn,
    onPressOut,
    scaleAnimatedStyle
  } = (0, _hooks.useScaleAnimation)("medium");
  const {
    themeType
  } = (0, _context.useIOThemeContext)();
  const theme = (0, _context.useIOTheme)();

  // Dynamic colors
  const colorTitle = themeType === "dark" ? "grey-50" : "blueIO-850";
  const colorCloseButton = themeType === "dark" ? "contrast" : "neutral";
  const colorMainButton = themeType === "dark" ? "blueIO-200" : theme["interactiveElem-default"];
  const dynamicContainerStyles = {
    backgroundColor: themeType === "dark" ? (0, _IOColors.hexToRgba)(_IOColors.IOColors[mapBackgroundColorDarkMode[color]], 0.1) : _IOColors.IOColors[mapBackgroundColorLightMode[color]]
  };

  /* Generates a complete fallbackAccessibilityLabel by concatenating the title, content, and action
  if they are present. */
  const fallbackAccessibilityLabel = [title, content, action].filter(Boolean).join(" ");
  const renderMainBlock = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
      style: {
        flex: 1,
        alignSelf: "center",
        gap: 4
      },
      accessible: true
      // A11y related props
      ,
      accessibilityLabel: accessibilityLabel ?? fallbackAccessibilityLabel,
      accessibilityHint: accessibilityHint,
      accessibilityRole: action !== undefined ? accessibilityRole : "text",
      children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.H6, {
        color: colorTitle,
        children: title
      }), content && /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.BodySmall, {
        color: theme["textBody-tertiary"],
        weight: "Regular",
        children: content
      }), action &&
      /*#__PURE__*/
      /* Disable pointer events to avoid
       pressed state on the button */
      (0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
        pointerEvents: "none",
        importantForAccessibility: "no-hide-descendants",
        accessible: true,
        accessibilityElementsHidden: true,
        accessibilityLabel: action,
        accessibilityRole: "button",
        onPress: onPress,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_layout.VSpacer, {
          size: 8
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.IOText, {
          weight: "Semibold",
          color: colorMainButton,
          size: _typography.buttonTextFontSize,
          numberOfLines: 1,
          ellipsizeMode: "tail"
          // A11y
          ,
          accessible: false,
          importantForAccessibility: "no-hide-descendants",
          accessibilityElementsHidden: true,
          children: action
        })]
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: [styles.bleedPictogram, {
        alignSelf: "center"
      }],
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_pictograms.PictogramBleed, {
        name: pictogramName,
        size: sizePictogram
      })
    }), onClose && labelClose && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: styles.closeIconButton,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_buttons.IconButton, {
        icon: "closeSmall",
        color: colorCloseButton,
        onPress: onClose,
        accessibilityLabel: labelClose
      })
    })]
  });
  const PressableButton = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
    ref: viewRef,
    testID: testID,
    onPress: onPress,
    onPressIn: onPressIn,
    onPressOut: onPressOut,
    accessible: false,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
      style: [styles.container, dynamicContainerStyles, scaleAnimatedStyle],
      children: renderMainBlock()
    })
  });
  const StaticComponent = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
    ref: viewRef,
    testID: testID,
    style: [styles.container, dynamicContainerStyles]
    // A11y related props
    ,
    accessible: false,
    children: renderMainBlock()
  });
  return action ? /*#__PURE__*/(0, _jsxRuntime.jsx)(PressableButton, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(StaticComponent, {});
});
//# sourceMappingURL=Banner.js.map