// Metro module 15877 (f15878).
import { useMemo, memo } from "react";
import ChannelStore from "../../../stores/ChannelStore";
import VoicePanelStore from "../VoicePanelStore";
import { useStateFromStores } from "../../../_bundle/Module589";
import VoicePanelController from "./VoicePanelController";
import VoicePanelUI from "./VoicePanelUI";
import { shallow } from "../../../_bundle/Module3802";
import { TransitionGroup } from "../../../design/components/TransitionGroup/TransitionGroup";
let getChannelKey, renderVoicePanel;
const VoicePanel = function VoicePanel(props) {
  let c22536_0 = props;
  return <VoicePanelController {...props} guildId={useStateFromStores([ChannelStore], () => ChannelStore.getChannel(c22536_0.channelId)?.guild_id)}>
    {useMemo(() => <VoicePanelUI />, [])}
  </VoicePanelController>;
};
getChannelKey = function getChannelKey(a0) {
  return a0;
};
renderVoicePanel = function renderVoicePanel(a0, a1, a2, a3) {
  return <VoicePanel key={a1} channelId={a1} transitionState={a2} transitionCleanUp={a3} />;
};
const r27 = memo(function VoicePanelContainer() {
  return <TransitionGroup items={VoicePanelStore((a0) => Array.from(a0.channels), shallow)} getItemKey={getChannelKey} renderItem={renderVoicePanel} />;
});
export default r27;