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

// Metro module 15186 (f15187).
import { useEffect, useCallback } from "react";
import { View, StyleSheet } from "react-native";
import GuildBoostingProgressBarPersistedStore from "../../../guild_boosting/GuildBoostingProgressBarPersistedStore";
import GuildStore from "../../../../stores/GuildStore";
import Module712 from "../../../../_bundle/Module712";
import ReanimatedRexport, { useSharedValue, cancelAnimation, useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
import Module4611 from "../../../../_bundle/Module4611";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import { useStateFromStores } from "../../../../_bundle/defaultAreStatesEqual";
import useTotalPossibleBoostCount from "../hooks/useTotalPossibleBoostCount";
import { updateGuildPremiumSubscriptionCount } from "../../../guild_boosting/GuildBoostingProgressBarActionCreators";
import { withTiming } from "../../../../design/animation/reanimated/timing/timing";
import openGuildPowerupsModal from "./utils/openGuildPowerupsModal";
import AnalyticsLocation from "../../../app_analytics/AnalyticsLocation";
import { intl } from "../../../../intl/index.native";
import GuildPowerups_messages from "../GuildPowerups.messages";
import { PressableScale } from "../../../../design/components/experimental/native";
import { Text } from "../../../../design/components/Text/native/Text";
import { ChevronSmallRightIcon } from "../../../../design/components/Icon/native/redesign/generated/ChevronSmallRightIcon";
const r1 = 2 * Module712.space.PX_4;
const _excluded = ["rgba(255, 115, 250, 0.4)", "rgba(255, 115, 250, 0.1)"];
const AnimatedComponent = ReanimatedRexport.createAnimatedComponent(Module4611);
const useStyles = createStyles({
  container: {
    paddingVertical: Module712.space.PX_4,
    paddingHorizontal: Module712.space.PX_16
  },
  track: {
    height: 30,
    borderRadius: Module712.radii.round,
    backgroundColor: Module712.colors.BACKGROUND_MOD_NORMAL,
    justifyContent: "center"
  },
  fillContainer: {
    ...StyleSheet.absoluteFillObject,
    padding: 2
  },
  fill: {
    height: "100%",
    minWidth: 26,
    borderRadius: Module712.radii.round,
    borderWidth: 1,
    borderColor: "rgba(255, 115, 250, 0.2)",
    overflow: "hidden"
  },
  fillShadow: {
    shadowColor: "rgba(0, 0, 0, 0.14)",
    shadowOffset: {
      width: 0,
      height: 1
    },
    shadowOpacity: 1,
    shadowRadius: 4,
    elevation: 2
  },
  textContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    paddingHorizontal: Module712.space.PX_12
  },
  rightContent: {
    flexDirection: "row",
    alignItems: "center"
  }
});
const __initData = {
  code: "function GuildPowerupsProgressBarTsx1(){const{animatedFillPercent,animatedFillOpacity}=this.__closure;return{width:animatedFillPercent.get()+\"%\",opacity:animatedFillOpacity.get()};}"
};
export default function GuildPowerupsProgressBar(props) {
  let stateFromStores, c21745_2, c21745_3, sharedValue, sharedValue2;
  const guildId = props.guildId;
  stateFromStores = void 0;
  c21745_2 = void 0;
  c21745_3 = void 0;
  sharedValue = void 0;
  sharedValue2 = void 0;
  const styles = useStyles();
  const stateFromStores2 = useStateFromStores([GuildStore], () => GuildStore.getGuild(guildId), [guildId]);
  const totalPossibleBoostCount = useTotalPossibleBoostCount(stateFromStores2);
  stateFromStores = useStateFromStores([GuildBoostingProgressBarPersistedStore], () => {
    let r7 = GuildBoostingProgressBarPersistedStore.getCountForGuild(guildId);
    if (r7 == null) {
      r7 = 0;
    }
    return r7;
  }, [guildId]);
  let r14 = stateFromStores2?.premiumSubscriberCount;
  if (r14 == null) {
    r14 = 0;
  }
  c21745_2 = r14;
  useEffect(() => {
    if (stateFromStores !== c21745_2) {
      updateGuildPremiumSubscriptionCount(guildId, c21745_2);
    }
  }, [guildId, stateFromStores, r14]);
  const r46 = totalPossibleBoostCount > 0 ? Math.min(stateFromStores / totalPossibleBoostCount * 100, 100) : 0;
  c21745_3 = r46;
  sharedValue = useSharedValue(r46);
  sharedValue2 = useSharedValue(r46 > 0 ? 1 : 0);
  useEffect(() => {
    sharedValue.set(withTiming(c21745_3, {
      duration: 500
    }));
    sharedValue2.set(withTiming(c21745_3 > 0 ? 1 : 0, {
      duration: 500
    }));
    return () => {
      cancelAnimation(sharedValue);
      cancelAnimation(sharedValue2);
    };
  }, [sharedValue, sharedValue2, r46]);
  const O = () => ({
    width: `${sharedValue.get()}%`,
    opacity: sharedValue2.get()
  });
  O.__closure = {
    animatedFillPercent: sharedValue,
    animatedFillOpacity: sharedValue2
  };
  O.__workletHash = 6718232104000;
  O.__initData = __initData;
  const animatedStyle = useAnimatedStyle(O);
  const callback = useCallback(() => {
    openGuildPowerupsModal({
      guildId,
      analyticsLocation: AnalyticsLocation.GUILD_BOOSTING_SIDEBAR_DISPLAY
    });
  }, [guildId]);
  const r82 = stateFromStores >= totalPossibleBoostCount ? intl.formatToPlainString(GuildPowerups_messages["Ehpq+7"], {
    appliedBoostCount: stateFromStores
  }) : intl.formatToPlainString(GuildPowerups_messages["/rbPDs"], {
    appliedBoostCount: stateFromStores,
    maxBoostCount: totalPossibleBoostCount
  });
  return <PressableScale accessibilityRole="button" accessibilityLabel={intl.string(GuildPowerups_messages.NI6Ihe)} onPress={callback} style={styles.container}>
    <View style={styles.track}>
      <View style={styles.fillContainer}>
        <AnimatedComponent style={[styles.fill, styles.fillShadow, animatedStyle]} colors={_excluded} useAngle angle={270} />
      </View>
      <View style={styles.textContainer}>
        <Text variant="text-xs/semibold" color="text-default">
          {r14 >= totalPossibleBoostCount ? `${intl.string(GuildPowerups_messages.NI6Ihe)} 🎉` : intl.string(GuildPowerups_messages.NI6Ihe)}
        </Text>
        <View style={styles.rightContent}>
          <Text variant="text-xs/semibold" color="text-default" style={{
            opacity: 0.7
          }}>{r82}</Text>
          <ChevronSmallRightIcon size="sm" color={Module712.colors.TEXT_DEFAULT} />
        </View>
      </View>
    </View>
  </PressableScale>;
};
export const BOOST_PROGRESS_BAR_HEIGHT = r1 + 30;