"use strict";

import { forwardRef, useCallback, useMemo } from "react";
import { Pressable, StyleSheet } from "react-native";
import ReactNativeHapticFeedback from "react-native-haptic-feedback";
import Animated, { interpolateColor, useAnimatedStyle, useDerivedValue, useReducedMotion, withSpring } from "react-native-reanimated";
import { useIOTheme } from "../../context";
import { IOColors, IOSpringValues, hexToRgba } from "../../core";
import { useScaleAnimation } from "../../hooks";
import { Icon } from "../icons";
import { IOText } from "../typography";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const DISABLED_OPACITY = 0.5;
const TabItem = /*#__PURE__*/forwardRef(({
  label,
  color = "light",
  selected = false,
  accessibilityLabel,
  accessibilityHint,
  testID,
  onPress,
  disabled = false,
  icon,
  iconSelected
}, ref) => {
  const {
    onPressIn,
    onPressOut,
    scaleAnimatedStyle
  } = useScaleAnimation("medium");
  const theme = useIOTheme();
  const reducedMotion = useReducedMotion();
  const mapColorStates = useMemo(() => ({
    light: {
      border: {
        default: IOColors[theme["tab-item-border-default"]],
        selected: hexToRgba(IOColors[theme["tab-item-foreground-selected"]], 0.5)
      },
      background: {
        default: hexToRgba(IOColors[theme["tab-item-background-selected"]], 0),
        selected: hexToRgba(IOColors[theme["tab-item-background-selected"]], 0.25),
        pressed: IOColors[theme["appBackground-primary"]]
      },
      foreground: {
        default: theme["tab-item-foreground-default"],
        selected: theme["tab-item-foreground-selected"],
        disabled: "grey-700"
      }
    },
    dark: {
      border: {
        default: hexToRgba(IOColors.white, 0),
        selected: IOColors.white
      },
      background: {
        default: hexToRgba(IOColors.white, 0.1),
        selected: IOColors.white,
        pressed: IOColors.white
      },
      foreground: {
        default: "white",
        selected: "black",
        disabled: "white"
      }
    }
  }), [theme]);
  const itemState = selected ? "selected" : disabled ? "disabled" : "default";
  const foregroundColor = mapColorStates[color].foreground[itemState];
  const selectedStateTransition = useDerivedValue(() => withSpring(selected ? 1 : 0, IOSpringValues.selection));

  // Interpolate animation values from `pressed` values
  const animatedStyle = useAnimatedStyle(() => ({
    backgroundColor: interpolateColor(selectedStateTransition.value, [0, 1], [mapColorStates[color].background.default, mapColorStates[color].background.selected]),
    borderColor: interpolateColor(selectedStateTransition.value, [0, 1], [mapColorStates[color].border.default, mapColorStates[color].border.selected])
  }));
  const activeIcon = selected ? iconSelected ?? icon : icon;
  const handleOnPress = useCallback(event => {
    if (onPress) {
      ReactNativeHapticFeedback.trigger("impactLight");
      onPress(event);
    }
  }, [onPress]);
  return /*#__PURE__*/_jsx(Pressable, {
    ref: ref,
    accessibilityLabel: accessibilityLabel,
    accessibilityHint: accessibilityHint,
    accessibilityRole: "tab",
    accessibilityState: {
      checked: !!selected
    },
    testID: testID,
    onPress: handleOnPress,
    onPressIn: onPressIn,
    onPressOut: onPressOut,
    accessible: true,
    disabled: disabled,
    children: /*#__PURE__*/_jsxs(Animated.View, {
      style: [styles.container, {
        columnGap: 4
      }, !disabled && !reducedMotion && scaleAnimatedStyle, animatedStyle, disabled && {
        opacity: DISABLED_OPACITY
      }],
      children: [activeIcon && /*#__PURE__*/_jsx(Icon, {
        name: activeIcon,
        color: foregroundColor,
        size: 16
      }), /*#__PURE__*/_jsx(IOText, {
        size: 14,
        weight: "Semibold",
        color: foregroundColor,
        children: label
      })]
    })
  });
});
const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: 16,
    paddingVertical: 8,
    borderWidth: 1,
    borderRadius: 64,
    borderCurve: "continuous",
    justifyContent: "center",
    alignSelf: "flex-start"
  }
});
export { TabItem };
//# sourceMappingURL=TabItem.js.map