// Metro module 15966 (f15967).
import { memo, useContext } from "react";
import AuthenticationStore from "../../../../stores/AuthenticationStore";
import ChannelStore from "../../../../stores/ChannelStore";
import UserStore from "../../../../stores/UserStore";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import VoicePanelStateContext from "../VoicePanelStateContext";
import { useStateFromStoresArray } from "../../../../_bundle/Module589";
import NicknameUtils from "../../../../utils/NicknameUtils";
import NativeView from "../../../core/native/NativeView";
import FastImage from "../../../../components_native/common/FastImage";
import { Text } from "../../../../design/components/Text/native/Text";
import { intl, t } from "../../../../intl/index.native";
const useStyles = createStyles({
  container: {
    width: "100%",
    height: "100%",
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: Module712.colors.VOICE_VIDEO_VIDEO_TILE_BACKGROUND
  },
  avatarContainer: {
    flexDirection: "row",
    gap: 24
  },
  avatarWrapper: {
    width: 80,
    height: 80,
    borderRadius: Module712.radii.round,
    overflow: "hidden"
  },
  avatar: {
    width: 80,
    height: 80
  },
  disconnectedAvatar: {
    opacity: 0.2
  },
  textContainer: {
    position: "absolute",
    left: 0,
    right: 0,
    bottom: 0,
    padding: 16,
    width: "100%"
  },
  text: {
    textAlign: "center"
  }
});
const r49 = memo(function VoicePanelCTACardCallerDisconnected() {
  const channelId = useContext(VoicePanelStateContext).channelId;
  const styles = useStyles();
  let r30 = ChannelStore.getChannel(channelId)?.recipients;
  if (r30 == null) {
    r30 = [];
  }
  const [r12] = r30;
  let c22659_1 = r12;
  const id = AuthenticationStore.getId();
  const [uri, uri2, username] = useStateFromStoresArray([UserStore], () => {
    const user = UserStore.getUser(id);
    const user2 = UserStore.getUser(c22659_1);
    return [user == null ? void 0 : user.getAvatarURL(void 0, 80), user2 == null ? void 0 : user2.getAvatarURL(void 0, 80), NicknameUtils.getName(void 0, channelId, user2)];
  }, [channelId, id, r12]);
  let r52 = uri != null;
  if (r52) {
    let source = uri;
    if (typeof source !== "number") {
      source = {
        uri
      };
    }
    r52 = <NativeView style={styles.avatarWrapper}>
      <FastImage source={source} style={styles.avatar} />
    </NativeView>;
  }
  const r62 = [r52, ,];
  let r63 = uri2 != null;
  if (r63) {
    let source2 = uri2;
    if (typeof source2 !== "number") {
      source2 = {
        uri: uri2
      };
    }
    r63 = <NativeView style={styles.avatarWrapper}>
      <FastImage source={source2} style={[styles.avatar, styles.disconnectedAvatar]} />
    </NativeView>;
  }
  r62[1] = r63;
  return <NativeView style={styles.container}>
    <NativeView style={styles.avatarContainer}>{r62}</NativeView>
    <NativeView style={styles.textContainer}>
      <Text style={styles.text} variant="heading-sm/semibold" color="text-overlay-light">
        {intl.string(t.WkAgPU)}
      </Text>
      {username != null && <Text style={styles.text} variant="text-xs/medium" color="text-overlay-light">
        {intl.format(t.kXrAqz, {
          username
        })}
      </Text>}
    </NativeView>
  </NativeView>;
});
export default r49;