// Metro module 15931 (f15932).
import { memo, useContext } from "react";
import ChannelRTCStore from "../../../calls/ChannelRTCStore";
import ReanimatedRexport, { useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
import { BackgroundBlurView } from "../../../../design/components/experimental/native";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import useVoicePanelCardUserStateIcons, { VoicePanelCardUserStateIconType } from "../hooks/useVoicePanelCardUserStateIcons";
import useStableParticipant, { isStableParticipantWithUser } from "../utils/useStableParticipant";
import { VideoIcon, MuteDeafenIcon } from "../shared/VoiceStateIcons";
import NativeView from "../../../core/native/NativeView";
import VoicePanelStateContext from "../VoicePanelStateContext";
import { useStateFromStores } from "../../../../_bundle/Module589";
import * as _timing from "../../../../design/animation/reanimated/timing/timing";
let AnimatedComponent, OPACITY_TIMING, useStyles, __initData;
const useVoicePanelHeaderUserStateIcons = function useVoicePanelHeaderUserStateIcons(participant2, a1, userIcons) {
  const styles = useStyles();
  const voicePanelCardUserStateIcons = useVoicePanelCardUserStateIcons(participant2?.type, isStableParticipantWithUser(participant2) ? participant2.user.id : void 0, a1);
  const r47 = [];
  for (const item of voicePanelCardUserStateIcons) {
    if (item.type === VoicePanelCardUserStateIconType.USER_VIDEO_ICON) {
      r47.push(<BackgroundBlurView key="video" blurTheme="dark" style={styles.floatingIconWrapper}>
        <VideoIcon style={styles.floatingIcon} state={item.videoIconState} />
      </BackgroundBlurView>);
    }
    if (item.type === VoicePanelCardUserStateIconType.MUTE_DEAFEN_ICON) {
      r47.push(<BackgroundBlurView key="mute-deafen" blurTheme="dark" style={[styles.floatingIconWrapper, item.withLeftMargin ? styles.leftMargin : void 0]}>
        <MuteDeafenIcon style={styles.floatingIcon} state={item.muteDeafenIconState} />
      </BackgroundBlurView>);
    }
  }
  if (r47.length !== 0) {
    return <NativeView style={[styles.iconContainer, userIcons]}>{r47}</NativeView>;
  }
};
AnimatedComponent = ReanimatedRexport.createAnimatedComponent(BackgroundBlurView);
OPACITY_TIMING = {
  duration: 100
};
useStyles = createStyles({
  container: {
    position: "absolute",
    top: 0,
    left: 0,
    borderRadius: Module712.radii.round,
    padding: 6
  },
  iconContainer: {
    flexDirection: "row"
  },
  floatingIconWrapper: {
    width: 20,
    height: 20,
    borderRadius: Module712.radii.round,
    alignItems: "center",
    justifyContent: "center"
  },
  floatingIcon: {
    width: 12,
    height: 12,
    tintColor: Module712.colors.WHITE
  },
  leftMargin: {
    marginLeft: 4
  }
});
__initData = {
  code: "function VoicePanelHeaderUserStateTsx1(){const{withTiming,isHeaderHidden,OPACITY_TIMING}=this.__closure;return{opacity:withTiming(isHeaderHidden.get()?1:0,OPACITY_TIMING)};}"
};
const r54 = memo(function VoicePanelHeaderUserState(props) {
  const isHeaderHidden = props.isHeaderHidden;
  const context = useContext(VoicePanelStateContext);
  const { channelId, guildId } = context;
  const styles = useStyles();
  const voicePanelHeaderUserStateIcons = useVoicePanelHeaderUserStateIcons(useStableParticipant(useStateFromStores([ChannelRTCStore], () => ChannelRTCStore.getSelectedParticipant(channelId)?.id), channelId, guildId), guildId);
  const h = function h() {
    return {
      opacity: _timing.withTiming(isHeaderHidden.get() ? 1 : 0, OPACITY_TIMING)
    };
  };
  h.__closure = {
    withTiming: _timing.withTiming,
    isHeaderHidden,
    OPACITY_TIMING
  };
  h.__workletHash = 7032221979181;
  h.__initData = __initData;
  const animatedStyle = useAnimatedStyle(h);
  return voicePanelHeaderUserStateIcons != null ? <AnimatedComponent blurTheme="dark" style={[styles.container, animatedStyle]} pointerEvents="none">{voicePanelHeaderUserStateIcons}</AnimatedComponent> : null;
});
export default r54;
export { useVoicePanelHeaderUserStateIcons };