// Metro module 10234 (f10235).
import { memo, useEffect, useRef } from "react";
import { View } from "react-native";
import { useIsVoiceChatFocused } from "../ChannelCallStore";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import MessageManager from "../../../messages/MessageManager";
import useSafeAreaInsets_native from "../../../safe_area/useSafeAreaInsets.native";
import { useVoiceChatNavigationContext } from "../../../voice_chat/native/VoiceChatModalContext";
import Module12 from "../../../../_bundle/Module12";
import { useIsConnectedToVoiceChannel } from "../../../voice_chat/VoiceChatHooks";
import useTheme from "../../../../hooks/useTheme";
import ThemedGradient from "../../../client_themes/native/ThemedGradient";
import { ChannelContainer } from "../../../../components_native/ChannelContainer";
import StatusBar_android from "../../../status_bar/native/components/StatusBar.android";
import ChatView from "../../../chat/native/ChatView";
import { PressableOpacity } from "../../../../design/void/Pressables/native/Pressables";
import { intl, t } from "../../../../intl/index.native";
import { Icon } from "../../../../design/void/native";
import Module10028 from "../../../../_bundle/Module10028";
import { ChannelTitle } from "../../../navbars/native/components/ChannelNavbar";
const useStyles = createStyles({
  chat: {
    flex: 1,
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
    alignSelf: "stretch"
  },
  chatHeaderSpacer: {
    height: 44,
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
  },
  chatHeader: {
    flexDirection: "row",
    alignSelf: "stretch",
    height: 44,
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
    alignItems: "center",
    justifyContent: "flex-start",
    position: "absolute",
    left: 0,
    right: 0,
    paddingHorizontal: 16
  },
  chatHeaderBackIconContainer: {
    width: 32,
    height: 32,
    alignItems: "flex-start",
    justifyContent: "center"
  },
  chatHeaderTitleContainer: {
    alignSelf: "stretch",
    flex: 1,
    justifyContent: "center",
    marginStart: 16
  },
  safeAreaTop: {
    alignSelf: "stretch",
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
  }
});
const r54 = memo(function(a0) {
  const channel = a0.channel;
  const { id, guild_id } = channel;
  const { channel: channel2, inModal = false } = a0;
  const styles = useStyles();
  const isVoiceChatFocused = useIsVoiceChatFocused();
  useEffect(() => {
    MessageManager.fetchMessages({
      guildId: guild_id,
      channelId: id
    });
  }, [id, guild_id]);
  const safeAreaInsets_native = useSafeAreaInsets_native();
  const { top, left, right } = safeAreaInsets_native;
  let onPress = useVoiceChatNavigationContext()?.openVoice;
  if (onPress == null) {
    onPress = Module12.noop;
  }
  const isConnectedToVoiceChannel = useIsConnectedToVoiceChannel(channel2);
  const ref = useRef(null);
  const theme = useTheme();
  const importantForAccessibility = isVoiceChatFocused ? "yes" : "no-hide-descendants";
  const style = [styles.chat, inModal ? void 0 : {
    paddingLeft: left,
    paddingRight: right
  }];
  return <View importantForAccessibility={importantForAccessibility} accessibilityElementsHidden={!isVoiceChatFocused} style={style}>
    <ThemedGradient absolute tall />
    <ChannelContainer guildId={guild_id} channelId={id}>
      {inModal ? null : <StatusBar_android hidden={isVoiceChatFocused ? !isVoiceChatFocused : void 0} animated barStyle={isConnectedToVoiceChannel ? "light-content" : theme === "dark" ? "light-content" : "dark-content"} />}
      <View style={[styles.safeAreaTop, {
        height: top,
        display: inModal ? "none" : void 0
      }]} />
      <View style={[styles.chatHeaderSpacer, {
        display: inModal ? "none" : void 0
      }]} />
      <ChatView guildId={guild_id} channelId={id} chatInputRef={ref} screenIndex="voice-panel" />
      <View style={[styles.chatHeader, {
        top,
        display: inModal ? "none" : void 0
      }]}>
        <PressableOpacity accessibilityRole="button" onPress={onPress} accessibilityLabel={intl.string(t["13/7kX"])} style={styles.chatHeaderBackIconContainer}>
          <Icon source={Module10028} size={Icon.Sizes.MEDIUM} />
        </PressableOpacity>
        <View style={styles.chatHeaderTitleContainer}>
          <ChannelTitle guildId={guild_id} channelId={id} />
        </View>
      </View>
    </ChannelContainer>
  </View>;
});
export default r54;