discord-decomp/modules/premium/powerups/native/GuildPowerupsLevelCard.tsx

// Metro module 11656 (f11657).
import { useMemo, useCallback } from "react";
import { View } from "react-native";
import { LevelCardPosition, PowerupActiveStatusType } from "../constants/GuildPowerupsConstants";
import { BoostedGuildTiers, HorizontalGradient } from "../../../../Constants";
import { TIER_CARDS } from "../../../guild_boosting/GuildBoostingMarketingConstants";
import { jsx } from "react/jsx-runtime";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import Module4611 from "../../../../_bundle/Module4611";
import { BoostGemIcon } from "../../../../design/components/Icon/native/redesign/generated/BoostGemIcon";
import useGuildPowerupColorConfig from "./hooks/useGuildPowerupColorConfig";
import { getIconForPerk } from "../../../guild_boosting/native/GuildBoostingMarketingUtils";
import { Text } from "../../../../design/components/Text/native/Text";
import { intl } from "../../../../intl/index.native";
import GuildPowerups_messages from "../GuildPowerups.messages";
import usePowerupActiveStatus from "../hooks/usePowerupActiveStatus";
import { useCalculatePowerupCardStatus } from "../utils/useCalculatePowerupCardStatus";
import useGuildPowerupOnShowMore from "./hooks/useGuildPowerupOnShowMore";
import GuildPowerupsCard from "./GuildPowerupsCard";
import { GuildPowerupsCardFooter } from "./GuildPowerupsCardFooter";
let useStyles, GuildPowerupLevelBody;
const GuildLevelPowerupHeader = function GuildLevelPowerupHeader(props) {
  const { active, nextActive, position } = props;
  const styles2 = useStyles();
  return <View style={styles2.progressContainer}>
    <Module4611 start={HorizontalGradient.START} end={HorizontalGradient.END} colors={active && nextActive !== false ? [styles2.boostContainerActive.backgroundColor, styles2.boostContainerActive.backgroundColor] : active && nextActive === false ? [styles2.boostContainerActive.backgroundColor, styles2.boostContainerInactive.backgroundColor] : [styles2.boostContainerInactive.backgroundColor, styles2.boostContainerInactive.backgroundColor]} style={[styles2.progress, position === LevelCardPosition.START && styles2.progressStart, position === LevelCardPosition.END && styles2.progressEnd]} />
    <View style={[styles2.boostContainer, styles2.boostContainerBackground]} />
    <View style={[styles2.boostContainer, active && styles2.boostContainerActive]}>
      <BoostGemIcon size="xs" color={active ? Module712.colors.WHITE : Module712.colors.TEXT_MUTED} />
    </View>
  </View>;
};
GuildPowerupLevelBody = function GuildPowerupLevelBody(props) {
  const { isActive, index } = props;
  const styles = useStyles();
  const guildPowerupColorConfig = useGuildPowerupColorConfig(isActive);
  const { textColor, iconColor } = guildPowerupColorConfig;
  return <View style={styles.perkRowContainer}>
    {useMemo(() => {
      const r7 = TIER_CARDS[index];
      if (r7 == null) {
        return [];
      }
      const r11 = r7.tier === BoostedGuildTiers.TIER_3 ? r7.perks.slice(0, -1) : r7.perks;
      return r11 == null ? void 0 : r11.map((item, a1) => <View key={`perk-${index}-${a1}`} style={styles.perkRowStyle}>
        {jsx(getIconForPerk(item.perkIcon), {
          color: iconColor,
          size: "sm"
        })}
        <Text color={textColor} style={styles.perkText} variant="text-sm/medium">
          {item.getCopy()}
        </Text>
      </View>);
    }, [index, iconColor, textColor, styles])}
    <View style={styles.perkRow}>
      <Text color={textColor} variant="text-sm/medium">
        {intl.string(GuildPowerups_messages.nIj3LZ)}
      </Text>
    </View>
  </View>;
};
useStyles = createStyles({
  cardContainer: {
    flex: 1
  },
  card: {
    padding: 0,
    overflow: "hidden",
    flex: 1
  },
  progressContainer: {
    marginVertical: Module712.space.PX_24,
    position: "relative"
  },
  progress: {
    height: 6,
    backgroundColor: Module712.colors.BACKGROUND_MOD_SUBTLE
  },
  progressStart: {
    marginStart: Module712.space.PX_16
  },
  progressEnd: {
    marginEnd: Module712.space.PX_16,
    borderTopEndRadius: Module712.radii.round,
    borderBottomEndRadius: Module712.radii.round
  },
  boostContainerBackground: {
    backgroundColor: Module712.colors.CARD_BACKGROUND_DEFAULT,
    width: 28,
    height: 28,
    start: Module712.space.PX_16 - 2,
    top: -11
  },
  boostContainer: {
    padding: Module712.space.PX_4,
    borderRadius: Module712.radii.round,
    position: "absolute",
    width: 24,
    height: 24,
    top: -9,
    start: Module712.space.PX_16,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: Module712.colors.BACKGROUND_MOD_SUBTLE
  },
  boostContainerActive: {
    backgroundColor: Module712.unsafe_rawColors.GUILD_BOOSTING_PINK
  },
  boostContainerInactive: {
    backgroundColor: Module712.colors.BACKGROUND_MOD_SUBTLE
  },
  contentContainer: {
    padding: Module712.space.PX_16,
    paddingTop: 0,
    flex: 1
  },
  perkRowContainer: {
    flexDirection: "column",
    marginTop: Module712.space.PX_16,
    gap: Module712.space.PX_8
  },
  perkRow: {
    flexDirection: "row",
    alignItems: "center"
  },
  perkRowStyle: {
    flexDirection: "row",
    alignItems: "center"
  },
  perkText: {
    marginStart: Module712.space.PX_8
  },
  footerContainer: {
    marginTop: "auto",
    paddingTop: Module712.space.PX_16
  }
});
export default function GuildPowerupsLevelCard(props) {
  const { guildId, powerup, nextPowerup, index: index2, isScrollingRef } = props;
  const styles2 = useStyles();
  const powerupActiveStatus2 = usePowerupActiveStatus(guildId, powerup);
  const powerupActiveStatus = usePowerupActiveStatus(guildId, nextPowerup);
  const calculatePowerupCardStatus = useCalculatePowerupCardStatus(powerup, powerupActiveStatus2, false);
  const type2 = powerupActiveStatus2.type;
  const INACTIVE = PowerupActiveStatusType.INACTIVE;
  const type = powerupActiveStatus.type;
  const INACTIVE2 = PowerupActiveStatusType.INACTIVE;
  const guildPowerupOnShowMore = useGuildPowerupOnShowMore(guildId, powerup);
  let c19061_1 = guildPowerupOnShowMore;
  const position = index2 === 0 ? LevelCardPosition.START : nextPowerup == null ? LevelCardPosition.END : LevelCardPosition.MIDDLE;
  const active = type2 !== INACTIVE;
  return <GuildPowerupsCard containerStyle={styles2.cardContainer} style={styles2.card} onPress={useCallback(() => {
    if (!isScrollingRef.current) {
      c19061_1();
    }
  }, [isScrollingRef, guildPowerupOnShowMore])} status={calculatePowerupCardStatus}>
    <GuildLevelPowerupHeader position={position} active={active} nextActive={nextPowerup != null ? type !== INACTIVE2 : void 0} />
    <View style={styles2.contentContainer}>
      <Text variant="heading-lg/semibold">{powerup.title}</Text>
      <GuildPowerupLevelBody isActive={active} index={index2} />
      <View style={styles2.footerContainer}>
        <GuildPowerupsCardFooter cost={powerup.cost} status={calculatePowerupCardStatus} />
      </View>
    </View>
  </GuildPowerupsCard>;
};
export { GuildPowerupLevelBody };