discord-decomp/modules/collectibles/native/FractionalNitroCollectedActionSheet.tsx

// Metro module 11907 (f11908).
import { useMemo, useCallback } from "react";
import { ActivityIndicator, View } from "react-native";
import { HelpdeskArticles } from "../../../Constants";
import { FRACTIONAL_PREMIUM_SKU_INTERVAL_COUNTS, PremiumTypes } from "../../premium/PremiumConstants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { FractionalNitroCoinIllustration, FRACTIONAL_NITRO_COIN_SIZE } from "./FractionalNitroCoinIllustration";
import FastImage from "../../../components_native/common/FastImage";
import Module11908 from "../../../_bundle/Module11908";
import useTheme from "../../../hooks/useTheme";
import { useFetchFractionalPremiumInfo } from "../utils/CollectiblesUtils";
import { isThemeDark } from "../../../design/shared";
import Module6317 from "../../../_bundle/Module6317";
import Module6318 from "../../../_bundle/Module6318";
import { Text } from "../../../design/components/Text/native/Text";
import { intl, t } from "../../../intl/index.native";
import HelpdeskUtils from "../../../utils/HelpdeskUtils";
import Linking from "../../../lib/native/Linking";
import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
import PremiumPlanActionSheetHeader from "../../premium/native/PremiumPlanActionSheetHeader";
import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
import { CircleQuestionIcon } from "../../../design/components/Icon/native/redesign/generated/CircleQuestionIcon";
import { Button } from "../../../design/components/Button/native/Button.native";
import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
import { ActionSheetHeaderBar } from "../../../design/components/Sheet/native/ActionSheetHeaderBar.native";
let useStyles;
const NitroAcquiredHeader = function NitroAcquiredHeader(props) {
  const skuId2 = props.skuId;
  const styles2 = useStyles();
  return <View style={styles2.header}>
    <FastImage source={Module11908} />
    <View style={styles2.fractionNitroIcon}>
      <FractionalNitroCoinIllustration skuId={skuId2} width={FRACTIONAL_NITRO_COIN_SIZE.COLLECTED_SHEET} height={FRACTIONAL_NITRO_COIN_SIZE.COLLECTED_SHEET} />
    </View>
  </View>;
};
useStyles = createStyles({
  body: {
    flex: 1,
    padding: Module712.space.PX_16
  },
  content: {
    flex: 1,
    gap: Module712.space.PX_16,
    alignItems: "center"
  },
  buttonContainer: {
    flex: 1,
    gap: Module712.space.PX_16,
    alignSelf: "stretch"
  },
  description: {
    textAlign: "center"
  },
  header: {
    height: 112,
    justifyContent: "center",
    alignItems: "center",
    overflow: "hidden"
  },
  fractionNitroIcon: {
    width: FRACTIONAL_NITRO_COIN_SIZE.COLLECTED_SHEET,
    height: FRACTIONAL_NITRO_COIN_SIZE.COLLECTED_SHEET,
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: [{
      translateX: -FRACTIONAL_NITRO_COIN_SIZE.COLLECTED_SHEET / 2
    }, {
      translateY: -FRACTIONAL_NITRO_COIN_SIZE.COLLECTED_SHEET / 2
    }]
  },
  questionIconContainer: {
    position: "absolute",
    right: Module712.space.PX_16,
    top: Module712.space.PX_16,
    width: 32,
    height: 32,
    backgroundColor: Module712.colors.CONTROL_OVERLAY_SECONDARY_BACKGROUND_DEFAULT,
    justifyContent: "center",
    borderRadius: Module712.radii.lg,
    alignItems: "center"
  },
  questionIcon: {
    width: 18,
    height: 18
  }
});
export default function FractionalNitroCollectedActionSheet(props) {
  let r115, props2;
  const { skuId, consumed, onPressExplorePerks, onPressViewCredits } = props;
  const styles = useStyles();
  const theme = useTheme();
  let c19264_3 = theme;
  const fetchFractionalPremiumInfo = useFetchFractionalPremiumInfo();
  const { isLoading, isFractionalPremiumActive, expiresAt } = fetchFractionalPremiumInfo;
  const memo = useMemo(() => consumed ? <FastImage source={isThemeDark(c19264_3) ? Module6317 : Module6318} /> : <Text variant="heading-lg/bold" color="text-default">
    {intl.string(t.g5W1g8)}
  </Text>, [consumed, theme]);
  const memo2 = useMemo(() => {
    let props;
    const r15 = FRACTIONAL_PREMIUM_SKU_INTERVAL_COUNTS[skuId];
    let days = r15 == null ? void 0 : r15[1];
    if (days == null) {
      days = 3;
    }
    const duration = intl.formatToPlainString(t.Cz1G97, {
      days
    });
    const r30 = {
      variant: "text-md/normal",
      color: "text-default",
      style: styles.description,
      children: null
    };
    if (consumed) {
      r30.children = intl.format(t["93PGOI"], {
        duration,
        expirationDate: expiresAt
      });
      props = r30;
    } else {
      r30.children = isFractionalPremiumActive ? intl.string(t.fBmhE9) : intl.format(t["8fyBPf"], {
        duration
      });
      props = r30;
    }
    return <Text {...props} />;
  }, [skuId, consumed, expiresAt, isFractionalPremiumActive, styles.description]);
  const r72 = [<>
    {consumed ? <PremiumPlanActionSheetHeader premiumType={PremiumTypes.TIER_2} /> : <NitroAcquiredHeader skuId={skuId} />}
    <PressableOpacity style={styles.questionIconContainer} onPress={useCallback(() => {
      Linking.openURL(HelpdeskUtils.getArticleURL(HelpdeskArticles.FRACTIONAL_PREMIUM_ABOUT));
    }, [])}>
      <CircleQuestionIcon style={styles.questionIcon} color={Module712.colors.WHITE} />
    </PressableOpacity>
  </>, , ,];
  if (isLoading) {
    r115 = <ActivityIndicator size="large" />;
  } else {
    const r78 = [memo, memo2, ,];
    const r84 = {
      size: "lg",
      text: null,
      onPress: null
    };
    if (consumed) {
      r84.text = intl.string(t.ERKK6v);
      r84.onPress = onPressExplorePerks;
      props2 = r84;
    } else {
      r84.text = intl.string(t["Jr6N+s"]);
      r84.onPress = onPressViewCredits;
      props2 = r84;
    }
    r78[2] = <View style={styles.buttonContainer}>
      <Button {...props2} />
      <Button size="lg" variant="secondary" text={intl.string(t.TkTvBz)} onPress={() => ActionSheetActionCreators.hideActionSheet()} />
    </View>;
    r115 = <View style={styles.content}>{r78}</View>;
  }
  r72[1] = <View style={styles.body}>{r115}</View>;
  r72[2] = <ActionSheetHeaderBar variant="floating" />;
  return <BottomSheet handleDisabled>{r72}</BottomSheet>;
};