"use strict";

import { Pressable, StyleSheet, View } from "react-native";
import Animated, { FadeIn, FadeOut } 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 { Icon } from "../icons";
import { VSpacer } from "../layout";
import { Body } from "../typography";
import { IOButton } from "../buttons";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    alignItems: "center",
    alignContent: "center",
    borderRadius: IOBannerRadius,
    borderCurve: "continuous",
    padding: IOBannerBigSpacing
  }
});

/* Component Types */

/**
 ** TODO: Move it to the `io-app-design-system` package
 */
export const BannerErrorState = ({
  viewRef,
  icon = "warningFilled",
  label,
  actionText,
  onPress,
  accessibilityHint,
  accessibilityLabel,
  testID
}) => {
  const {
    onPressIn,
    onPressOut,
    scaleAnimatedStyle
  } = useScaleAnimation("medium");
  const theme = useIOTheme();
  const {
    themeType
  } = useIOThemeContext();

  /* Styles */
  const foregroundColor = theme["textBody-tertiary"];
  const backgroundColor = "grey-50";
  const dynamicContainerStyles = {
    backgroundColor: themeType === "dark" ? hexToRgba(IOColors[backgroundColor], 0.1) : IOColors[backgroundColor]
  };
  const renderMainBlock = () => /*#__PURE__*/_jsxs(View, {
    style: {
      flex: 1,
      alignItems: "center",
      gap: 8
    },
    accessible: true
    // A11y related props
    ,
    accessibilityLabel: accessibilityLabel,
    accessibilityHint: accessibilityHint,
    accessibilityRole: actionText !== undefined ? "button" : undefined,
    children: [icon && /*#__PURE__*/_jsx(Icon, {
      name: icon,
      size: 24,
      color: foregroundColor
    }), label && /*#__PURE__*/_jsx(Body, {
      color: foregroundColor,
      style: {
        textAlign: "center"
      },
      children: label
    }), actionText &&
    /*#__PURE__*/
    /* Disable pointer events to avoid
        pressed state on the button */
    _jsxs(View, {
      pointerEvents: "none",
      accessibilityElementsHidden: true,
      importantForAccessibility: "no-hide-descendants",
      children: [/*#__PURE__*/_jsx(VSpacer, {
        size: 4
      }), /*#__PURE__*/_jsx(IOButton, {
        variant: "link",
        color: "primary",
        onPress: onPress,
        label: actionText
      })]
    })]
  });
  const PressableContent = () => /*#__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,
    accessibilityHint: accessibilityHint,
    accessibilityLabel: accessibilityLabel,
    accessibilityRole: "text",
    children: renderMainBlock()
  });
  return /*#__PURE__*/_jsx(Animated.View, {
    entering: FadeIn.duration(150),
    exiting: FadeOut.duration(150),
    children: actionText ? /*#__PURE__*/_jsx(PressableContent, {}) : /*#__PURE__*/_jsx(StaticComponent, {})
  });
};
//# sourceMappingURL=BannerErrorState.js.map