// Metro module 15431 (f15432).
import { useEffect } from "react";
import { View } from "react-native";
import GuildStore from "../../../stores/GuildStore";
import UserStore from "../../../stores/UserStore";
import GuildOnboardingHomeSettingsStore from "../GuildOnboardingHomeSettingsStore";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { useStateFromStores } from "../../../_bundle/defaultAreStatesEqual";
import useDisplayProfile from "../../user_profile/hooks/useDisplayProfile";
import useProfileTheme from "../../user_profile/hooks/useProfileTheme";
import { useSubscribeGuildMembers } from "../../../lib/guild/subscribeGuildMembers";
import maybeFetchUserProfile from "../../user_profile/maybeFetchUserProfile";
import { useName } from "../../../utils/UserUtils";
import { ThemeContextProvider } from "../../../_bundle/Module3901";
import { int2rgba } from "../../../_bundle/int2hslRaw";
import HeaderAvatar from "../../profile_customization/native/HeaderAvatar";
import { AvatarSizes, Icon } from "../../../design/void/native";
import UserProfileGradientContainer from "../../user_profile/native/UserProfileGradientContainer";
import { Text } from "../../../design/components/Text/native/Text";
import NicknameUtils from "../../../utils/NicknameUtils";
import Module8287 from "../../../_bundle/Module8287";
const useStyles = createStyles({
  relativeContainer: {
    position: "relative"
  },
  welcomeContainer: {
    marginHorizontal: 12,
    marginVertical: 16,
    borderRadius: Module712.radii.sm,
    padding: 2,
    display: "flex",
    flexDirection: "column"
  },
  welcomeContent: {
    borderRadius: Module712.radii.sm,
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
    paddingHorizontal: 12,
    paddingBottom: 12,
    paddingTop: 4
  },
  avatarBackground: {
    position: "absolute",
    zIndex: 2,
    top: 0,
    left: 28,
    width: 40,
    height: 40,
    borderRadius: Module712.radii.round,
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
  },
  avatarBorder: {
    position: "absolute",
    top: -2,
    zIndex: -1,
    left: 26,
    width: 44,
    height: 44,
    borderRadius: Module712.radii.round
  },
  avatar: {
    position: "absolute",
    top: 0,
    zIndex: 3,
    left: 28
  },
  adminUsernameContainer: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 4,
    paddingLeft: 44
  },
  adminUsername: {
    color: Module712.colors.MOBILE_TEXT_HEADING_PRIMARY,
    paddingLeft: 8
  },
  message: {
    color: Module712.colors.TEXT_DEFAULT
  },
  icon: {
    marginLeft: 4
  }
});
export default function HomeWelcomeMessage(props) {
  let stateFromStores, stateFromStores2, stateFromStores3;
  const guildId = props.guildId;
  stateFromStores = void 0;
  stateFromStores2 = void 0;
  stateFromStores3 = void 0;
  const styles = useStyles();
  const stateFromStores4 = useStateFromStores([UserStore], () => UserStore.getCurrentUser());
  stateFromStores = useStateFromStores([GuildOnboardingHomeSettingsStore], () => GuildOnboardingHomeSettingsStore.getWelcomeMessage(guildId));
  stateFromStores2 = useStateFromStores([UserStore], () => UserStore.getUser(stateFromStores == null ? void 0 : stateFromStores.authorIds[0]));
  const profileTheme = useProfileTheme({
    user: stateFromStores2,
    displayProfile: useDisplayProfile(stateFromStores2?.id, guildId)
  });
  const { theme, primaryColor, secondaryColor } = profileTheme;
  stateFromStores3 = useStateFromStores([GuildStore], () => GuildStore.getGuild(guildId));
  let r72 = stateFromStores?.authorIds;
  if (r72 == null) {
    r72 = [];
  }
  const r73 = {};
  r73[guildId] = r72;
  useSubscribeGuildMembers(r73, "HomeWelcomeMessage");
  useEffect(() => {
    if (!(stateFromStores2 == null || stateFromStores2.isNonUserBot())) {
      maybeFetchUserProfile(stateFromStores2.id, stateFromStores2.getAvatarURL(stateFromStores3?.id, 80), {
        dispatchWait: true,
        guildId: stateFromStores3?.id
      });
    }
  }, [stateFromStores2, stateFromStores3]);
  const name = useName(stateFromStores4);
  if (stateFromStores != null && stateFromStores4 != null && stateFromStores2 != null) {
    const r84 = stateFromStores3 != null && stateFromStores3.ownerId === stateFromStores2.id;
    const fallbackBackground = ["#B8CDFF", "#8CD9FF"];
    const r102 = [stateFromStores2.avatarDecoration == null ? <View style={[styles.avatarBorder, {
      backgroundColor: primaryColor != null ? int2rgba(primaryColor, 1) : fallbackBackground[0]
    }]} /> : null, <View style={styles.avatarBackground} />, <HeaderAvatar style={styles.avatar} user={stateFromStores2} size={AvatarSizes.NORMAL} disableStatus />, ,];
    const r147 = [<View style={styles.adminUsernameContainer}>
      <Text style={styles.adminUsername} variant="text-md/semibold">
        {NicknameUtils.getName(guildId, null, stateFromStores2)}
      </Text>
      {r84 ? <Icon size={Icon.Sizes.REFRESH_SMALL_16} style={styles.icon} source={Module8287} disableColor /> : null}
    </View>, ,];
    const message = stateFromStores.message;
    let r152 = name;
    if (r152 == null) {
      r152 = stateFromStores4.username;
    }
    const r155 = message.split(/\[@username\]/g);
    const r156 = [];
    const r2 = r155.length - 1;
    let key = 0;
    if (0 < r2) {
      do {
        r156.push(<Text key={key} variant="text-sm/normal" style={styles.message}>
          {r155[key]}
        </Text>);
        r156.push(<Text key={`${key}-user`} variant="text-sm/bold" style={styles.message}>
          {`@${r152}`}
        </Text>);
        key = key + 1;
      } while (key < r155.length - 1);
    }
    r156.push(<Text key={r155.length} variant="text-sm/normal" style={styles.message}>
      {r155[r155.length - 1]}
    </Text>);
    r147[1] = <Text variant="text-sm/normal">{r156}</Text>;
    r102[3] = <UserProfileGradientContainer containerStyle={styles.welcomeContainer} primaryColor={primaryColor} secondaryColor={secondaryColor} fallbackBackground={fallbackBackground}>
      <View style={styles.welcomeContent}>{r147}</View>
    </UserProfileGradientContainer>;
    return <ThemeContextProvider theme={theme} primaryColor={primaryColor} secondaryColor={secondaryColor}>
      <View style={styles.relativeContainer}>{r102}</View>
    </ThemeContextProvider>;
  }
  return null;
};