// Metro module 15109 (f15110).
import { memo } from "react";
import { View } from "react-native";
import GuildMemberStore from "../../../stores/GuildMemberStore";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { makeSizeStyle } from "../../main_tabs_v2/native/shared_components/guild_channels/layouts/ChannelListLayout";
import useIsUsingClientTheme from "../../client_themes/native/useIsUsingClientTheme";
import { useStateFromStoresObject } from "../../../_bundle/Module589";
import VoiceUser from "./VoiceUser";
import { scaleTextLineHeight } from "../../screen/native/useScaledTextLineHeight.android";
import { intl, t } from "../../../intl/index.native";
import { HeadphonesIcon } from "../../../design/components/Icon/native/redesign/generated/HeadphonesIcon";
import { Text } from "../../../design/components/Text/native/Text";
import VoiceUsersItem from "./VoiceUsersItem";
let variant, useStyles, Component;
const AudienceItem = function AudienceItem(props) {
  const { audienceCount, collapsed: collapsed2 } = props;
  const styles = useStyles(useIsUsingClientTheme());
  return <View style={collapsed2 ? styles.listenersCollapsed : styles.listeners}>
    <View style={styles.listenersIconWrapper}>
      <HeadphonesIcon color="redesign-channel-name-muted-text" size="custom" style={styles.headphonesIcon} />
    </View>
    <Text style={styles.listenersText} variant={variant} color="redesign-channel-name-muted-text">
      {collapsed2 ? audienceCount : intl.formatToPlainString(t["+v2pN2"], {
        count: audienceCount
      })}
    </Text>
  </View>;
};
variant = "text-sm/medium";
useStyles = createStyles((a0) => {
  const backgroundColor = a0 ? Module712.colors.MOBILE_EXPRESSION_PICKER_BACKGROUND_DEFAULT : Module712.colors.BACKGROUND_BASE_LOWEST;
  const round = Module712.radii.round;
  return {
    listeners: {
      display: "flex",
      flexDirection: "row",
      alignItems: "center",
      padding: 4,
      marginTop: 4,
      marginLeft: -8
    },
    listenersCollapsed: {
      flexDirection: "row",
      alignItems: "center",
      backgroundColor,
      borderRadius: round,
      marginLeft: -16,
      marginTop: 4,
      paddingLeft: 2,
      paddingRight: 6
    },
    listenersIconWrapper: {
      alignItems: "center",
      justifyContent: "center",
      backgroundColor,
      marginRight: 8,
      marginLeft: 4,
      borderRadius: round,
      ...makeSizeStyle(20)
    },
    listenersText: {
      marginRight: 4
    },
    userCollapsedOverlap: {
      marginLeft: -20
    },
    headphonesIcon: makeSizeStyle(14)
  };
});
Component = memo(function(a0) {
  const voiceState = a0.voiceState;
  const user = voiceState.user;
  let member = voiceState.member;
  const voiceState2 = voiceState.voiceState;
  const { channel, collapsed: collapsed2, isFirst } = a0;
  const styles = useStyles(useIsUsingClientTheme());
  const stateFromStoresObject = useStateFromStoresObject([GuildMemberStore], () => ({
    storeMember: GuildMemberStore.getMember(channel.guild_id, user.id),
    isGuest: GuildMemberStore.isGuestOrLurker(channel.guild_id, user.id)
  }), [channel.guild_id, user.id]);
  const { storeMember, isGuest } = stateFromStoresObject;
  const style = collapsed2 ? isFirst ? null : styles.userCollapsedOverlap : null;
  if (member == null) {
    member = storeMember;
  }
  return <View style={style}>
    <VoiceUser key={user.id} user={user} member={member} mute={voiceState2.mute} deaf={voiceState2.deaf} selfVideo={voiceState2.selfVideo} selfMute={voiceState2.selfMute} selfDeaf={voiceState2.selfDeaf} suppress={voiceState2.suppress} collapsed={collapsed2} sessionId={voiceState2.sessionId} channel={channel} isGuest={isGuest} />
  </View>;
});
export default function VoiceUsers(props) {
  const { collapsed, channel: channel2, voiceStates, audienceCount } = props;
  return voiceStates.length !== 0 ? <VoiceUsersItem collapsed={collapsed}>
    {voiceStates.map(function(a0, index) {
      return <Component key={`voice-user-item-${a0.user.id}-${a0.voiceState.sessionId}`} voiceState={a0} channel={channel2} collapsed={collapsed} isFirst={index === 0} />;
    })}
    {audienceCount != null && audienceCount > 0 && <AudienceItem audienceCount={audienceCount} collapsed={collapsed} />}
  </VoiceUsersItem> : null;
};
export function getAudienceItemHeight(a0) {
  return 8 + Math.max(20, scaleTextLineHeight(variant, a0));
}