// Metro module 11670 (f11671).
import { View } from "react-native";
import AccessibilityStore from "../../../a11y/AccessibilityStore";
import { jsx } from "react/jsx-runtime";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import useMaybeGetSortedBoosts, { useGetBoostUserConfig } from "../hooks/useMaybeGetSortedBoosts";
import { calendarFormat } from "../../../../utils/DateUtils";
import { getRelativeTimestamp } from "../../../notification_center/NotificationCenterUtils";
import { useStateFromStores } from "../../../../_bundle/Module589";
import { useProcessColorStringsArray, useIsRoleStyleAndRoleColorsEligibleForERC } from "../../enhanced_role_colors/native/EnhancedRoleColorUtils";
import { BoostGemIcon } from "../../../../design/components/Icon/native/redesign/generated/BoostGemIcon";
import { BoostTier1Icon } from "../../../../design/components/Icon/native/redesign/generated/BoostTier1Icon";
import { BoostGemSlashIcon } from "../../../../design/components/Icon/native/redesign/generated/BoostGemSlashIcon";
import { RoleDot } from "../../../../design/void/native";
import { Text } from "../../../../design/components/Text/native/Text";
import getBoostRowMessageText from "../utils/getBoostRowMessageText";
import { useExpiringBoostsEnabled } from "../experiments/ExpiringBoostsExperiment";
import { intl, t } from "../../../../intl/index.native";
let useStyles;
const GuildPowerupsRecentActivityRow = function GuildPowerupsRecentActivityRow(props) {
  const { row, isExpiringBoostsEnabled } = props;
  const { boost, phase, sortKey } = row;
  const styles = useStyles();
  const getBoostUserConfig = useGetBoostUserConfig(boost);
  const { username, roleColor, roleColorStrings } = getBoostUserConfig;
  const r9 = isExpiringBoostsEnabled ? calendarFormat(new Date(sortKey)) : getRelativeTimestamp(sortKey, true);
  const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.roleStyle);
  const r21 = stateFromStores === "username" && roleColor != null ? {
    color: roleColor
  } : {};
  const processColorStringsArray = useProcessColorStringsArray(roleColorStrings);
  const isRoleStyleAndRoleColorsEligibleForERC = useIsRoleStyleAndRoleColorsEligibleForERC(boost.guildId, boost.userId, stateFromStores, processColorStringsArray);
  const r61 = phase === "gave";
  return <View style={styles.boostRowContainer}>
    {jsx(r61 ? BoostGemIcon : phase === "expiring" ? BoostTier1Icon : BoostGemSlashIcon, r61 ? {
      color: Module712.unsafe_rawColors.GUILD_BOOSTING_PINK,
      size: "sm"
    } : {
      size: "sm"
    })}
    <View style={styles.boostMessage}>
      {stateFromStores === "dot" && roleColor != null && <RoleDot size="small" color={roleColor} colors={roleColorStrings} />}
      <Text variant="text-md/medium" color="interactive-text-active" lineClamp={1} style={[styles.username, r21]} gradientColors={isRoleStyleAndRoleColorsEligibleForERC ? processColorStringsArray : void 0}>{username}</Text>
      <Text variant="text-md/medium" color="interactive-text-active">{" "}</Text>
      <Text variant="text-md/medium" lineClamp={1} style={styles.messageText}>
        {getBoostRowMessageText(row)}
      </Text>
    </View>
    <Text variant="text-xs/semibold" style={styles.timestamp}>{r9}</Text>
  </View>;
};
useStyles = createStyles({
  sectionContainer: {
    marginTop: Module712.space.PX_16,
    paddingHorizontal: Module712.space.PX_16
  },
  boostContainer: {
    gap: Module712.space.PX_12,
    marginTop: Module712.space.PX_16
  },
  boostRowContainer: {
    flexDirection: "row",
    alignItems: "center",
    gap: 8
  },
  boostMessage: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center"
  },
  username: {
    maxWidth: 170,
    flexShrink: 1
  },
  messageText: {
    flexShrink: 0
  },
  timestamp: {
    flexShrink: 0
  }
});
export default function GuildPowerupsRecentActivitySection(props) {
  const guildId = props.guildId;
  const styles = useStyles();
  const maybeGetSortedBoosts = useMaybeGetSortedBoosts(guildId, 10);
  const expiringBoostsEnabled = useExpiringBoostsEnabled("GuildPowerupsRecentActivity");
  return maybeGetSortedBoosts.length !== 0 ? <View style={styles.sectionContainer}>
    <Text variant="heading-lg/semibold" color="text-subtle">
      {intl.string(t.yM9Krm)}
    </Text>
    <View style={styles.boostContainer}>
      {maybeGetSortedBoosts.map((maybeGetSortedBoost) => <GuildPowerupsRecentActivityRow key={`boost-${maybeGetSortedBoost.boost.id}`} row={maybeGetSortedBoost} isExpiringBoostsEnabled={expiringBoostsEnabled} />)}
    </View>
  </View> : null;
};