// Metro module 12017 (f12018).
import { View } from "react-native";
import PermissionStore from "../../../stores/PermissionStore";
import { Permissions } from "../../../_bundle/Module505";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import { isAndroid } from "../../../utils/PlatformUtils";
import useAnalyticsLocations from "../../app_analytics/useAnalyticsLocations";
import { useUserProfileAnalyticsContext } from "../UserProfileAnalyticsContext";
import { useIsScreenReaderEnabled } from "../../a11y/native/useIsScreenReaderEnabled.native";
import usePersonalizedVoiceChannelUsers from "../hooks/usePersonalizedVoiceChannelUsers";
import useChannelName from "../../channel/useChannelName";
import { useStateFromStores } from "../../../_bundle/Module589";
import { StageIcon } from "../../../design/components/Icon/native/redesign/generated/StageIcon";
import { VoiceNormalIcon } from "../../../design/components/Icon/native/redesign/generated/VoiceNormalIcon";
import { intl, t } from "../../../intl/index.native";
import GuildIcon, { GuildIconSizes } from "../../guild/native/GuildIcon";
import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
import ToastActionCreators from "../../toast/native/ToastActionCreators";
import { ChevronSmallRightIcon } from "../../../design/components/Icon/native/redesign/generated/ChevronSmallRightIcon";
import { Text } from "../../../design/components/Text/native/Text";
import getChannelA11yLabel from "../../channel/getChannelA11yLabel";
import { openGuildVoiceModal } from "../../../utils/native/PrivateChannelCallUtils";
import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
import showUserProfileActionSheet from "./showUserProfileActionSheet";
import { AvatarPile } from "../../../design/components/Pile/native/AvatarPile.native";
import { AvatarSizes, Avatar } from "../../../design/void/native";
const useStyles = createStyles({
  container: {
    flexDirection: "row",
    alignItems: "center",
    gap: 4,
    overflow: "hidden"
  },
  channelButton: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
    gap: 2
  },
  channelName: {
    flex: 1,
    overflow: "hidden",
    marginTop: isAndroid() ? -2 : -1
  }
});
export default function UserProfileActivityVoiceChannel(props) {
  const { guild, channel, onAction, style } = props;
  const styles = useStyles();
  const newestAnalyticsLocation = useAnalyticsLocations().newestAnalyticsLocation;
  const context = useUserProfileAnalyticsContext().context;
  const isScreenReaderEnabled = useIsScreenReaderEnabled();
  const users = usePersonalizedVoiceChannelUsers(channel);
  const channelName = useChannelName(channel);
  const stateFromStores = useStateFromStores([PermissionStore], () => channel.isPrivate() || PermissionStore.can(Permissions.CONNECT, channel));
  const Component = channel.isGuildStageVoice() ? StageIcon : VoiceNormalIcon;
  return <View style={[styles.container, style]}>
    {isScreenReaderEnabled ? <View accessible accessibilityLabel={intl.formatToPlainString(t.xm6W9D, {
      guildName: guild.name
    })}>
      <GuildIcon size={GuildIconSizes.XXSMALL} guild={guild} />
    </View> : <PressableOpacity accessibilityRole="button" accessibilityLabel={guild.name} onPress={function onPress() {
      onAction({
        action: "PRESS_VOICE_CHANNEL_ICON"
      });
      ToastActionCreators.open({
        key: "GUILD_NAME_TOAST",
        content: guild.name,
        icon: () => <GuildIcon size={GuildIconSizes.XSMALL} guild={guild} />
      });
    }}>
      <GuildIcon size={GuildIconSizes.XXSMALL} guild={guild} />
    </PressableOpacity>}
    <ChevronSmallRightIcon size="xxs" color="text-default" />
    {stateFromStores ? <PressableOpacity style={styles.channelButton} accessibilityRole="button" accessibilityLabel={getChannelA11yLabel({
      channel
    })} accessibilityHint={intl.string(t["9C444m"])} onPress={function onPress() {
      onAction({
        action: "OPEN_VOICE_CHANNEL"
      });
      openGuildVoiceModal(channel, newestAnalyticsLocation);
      ActionSheetActionCreators.hideActionSheet();
    }}>
      <Component size="xxs" color="text-default" />
      <Text style={styles.channelName} variant="text-xs/normal" lineClamp={1}>{channelName}</Text>
    </PressableOpacity> : <View style={styles.channelButton}>
      <Component size="xxs" color="text-default" />
      <Text style={styles.channelName} variant="text-xs/normal" lineClamp={1}>{channelName}</Text>
    </View>}
    <PressableOpacity accessibilityRole="button" accessibilityLabel={intl.formatToPlainString(t.e95u3C, {
      count: users.length
    })} onPress={function onPress() {
      onAction({
        action: "PRESS_VOICE_CHANNEL_AVATARS"
      });
      ActionSheetActionCreators.openLazy(import("./UserProfileActivityVoiceChannelUsers"), "UserProfileActivityVoiceChannelUsers", {
        users,
        channel,
        onPressUser: (a0) => showUserProfileActionSheet({
          ...context,
          userId: a0
        })
      }, "stack");
    }}>
      <AvatarPile size={AvatarSizes.SIZE_16} totalCount={users.length} names={users.map((user) => user.username)}>
        {(users.length <= 3 ? users : users.slice(0, 3)).map((item) => <Avatar key={item.id} size={AvatarSizes.SIZE_16} channel={channel} guildId={guild.id} user={item} />)}
      </AvatarPile>
    </PressableOpacity>
  </View>;
};