discord-decomp/modules/quests/native/QuestHomeOrbShopCarousel.tsx

// Metro module 14108 (f14109).
import { useCallback, useState, useRef, useEffect } from "react";
import { View } from "react-native";
import BountyStore from "../BountyStore";
import { QuestsExperimentLocations } from "../QuestConstants";
import Module712 from "../../../_bundle/Module712";
import { COLLECTIBLES_SHOP_CARD_WIDTH } from "../../collectibles/native/CollectiblesShopCardV2";
import { MIN_PRODUCTS_FOR_ORB_SHOP_CAROUSEL, usePopularOrbShopProducts } from "../../collectibles/native/hooks/usePopularOrbShopProducts";
import { BountiesStage1Experiment } from "../experiments/BountiesStage1Experiment";
import { useStateFromStores } from "../../../_bundle/Module589";
import { Heading } from "../../../design/components/Text/native/Text";
import { intl, t } from "../../../intl/index.native";
import SkeletonCard from "../../collectibles/native/SkeletonCard";
import QuestHomeOrbShopRewardCard, { QUEST_HOME_ORB_SHOP_REWARD_CARD_HEIGHT } from "./QuestHomeOrbShopRewardCard";
import { FlashList } from "../../../_bundle/noop_6676";
import { trackQuestHomeOrbShopCarouselViewed, trackQuestHomeOrbShopCarouselScroll } from "../lib/analytics/AnalyticsActions";
import { HorizontalScrollingDirection } from "../lib/analytics/AnalyticsTypes";
import { CollectiblesAnalyticsProvider } from "../../collectibles/CollectiblesAnalyticsContext";
import { LayerScope } from "../../../design/components/Layers/native/LayerScope.native";
let PX_16, PX_12, snapToInterval, ItemSeparator, data, QuestHomeOrbShopCarouselHeading, QuestHomeOrbShopCarouselPlaceholder;
const ListEdgeSpacer = function ListEdgeSpacer() {
  return <View style={{
    width: PX_16
  }} />;
};
ItemSeparator = function ItemSeparator() {
  return <View style={{
    width: PX_12
  }} />;
};
QuestHomeOrbShopCarouselHeading = function QuestHomeOrbShopCarouselHeading(props) {
  return <View style={{
    paddingHorizontal: Module712.space.PX_16,
    marginBottom: Module712.space.PX_16
  }}>
    <Heading variant="text-md/semibold">
      {intl.format(t.CXlsRP, {
        orbAmount: props.orbRewardAmount
      })}
    </Heading>
  </View>;
};
QuestHomeOrbShopCarouselPlaceholder = function QuestHomeOrbShopCarouselPlaceholder() {
  const callback = useCallback(() => <SkeletonCard height={QUEST_HOME_ORB_SHOP_REWARD_CARD_HEIGHT} />, []);
  const callback2 = useCallback((a0) => `placeholder-${a0}`, []);
  return <FlashList horizontal accessibilityRole="list" accessibilityLabel={intl.string(t.hVV8Wi)} accessibilityState={{
    busy: true
  }} data={data} keyExtractor={callback2} renderItem={callback} decelerationRate="fast" snapToInterval={snapToInterval} showsHorizontalScrollIndicator={false} ListHeaderComponent={ListEdgeSpacer} ListFooterComponent={ListEdgeSpacer} ItemSeparatorComponent={ItemSeparator} />;
};
PX_16 = Module712.space.PX_16;
PX_12 = Module712.space.PX_12;
snapToInterval = COLLECTIBLES_SHOP_CARD_WIDTH + PX_12;
data = Array.from({
  length: MIN_PRODUCTS_FOR_ORB_SHOP_CAROUSEL
}, (a0, a1) => a1);
export default function QuestHomeOrbShopCarousel(props) {
  let r45;
  const { orbShopProducts, obtainableOrbRewards, showOrbShopPlaceholderCarousel = false } = props;
  let c20913_2 = showOrbShopPlaceholderCarousel;
  const [state, setState] = useState(0);
  const length = orbShopProducts.length;
  const ref = useRef(false);
  useEffect(() => {
    if (!(ref.current || c20913_2 || orbShopProducts.length === 0)) {
      ref.current = true;
      trackQuestHomeOrbShopCarouselViewed({
        obtainableOrbRewards,
        carouselSize: orbShopProducts.length,
        isPlaceholderCarousel: false
      });
    }
  }, [obtainableOrbRewards, orbShopProducts.length, showOrbShopPlaceholderCarousel]);
  const callback = useCallback((a0) => {
    const carouselPosition = Math.round(a0.nativeEvent.contentOffset.x / snapToInterval);
    if (carouselPosition !== state) {
      trackQuestHomeOrbShopCarouselScroll({
        scrollingDirection: carouselPosition > state ? HorizontalScrollingDirection.RIGHT : HorizontalScrollingDirection.LEFT,
        carouselPosition,
        carouselSize: length
      });
      setState(carouselPosition);
    }
  }, [state, length]);
  const callback2 = useCallback((a0) => <CollectiblesAnalyticsProvider newValue={{
    tilePosition: a0.index,
    pageSection: "quest_home_orb_shop"
  }}>
    <QuestHomeOrbShopRewardCard product={a0.item} />
  </CollectiblesAnalyticsProvider>, []);
  const callback3 = useCallback((a0) => a0.skuId, []);
  const r42 = obtainableOrbRewards <= 0;
  let r43 = null;
  if (!r42) {
    L9: {
      if (!showOrbShopPlaceholderCarousel) {
        const length2 = orbShopProducts.length;
        r45 = null;
        if (length2 === 0) {
          break L9;
        }
      }
      r45 = <View style={{
        marginTop: Module712.space.PX_48
      }}>
        <QuestHomeOrbShopCarouselHeading orbRewardAmount={obtainableOrbRewards} />
        <View>
          <LayerScope>
            {showOrbShopPlaceholderCarousel ? <QuestHomeOrbShopCarouselPlaceholder /> : <FlashList horizontal accessibilityRole="list" accessibilityLabel={intl.string(t.hVV8Wi)} data={orbShopProducts} keyExtractor={callback3} renderItem={callback2} decelerationRate="fast" snapToInterval={snapToInterval} showsHorizontalScrollIndicator={false} ListHeaderComponent={ListEdgeSpacer} ListFooterComponent={ListEdgeSpacer} ItemSeparatorComponent={ItemSeparator} onMomentumScrollEnd={callback} />}
          </LayerScope>
        </View>
      </View>;
    }
    r43 = r45;
  }
  return r43;
};
export function useQuestHomeOrbShopCarouselData({ enabled, variation }) {
  const orbAmount = BountiesStage1Experiment.useConfig({
    location: QuestsExperimentLocations.QUEST_HOME_MOBILE
  }).orbAmount;
  const stateFromStores = useStateFromStores([BountyStore], () => {
    let r0 = 0;
    for (const questHomeBounty of BountyStore.questHomeBounties) {
      if (!BountyStore.isBountyCompleted(questHomeBounty.id)) {
        r0 = r0 + orbAmount;
      }
    }
    return r0;
  });
  const popularOrbShopProducts = usePopularOrbShopProducts({
    enabled,
    variation
  });
  return {
    products: popularOrbShopProducts.products,
    obtainableOrbRewards: stateFromStores,
    showPlaceholderCarousel: popularOrbShopProducts.showPlaceholderCarousel
  };
}