// Metro module 15955 (f15956).
import { useCallback } from "react";
import { ComponentActions } from "../../../../Constants";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { ComponentDispatch } from "../../../../utils/ComponentDispatchUtils";
import useChatBadge from "../hooks/useChatBadge";
import NativeView from "../../../core/native/NativeView";
import VoicePanelIconButton from "../shared/VoicePanelIconButton";
import { ChatIcon } from "../../../../design/components/Icon/native/redesign/generated/ChatIcon";
import { intl, t } from "../../../../intl/index.native";
const useStyles = createStyles({
  badgeContainer: {
    position: "absolute",
    top: -2,
    right: -2
  },
  badge: {
    width: 8,
    height: 8,
    borderRadius: Module712.radii.round
  },
  notificationBadge: {
    backgroundColor: Module712.colors.BACKGROUND_FEEDBACK_NOTIFICATION
  }
});
export default function VoicePanelHeaderChatButton(props) {
  const channelId = props.channelId;
  const styles = useStyles();
  const callback = useCallback(() => {
    ComponentDispatch.dispatch(ComponentActions.VOICE_PANEL_OPEN_CHAT_TAB);
  }, []);
  const chatBadge = useChatBadge(channelId);
  return <NativeView>
    <VoicePanelIconButton icon={<ChatIcon color={Module712.colors.WHITE} size="sm" />} accessibilityLabel={intl.string(t["5KxXrK"])} onPress={callback} />
    {chatBadge != null && <NativeView style={styles.badgeContainer}>
      <NativeView style={[styles.badge, styles.notificationBadge]} />
    </NativeView>}
  </NativeView>;
};