"use strict";

import { createRef, useEffect, useLayoutEffect, useMemo, useState } from "react";
import { AccessibilityInfo, Platform, StyleSheet, View, findNodeHandle } from "react-native";
import Animated, { interpolate, interpolateColor, useAnimatedReaction, useAnimatedStyle, useDerivedValue, useScrollOffset, useSharedValue, withSpring, withTiming } from "react-native-reanimated";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { scheduleOnRN } from "react-native-worklets";
import { useIOTheme } from "../../context";
import { IOColors, IOSpringValues, IOThemeDark, IOThemeLight, IOVisualCostants, alertEdgeToEdgeInsetTransitionConfig, hexToRgba, iconBtnSizeSmall } from "../../core";
import { IconButton } from "../buttons/IconButton";
import { HSpacer, HStack } from "../layout";
import { IOText } from "../typography";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const titleHorizontalMargin = 16;
const styles = StyleSheet.create({
  headerInner: {
    paddingHorizontal: IOVisualCostants.appMarginDefault,
    height: 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
 */
export 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 = useScrollOffset(animatedRef || animatedRef);
  const titleRef = /*#__PURE__*/createRef();
  const theme = useIOTheme();
  const insets = useSafeAreaInsets();
  const isTitleAccessible = useMemo(() => !!title.trim(), [title]);
  const paddingTop = useSharedValue(ignoreSafeAreaMargin ? 0 : insets.top);
  const AnimatedIOText = Animated.createAnimatedComponent(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" ? IOColors[IOThemeDark["textHeading-default"]] : IOColors[IOThemeLight["textHeading-default"]];
  const titleColor = variant ? titleColorVariant : IOColors[theme["textHeading-default"]];

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

  // Updates accessibility state based on scroll position.
  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";
      scheduleOnRN(setImportantForAccessibility, newValue);
    }
  }, [scrollValues, enableDiscreteTransition]);
  return /*#__PURE__*/_jsx(Animated.View, {
    accessibilityRole: "header",
    style: [{
      borderBottomWidth: 1,
      borderColor: borderColorTransparentState
    }, ignoreSafeAreaMargin ? {
      borderColor: borderColorSolidState
    } : {}, headerWrapperAnimatedStyle],
    children: /*#__PURE__*/_jsxs(Animated.View, {
      testID: testID,
      style: [animatedPaddingStyle, styles.headerInner],
      children: [goBack ? /*#__PURE__*/_jsx(IconButton, {
        icon: 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__*/_jsx(HSpacer, {
        size: 32
      }), /*#__PURE__*/_jsx(View, {
        ref: titleRef,
        accessibilityElementsHidden: !isTitleAccessible,
        importantForAccessibility: importantForAccessibility,
        accessible: isTitleAccessible,
        accessibilityLabel: title,
        accessibilityRole: "header",
        style: styles.titleContainer,
        children: /*#__PURE__*/_jsx(AnimatedIOText, {
          size: 14,
          numberOfLines: 1,
          accessible: false,
          weight: "Semibold",
          style: [{
            color: titleColor,
            textAlign: "center"
          }, titleAnimatedStyle],
          children: title
        })
      }), /*#__PURE__*/_jsxs(HStack, {
        allowScaleSpacing: true,
        space: 16,
        style: {
          flexShrink: 0
        },
        children: [type === "threeActions" && /*#__PURE__*/_jsx(IconButton, {
          ...thirdAction,
          color: defaultIconColor,
          persistentColorMode: !!variant
        }), (type === "twoActions" || type === "threeActions") && /*#__PURE__*/_jsx(IconButton, {
          ...secondAction,
          color: defaultIconColor,
          persistentColorMode: !!variant
        }), type !== "base" ? /*#__PURE__*/_jsx(IconButton, {
          ...firstAction,
          color: defaultIconColor,
          persistentColorMode: !!variant
        }) : /*#__PURE__*/_jsx(HSpacer, {
          size: iconBtnSizeSmall
        })]
      })]
    })
  });
};
//# sourceMappingURL=HeaderSecondLevel.js.map