// Metro module 14368 (f14369).
import { useMemo } from "react";
import { View } from "react-native";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { useGuildMemberAndUserPendingNameplate } from "../../profile_customization/ProfileCustomizationUtils";
import { getNameplateData } from "../../collectibles/nameplates/utils";
import UserProfilePreview from "../../user_profile/native/UserProfilePreview";
import { intl } from "../../../intl/index.native";
import DisplayNameStyles_messages from "../intl/DisplayNameStyles.messages";
import { NameplatePreview } from "../../collectibles/nameplates/native/NameplatePreview";
import { calendarFormat } from "../../../utils/DateUtils";
import { Avatar, AvatarSizes } from "../../../design/void/native";
import UsernameWithEffects from "./UsernameWithEffects";
import { EffectDisplayType } from "../types";
import { Text } from "../../../design/components/Text/native/Text";
let useStyles;
const ChatPreview = function ChatPreview(props) {
  const { user, displayName, displayNameStyles, guildId } = props;
  const styles = useStyles();
  return <View style={styles.chatContainer} pointerEvents="none">
    <Avatar user={user} size={AvatarSizes.NORMAL} guildId={guildId} />
    <View style={styles.chatContent}>
      <View style={styles.chatHeader}>
        <UsernameWithEffects userId={user.id} guildId={guildId} userName={displayName} variant="text-md/semibold" effectDisplayType={EffectDisplayType.PLAIN} lineClamp={1} pendingDisplayNameStyles={displayNameStyles} />
        <Text variant="text-xs/medium" color="text-muted" style={styles.chatTimestamp}>
          {useMemo(() => calendarFormat(new Date(), true), [])}
        </Text>
      </View>
      <Text variant="text-md/normal" color="text-default" style={styles.chatMessageText}>
        {intl.string(DisplayNameStyles_messages.h5Cuej)}
      </Text>
    </View>
  </View>;
};
useStyles = createStyles({
  previewSection: {
    marginBottom: Module712.space.PX_24,
    alignItems: "center",
    alignSelf: "center",
    width: "100%",
    maxWidth: 360
  },
  chatPreviewWrapper: {
    marginTop: -18,
    alignSelf: "flex-end",
    width: 260,
    borderRadius: Module712.radii.sm,
    borderWidth: 1,
    borderColor: Module712.colors.BACKGROUND_MOD_SUBTLE
  },
  nameplatePreviewWrapper: {
    marginTop: -6,
    width: 260
  },
  chatContainer: {
    flexDirection: "row",
    borderRadius: Module712.radii.sm,
    padding: Module712.space.PX_16,
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
    gap: Module712.space.PX_12
  },
  chatContent: {
    flex: 1
  },
  chatHeader: {
    flexDirection: "row",
    alignItems: "baseline",
    gap: 6
  },
  chatTimestamp: {
    marginTop: -8
  },
  chatMessageText: {}
});
export default function DisplayNameStylesEditPreview(props) {
  const { user, displayName, guildId, selectedFontId, selectedEffectId, selectedColors } = props;
  const styles = useStyles();
  const guildMemberAndUserPendingNameplate = useGuildMemberAndUserPendingNameplate(user, guildId);
  const { userNameplate, guildNameplate, pendingNameplate } = guildMemberAndUserPendingNameplate;
  let r15 = getNameplateData(guildNameplate);
  const memo = useMemo(() => ({
    fontId: selectedFontId,
    effectId: selectedEffectId,
    colors: selectedColors
  }), [selectedFontId, selectedEffectId, selectedColors]);
  const r50 = [<UserProfilePreview user={user} displayName={displayName} guildId={guildId} displayNameStylesOverride={memo} compact hideFrame maxWidth={320} accessibilityLabel={intl.string(DisplayNameStyles_messages.zoh6MT)} />, <View style={styles.chatPreviewWrapper}>
    <ChatPreview user={user} displayName={displayName} displayNameStyles={memo} guildId={guildId} />
  </View>, ,];
  const r2 = pendingNameplate == null;
  let nameplateData = void 0;
  if (r2) {
    if (r15 == null) {
      r15 = userNameplate;
    }
    nameplateData = r15;
  }
  r50[2] = <View style={styles.nameplatePreviewWrapper}>
    <NameplatePreview user={user} nameplate={pendingNameplate} nameplateData={nameplateData} guildId={guildId} pendingDisplayNameStyles={memo} pendingGlobalName={displayName} />
  </View>;
  return <View style={styles.previewSection}>{r50}</View>;
};