"use strict";

import { forwardRef } from "react";
import { Pressable, StyleSheet, View } from "react-native";
import Animated from "react-native-reanimated";
import { useIOTheme, useIOThemeContext } from "../../context";
import { IOBannerBigSpacing, IOBannerRadius } from "../../core";
import { hexToRgba, IOColors } from "../../core/IOColors";
import { useScaleAnimation } from "../../hooks";
import { IconButton } from "../buttons";
import { VSpacer } from "../layout";
import { PictogramBleed } from "../pictograms";
import { BodySmall, buttonTextFontSize, H6, IOText } from "../typography";

/* Styles */
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const sizePictogram = 80;
const closeButtonDistanceFromEdge = 10;
const closeButtonOpacity = 0.6;
const bannerPadding = IOBannerBigSpacing;
const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    alignItems: "flex-start",
    alignContent: "center",
    padding: bannerPadding,
    borderRadius: 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 */
export const bannerBackgroundColours = ["neutral", "turquoise"];
const mapBackgroundColorLightMode = {
  neutral: "grey-50",
  turquoise: "turquoise-50"
};
const mapBackgroundColorDarkMode = {
  neutral: "grey-50",
  turquoise: "turquoise-300"
};
export const Banner = /*#__PURE__*/forwardRef(({
  color,
  pictogramName,
  title,
  content,
  action,
  labelClose,
  onPress,
  onClose,
  accessibilityHint,
  accessibilityLabel,
  accessibilityRole = "button",
  testID
}, viewRef) => {
  const {
    onPressIn,
    onPressOut,
    scaleAnimatedStyle
  } = useScaleAnimation("medium");
  const {
    themeType
  } = useIOThemeContext();
  const theme = 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" ? hexToRgba(IOColors[mapBackgroundColorDarkMode[color]], 0.1) : 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__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsxs(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__*/_jsx(H6, {
        color: colorTitle,
        children: title
      }), content && /*#__PURE__*/_jsx(BodySmall, {
        color: theme["textBody-tertiary"],
        weight: "Regular",
        children: content
      }), action &&
      /*#__PURE__*/
      /* Disable pointer events to avoid
       pressed state on the button */
      _jsxs(Pressable, {
        pointerEvents: "none",
        importantForAccessibility: "no-hide-descendants",
        accessible: true,
        accessibilityElementsHidden: true,
        accessibilityLabel: action,
        accessibilityRole: "button",
        onPress: onPress,
        children: [/*#__PURE__*/_jsx(VSpacer, {
          size: 8
        }), /*#__PURE__*/_jsx(IOText, {
          weight: "Semibold",
          color: colorMainButton,
          size: buttonTextFontSize,
          numberOfLines: 1,
          ellipsizeMode: "tail"
          // A11y
          ,
          accessible: false,
          importantForAccessibility: "no-hide-descendants",
          accessibilityElementsHidden: true,
          children: action
        })]
      })]
    }), /*#__PURE__*/_jsx(View, {
      style: [styles.bleedPictogram, {
        alignSelf: "center"
      }],
      children: /*#__PURE__*/_jsx(PictogramBleed, {
        name: pictogramName,
        size: sizePictogram
      })
    }), onClose && labelClose && /*#__PURE__*/_jsx(View, {
      style: styles.closeIconButton,
      children: /*#__PURE__*/_jsx(IconButton, {
        icon: "closeSmall",
        color: colorCloseButton,
        onPress: onClose,
        accessibilityLabel: labelClose
      })
    })]
  });
  const PressableButton = () => /*#__PURE__*/_jsx(Pressable, {
    ref: viewRef,
    testID: testID,
    onPress: onPress,
    onPressIn: onPressIn,
    onPressOut: onPressOut,
    accessible: false,
    children: /*#__PURE__*/_jsx(Animated.View, {
      style: [styles.container, dynamicContainerStyles, scaleAnimatedStyle],
      children: renderMainBlock()
    })
  });
  const StaticComponent = () => /*#__PURE__*/_jsx(View, {
    ref: viewRef,
    testID: testID,
    style: [styles.container, dynamicContainerStyles]
    // A11y related props
    ,
    accessible: false,
    children: renderMainBlock()
  });
  return action ? /*#__PURE__*/_jsx(PressableButton, {}) : /*#__PURE__*/_jsx(StaticComponent, {});
});
//# sourceMappingURL=Banner.js.map