// Metro module 10794 (f10795).
import { View } from "react-native";
import ReadStateStore from "../../../../stores/ReadStateStore";
import { ThemeTypes } from "../../../../Constants";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { NAV_BAR_HEIGHT } from "../../../../design/components/Navigator/native/NavigatorConstants.native";
import { useStateFromStoresObject } from "../../../../_bundle/Module589";
import ChannelCallNavigatorIcon from "../../../video_calls/native/components/ChannelCallNavigatorIcon";
import Module12 from "../../../../_bundle/Module12";
import { ThemeContextProvider } from "../../../../_bundle/Module3901";
import { PressableOpacity } from "../../../../design/void/Pressables/native/Pressables";
import { Icon } from "../../../../design/void/native";
let useStyles;
const VoiceChatCallScreenHeaderIconInner = function VoiceChatCallScreenHeaderIconInner(props) {
  const { children, source } = props;
  let onPress = props.onPress;
  const accessibilityLabel = props.accessibilityLabel;
  const styles = useStyles();
  if (onPress == null) {
    onPress = Module12.noop;
  }
  return <View style={styles.chatIconContainer}>
    <ChannelCallNavigatorIcon containerStyle={styles.chatIcon} accessibilityLabel={accessibilityLabel} source={source} onPress={onPress}>{children}</ChannelCallNavigatorIcon>
  </View>;
};
useStyles = createStyles({
  headerButton: {
    width: 32,
    height: 32,
    borderRadius: Module712.radii.lg,
    alignSelf: "center",
    padding: 6,
    backgroundColor: Module712.colors.REDESIGN_BUTTON_TERTIARY_BACKGROUND
  },
  disabledOpacity: {
    opacity: 0.6
  },
  chatIconContainer: {
    marginRight: 12,
    height: NAV_BAR_HEIGHT,
    flexDirection: "row",
    alignItems: "center"
  },
  chatIcon: {
    marginHorizontal: 0,
    width: 32,
    height: 32
  },
  badge: {
    backgroundColor: Module712.colors.ICON_STRONG
  }
});
export default function VoiceChatHeaderIcon(props) {
  const { accessibilityLabel, onPress, source, children } = props;
  let disabled = props.disabled;
  const styles = useStyles();
  const props2 = {
    disabled,
    activeOpacity: 0.5,
    accessibilityRole: "button",
    accessibilityLabel,
    onPress,
    style: null,
    children: null
  };
  const style = [styles.headerButton, ,];
  if (disabled) {
    disabled = styles.disabledOpacity;
  }
  style[1] = disabled;
  props2.style = style;
  props2.children = [<Icon source={source} color={styles.badge.backgroundColor} size={Icon.Sizes.SMALL_20} />, children];
  return <PressableOpacity {...props2} />;
};
export function useVoiceChatMentions(a0) {
  return useStateFromStoresObject([ReadStateStore], () => ({
    unreadCount: ReadStateStore.getUnreadCount(a0),
    mentionCount: ReadStateStore.getMentionCount(a0)
  }), [a0]);
}
export function VoiceChatCallScreenHeaderIcon(props) {
  return <ThemeContextProvider theme={ThemeTypes.DARK}>
    <VoiceChatCallScreenHeaderIconInner {...props} />
  </ThemeContextProvider>;
}