// Metro module 8738 (f8739).
import { useRef, useState, useCallback, useMemo, useEffect } from "react";
import { Pressable, View } from "react-native";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import useTheme from "../../../hooks/useTheme";
import { intl, t } from "../../../intl/index.native";
import { useTooltip } from "../../../design/components/Tooltip/native/useTooltip.native";
import * as _shared from "../../../design/shared";
import { NitroWheelIcon } from "../../../design/components/Icon/native/redesign/generated/NitroWheelIcon";
import { Text } from "../../../design/components/Text/native/Text";
import { useIsProfileFramesEarlyAccessPhase } from "../hooks/useCanPurchaseFrames";
import { LayerScope } from "../../../design/components/Layers/native/LayerScope.native";
let StaticBadge;
const hitSlop = {
  top: 14,
  bottom: 14,
  left: 14,
  right: 14
};
const useStyles = createStyles({
  pillBase: {
    flexDirection: "row",
    alignItems: "center",
    borderRadius: Module712.radii.round,
    paddingVertical: 2,
    paddingHorizontal: Module712.space.PX_8
  },
  pillDark: {
    backgroundColor: Module712.colors.CONTROL_OVERLAY_PRIMARY_BACKGROUND_DEFAULT
  },
  pillLight: {
    backgroundColor: Module712.colors.BADGE_BACKGROUND_BRAND
  },
  text: {
    marginLeft: Module712.space.PX_8,
    textTransform: "uppercase"
  }
});
const BadgeWithTooltip = (props) => {
  const tooltipPosition = props.tooltipPosition;
  const theme = useTheme();
  const styles = useStyles();
  const ref = useRef(null);
  const [state, setState] = useState(false);
  const label = intl.string(t["L9B+ZZ"]);
  const callback = useCallback(() => {
    setState(false);
  }, []);
  useTooltip(ref, useMemo(() => ({
    position: tooltipPosition,
    label,
    visible: state,
    onPress: callback
  }), [tooltipPosition, label, state, callback]));
  useEffect(() => {
    if (state) {
      let c26278_0 = setTimeout(() => {
        setState(false);
      }, 3000);
      return () => clearTimeout(c26278_0);
    }
  }, [state]);
  const callback2 = useCallback(() => {
    setState((prevState) => !prevState);
  }, []);
  const isThemeDark = _shared.isThemeDark(theme);
  const r58 = isThemeDark ? styles.pillDark : styles.pillLight;
  const color = isThemeDark ? "control-overlay-primary-text-default" : "text-overlay-light";
  const accessibilityLabel = intl.string(t["1m6qcO"]);
  return <Pressable ref={ref} onPress={callback2} hitSlop={hitSlop} accessibilityRole="button" accessibilityLabel={accessibilityLabel} accessibilityHint={label} style={[styles.pillBase, r58]}>
    <NitroWheelIcon size="xs" color={color} />
    <Text variant="text-sm/bold" color={color} style={styles.text}>{accessibilityLabel}</Text>
  </Pressable>;
};
StaticBadge = () => {
  const theme = useTheme();
  const styles = useStyles();
  const isThemeDark = _shared.isThemeDark(theme);
  const r11 = isThemeDark ? styles.pillDark : styles.pillLight;
  const color = isThemeDark ? "control-overlay-primary-text-default" : "text-overlay-light";
  const accessibilityLabel = intl.string(t["1m6qcO"]);
  return <View accessibilityLabel={accessibilityLabel} style={[styles.pillBase, r11]}>
    <NitroWheelIcon size="xs" color={color} />
    <Text variant="text-sm/bold" color={color} style={styles.text}>{accessibilityLabel}</Text>
  </View>;
};
export default ({ location: location2, tooltipPosition: tooltipPosition2 = "top", inheritLayerScope = false, disablePressable = false }) => useIsProfileFramesEarlyAccessPhase(location2) ? disablePressable ? <StaticBadge /> : inheritLayerScope ? <BadgeWithTooltip tooltipPosition={tooltipPosition2} /> : <LayerScope zIndex={3}>
  <BadgeWithTooltip tooltipPosition={tooltipPosition2} />
</LayerScope> : null;