// Metro module 9425 (f9426).
import { View } from "react-native";
import { ExpressionSourceGuildRecord } from "../../../emojis/records/ExpressionSourceRecord";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import GuildIcon, { GuildIconSizes } from "../../../guild/native/GuildIcon";
import AvatarUtils from "../../../../utils/AvatarUtils";
import FastImage from "../../../../components_native/common/FastImage";
import { Text } from "../../../../design/components/Text/native/Text";
import { intl, t } from "../../../../intl/index.native";
import { PressableOpacity } from "../../../../design/void/Pressables/native/Pressables";
import { handleJoinGuild } from "../../../guild/GuildUtils";
import GuildBadge from "../../../guild/native/GuildBadge";
import { Icon } from "../../../../design/void/native";
const useStyles = createStyles({
  guildDetailsContainer: {
    flexDirection: "column"
  },
  guildDetailsContent: {
    flexDirection: "row",
    marginTop: 8,
    alignItems: "center"
  },
  guildIcon: {
    width: 40,
    height: 40,
    borderRadius: Module712.radii.sm,
    marginRight: 12
  },
  guildNameAndOnlineMembers: {
    flexDirection: "column"
  },
  guildNameWrapper: {
    flexDirection: "row",
    alignItems: "center",
    marginRight: 32
  },
  guildPartnerIcon: {
    marginRight: 8
  },
  guildDescriptionSection: {
    flexDirection: "row",
    alignItems: "center",
    marginTop: 4
  },
  dotSeparator: {
    width: 4,
    height: 4,
    borderRadius: Module712.radii.xs,
    marginRight: 8,
    marginLeft: 8,
    backgroundColor: Module712.colors.BACKGROUND_MOD_MUTED
  },
  joinGuildButton: {
    borderRadius: Module712.radii.sm,
    borderColor: Module712.colors.BORDER_STRONG,
    borderWidth: 1,
    paddingHorizontal: 4,
    paddingBottom: 2
  }
});
export const ExpressionGuildDetails = (props) => {
  const { guild, title, hasJoinedGuild, showingJoinGuildCta } = props;
  const styles = useStyles();
  const fromGuildType = ExpressionSourceGuildRecord.createFromGuildType(guild);
  const isDiscoverable = fromGuildType.isDiscoverable();
  const r39 = !isDiscoverable && !hasJoinedGuild ? <FastImage style={styles.guildIcon} source={AvatarUtils.getGuildIconSource({
    id: guild.id,
    icon: guild.icon,
    canAnimate: true,
    size: 32
  })} /> : <GuildIcon style={styles.guildIcon} guild={fromGuildType} size={GuildIconSizes.XLARGE} animate />;
  const r62 = [<Text variant="eyebrow" color="text-default">{title}</Text>, ,];
  r62[1] = <View style={styles.guildDetailsContent}>
    {r39}
    <View style={styles.guildNameAndOnlineMembers}>
      <View style={styles.guildNameWrapper}>
        <GuildBadge guild={guild} style={styles.guildPartnerIcon} size={Icon.Sizes.REFRESH_SMALL_16} disableColor />
        <Text variant="text-md/bold" color="mobile-text-heading-primary">{guild.name}</Text>
      </View>
      <View style={styles.guildDescriptionSection}>
        {isDiscoverable && fromGuildType.presenceCount != null ? <>
          <Text variant="text-xs/medium" color="text-default">
            {intl.format(t["LC+S+m"], {
              membersOnline: fromGuildType.presenceCount
            })}
          </Text>
          <View style={styles.dotSeparator} />
          {!hasJoinedGuild && !showingJoinGuildCta ? <PressableOpacity style={styles.joinGuildButton} onPress={() => handleJoinGuild(guild.id)}>
            <Text variant="text-xs/medium" color="text-default">
              {intl.string(t.riu2R5)}
            </Text>
          </PressableOpacity> : <Text variant="text-xs/medium" color="text-default">
            {intl.string(t.inyJqO)}
          </Text>}
        </> : <Text variant="text-xs/medium" color="text-default">
          {intl.string(t.H29mx4)}
        </Text>}
      </View>
    </View>
  </View>;
  return <View style={styles.guildDetailsContainer}>{r62}</View>;
};
export default ExpressionGuildDetails;