"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.HeaderSecondLevel = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
var _reactNativeWorklets = require("react-native-worklets");
var _context = require("../../context");
var _core = require("../../core");
var _IconButton = require("../buttons/IconButton");
var _layout = require("../layout");
var _typography = require("../typography");
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); }
const titleHorizontalMargin = 16;
const styles = _reactNative.StyleSheet.create({
  headerInner: {
    paddingHorizontal: _core.IOVisualCostants.appMarginDefault,
    height: _core.IOVisualCostants.headerHeight,
    flexGrow: 1,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between"
  },
  titleContainer: {
    flexGrow: 1,
    flexShrink: 1,
    marginHorizontal: titleHorizontalMargin
  }
});

/**
 * HeaderSecondLevel component is used to display the header on pages on the second level of navigation.
 * @param {HeaderSecondLevel} props - The props of the component
 * @returns React Element
 */
const HeaderSecondLevel = ({
  scrollValues = undefined,
  goBack,
  backAccessibilityLabel,
  backTestID,
  title,
  type,
  variant,
  backgroundColor,
  transparent = false,
  ignoreSafeAreaMargin = false,
  enableDiscreteTransition = false,
  animatedRef,
  testID,
  firstAction,
  secondAction,
  thirdAction,
  ignoreAccessibilityCheck = false
}) => {
  const scrollOffset = (0, _reactNativeReanimated.useScrollOffset)(animatedRef || animatedRef);
  const titleRef = /*#__PURE__*/(0, _react.createRef)();
  const theme = (0, _context.useIOTheme)();
  const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
  const isTitleAccessible = (0, _react.useMemo)(() => !!title.trim(), [title]);
  const paddingTop = (0, _reactNativeReanimated.useSharedValue)(ignoreSafeAreaMargin ? 0 : insets.top);
  const AnimatedIOText = _reactNativeReanimated.default.createAnimatedComponent(_typography.IOText);

  // If the variant is not set, set a fallback color
  const defaultIconColor = variant ?? "neutral";

  /* We apply the same logic of `persistentColorMode`
  to the title color: if variant is set, the color will
  be persistent, otherwise it will vary depending
  on the color scheme. */
  const titleColorVariant = variant === "contrast" ? _core.IOColors[_core.IOThemeDark["textHeading-default"]] : _core.IOColors[_core.IOThemeLight["textHeading-default"]];
  const titleColor = variant ? titleColorVariant : _core.IOColors[theme["textHeading-default"]];

  /* Visual attributes when there are transitions between states */
  const HEADER_DEFAULT_BG_COLOR = theme["appBackground-primary"];
  const headerBgColorSolidState = backgroundColor ?? _core.IOColors[HEADER_DEFAULT_BG_COLOR];
  const headerBgColorTransparentState = transparent ? (0, _core.hexToRgba)(headerBgColorSolidState, 0) : headerBgColorSolidState;
  const borderColorDefault = _core.IOColors[theme["divider-default"]];
  const borderColorSolidState = backgroundColor ?? borderColorDefault;
  const borderColorTransparentState = (0, _core.hexToRgba)(borderColorSolidState, 0);
  (0, _react.useLayoutEffect)(() => {
    if (isTitleAccessible) {
      const reactNode = (0, _reactNative.findNodeHandle)(titleRef.current);
      if (reactNode !== null) {
        _reactNative.AccessibilityInfo.setAccessibilityFocus(reactNode);
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  const bgColorDiscreteTransition = (0, _reactNativeReanimated.useDerivedValue)(() => (0, _reactNativeReanimated.withSpring)(scrollOffset.value > 0 ? 1 : 0, _core.IOSpringValues.header));
  (0, _react.useEffect)(() => {
    // eslint-disable-next-line functional/immutable-data
    paddingTop.value = (0, _reactNativeReanimated.withTiming)(ignoreSafeAreaMargin ? 0 : insets.top, _core.alertEdgeToEdgeInsetTransitionConfig);
  }, [ignoreSafeAreaMargin, insets.top, paddingTop]);
  const animatedPaddingStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
    marginTop: paddingTop.value
  }));
  const headerWrapperAnimatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
    backgroundColor: enableDiscreteTransition ? (0, _reactNativeReanimated.interpolateColor)(bgColorDiscreteTransition.value, [0, 1], [headerBgColorTransparentState, headerBgColorSolidState]) : scrollValues ? (0, _reactNativeReanimated.interpolateColor)(scrollValues.contentOffsetY.value, [0, scrollValues.triggerOffset], [headerBgColorTransparentState, headerBgColorSolidState]) : headerBgColorSolidState,
    borderColor: enableDiscreteTransition ? (0, _reactNativeReanimated.interpolateColor)(bgColorDiscreteTransition.value, [0, 1], [borderColorTransparentState, borderColorSolidState]) : scrollValues ? (0, _reactNativeReanimated.interpolateColor)(scrollValues.contentOffsetY.value, [0, scrollValues.triggerOffset], [borderColorTransparentState, borderColorSolidState]) : "transparent"
  }));
  const titleAnimatedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
    opacity: enableDiscreteTransition ? (0, _reactNativeReanimated.interpolate)(bgColorDiscreteTransition.value, [0, 1], [0, 1]) : scrollValues ? (0, _reactNativeReanimated.interpolate)(scrollValues.contentOffsetY.value, [0, scrollValues.triggerOffset], [0, 1]) : 1
  }));
  const [importantForAccessibility, setImportantForAccessibility] = (0, _react.useState)("yes");

  // Updates accessibility state based on scroll position.
  (0, _reactNativeReanimated.useAnimatedReaction)(() => enableDiscreteTransition ? scrollOffset.value : scrollValues?.contentOffsetY.value, (currentOffset, previousOffset) => {
    if (currentOffset !== previousOffset) {
      const offsetToCompare = enableDiscreteTransition ? 0 : scrollValues?.triggerOffset ?? 0;
      // Sets accessibility to "yes" when scrolled past the threshold, else hides it from screen readers.
      const newValue = (currentOffset ?? 0) > offsetToCompare && !ignoreAccessibilityCheck ? "yes" : "no-hide-descendants";
      (0, _reactNativeWorklets.scheduleOnRN)(setImportantForAccessibility, newValue);
    }
  }, [scrollValues, enableDiscreteTransition]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
    accessibilityRole: "header",
    style: [{
      borderBottomWidth: 1,
      borderColor: borderColorTransparentState
    }, ignoreSafeAreaMargin ? {
      borderColor: borderColorSolidState
    } : {}, headerWrapperAnimatedStyle],
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
      testID: testID,
      style: [animatedPaddingStyle, styles.headerInner],
      children: [goBack ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.IconButton, {
        icon: _reactNative.Platform.select({
          android: "backAndroid",
          default: "backiOS"
        }),
        color: defaultIconColor
        /* If we specify a variant, we probably want to
          make it persistent in both light and dark modes. */,
        persistentColorMode: !!variant,
        onPress: goBack,
        accessibilityLabel: backAccessibilityLabel,
        testID: backTestID
      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_layout.HSpacer, {
        size: 32
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
        ref: titleRef,
        accessibilityElementsHidden: !isTitleAccessible,
        importantForAccessibility: importantForAccessibility,
        accessible: isTitleAccessible,
        accessibilityLabel: title,
        accessibilityRole: "header",
        style: styles.titleContainer,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedIOText, {
          size: 14,
          numberOfLines: 1,
          accessible: false,
          weight: "Semibold",
          style: [{
            color: titleColor,
            textAlign: "center"
          }, titleAnimatedStyle],
          children: title
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_layout.HStack, {
        allowScaleSpacing: true,
        space: 16,
        style: {
          flexShrink: 0
        },
        children: [type === "threeActions" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.IconButton, {
          ...thirdAction,
          color: defaultIconColor,
          persistentColorMode: !!variant
        }), (type === "twoActions" || type === "threeActions") && /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.IconButton, {
          ...secondAction,
          color: defaultIconColor,
          persistentColorMode: !!variant
        }), type !== "base" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.IconButton, {
          ...firstAction,
          color: defaultIconColor,
          persistentColorMode: !!variant
        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_layout.HSpacer, {
          size: _core.iconBtnSizeSmall
        })]
      })]
    })
  });
};
exports.HeaderSecondLevel = HeaderSecondLevel;
//# sourceMappingURL=HeaderSecondLevel.js.map