// Metro module 9823 (f9824).
import { useMemo } from "react";
import { View } from "react-native";
import AccessibilityStore from "../../../a11y/AccessibilityStore";
import GuildMemberStore from "../../../../stores/GuildMemberStore";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { getNameplateData } from "../utils";
import { useAvatarDecoration } from "../../avatar_decorations/useAvatarDecoration";
import usePendingAvatarSettings from "../../../user_profile/hooks/usePendingAvatarSettings";
import { useStateFromStores } from "../../../../_bundle/Module589";
import UserUtils from "../../../../utils/UserUtils";
import useDisplayNameStyles from "../../../display_name_styles/hooks/useDisplayNameStyles";
import { Avatar, AvatarSizes } from "../../../../design/void/native";
import Nameplate from "./Nameplate";
import UsernameWithEffects from "../../../display_name_styles/native/UsernameWithEffects";
import { EffectDisplayType } from "../../../display_name_styles/types";
import { Text } from "../../../../design/components/Text/native/Text";
const useStyles = createStyles((a0) => ({
  container: {
    borderRadius: a0 ? Module712.radii.sm : 0,
    padding: Module712.space.PX_8,
    flexDirection: "row",
    alignItems: "center",
    width: "100%",
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST
  },
  nameplate: {
    borderRadius: a0 ? Module712.radii.sm : 0
  },
  avatar: {
    borderRadius: Module712.radii.round,
    marginRight: Module712.space.PX_8
  },
  content: {
    flex: 1,
    paddingRight: Module712.space.PX_40
  }
}));
export function NameplatePreview(props) {
  let pendingAvatarDecoration;
  const nameplate = props.nameplate;
  let nameplateData = props.nameplateData;
  const { user, hasRoundedCorners = true, animate = false, guildId, pendingDisplayNameStyles } = props;
  let pendingGlobalName = props.pendingGlobalName;
  const r7 = props["aria-hidden"];
  pendingAvatarDecoration = void 0;
  const styles = useStyles(hasRoundedCorners);
  if (nameplate != null) {
    nameplateData = getNameplateData(nameplate);
  }
  const avatarDecoration = useAvatarDecoration(user, guildId);
  const pendingAvatarDecoration2 = usePendingAvatarSettings({
    guildId
  }).pendingAvatarDecoration;
  const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
  const stateFromStores2 = useStateFromStores([GuildMemberStore], () => guildId != null ? user != null ? GuildMemberStore.getMember(guildId, user.id) : null : null);
  const name = UserUtils.useName(user);
  if (pendingGlobalName == null) {
    pendingGlobalName = guildId != null ? stateFromStores2?.nick != null ? stateFromStores2?.nick : name : name;
  }
  pendingAvatarDecoration = pendingAvatarDecoration2 !== void 0 ? pendingAvatarDecoration2 : avatarDecoration;
  const styles2 = useDisplayNameStyles({
    userId: user.id,
    guildId,
    pendingDisplayNameStyles
  });
  return <View style={styles.container} aria-hidden={r7}>
    <Nameplate nameplate={nameplateData} style={styles.nameplate} fullOpacity animate={animate} />
    <View style={styles.avatar}>
      {useMemo(() => <Avatar style={styles.avatar} user={user} guildId={guildId} size={AvatarSizes.NORMAL} avatarDecoration={pendingAvatarDecoration} animate={!stateFromStores} autoStatusCutout aria-hidden />, [styles.avatar, user, guildId, pendingAvatarDecoration, stateFromStores])}
    </View>
    <View style={styles.content}>
      {styles2 != null && <UsernameWithEffects userId={user.id} guildId={guildId} userName={pendingGlobalName} variant="text-md/semibold" effectDisplayType={EffectDisplayType.STATIC} lineClamp={1} pendingDisplayNameStyles={pendingDisplayNameStyles} />}
      {styles2 == null && <Text lineClamp={1} variant="text-md/semibold" color="mobile-text-heading-primary">{pendingGlobalName}</Text>}
    </View>
  </View>;
}