// Metro module 14633 (f14634).
import { useMemo, useCallback } from "react";
import { Image as Image2, View } from "react-native";
import CollectiblesCategoryStore from "../CollectiblesCategoryStore";
import { CollectiblesMobileShopScreen } from "../CollectiblesShopConstants";
import { UserSettingsSections } from "../../../Constants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { useNavigation } from "../../../design/components/Navigator/native/useNavigation.native";
import { useCollectiblesAnalyticsContext, CollectiblesAnalyticsProvider } from "../CollectiblesAnalyticsContext";
import { useCollectiblesCoachmarkScrollDismissContext } from "./CollectiblesCoachmarkScrollDismissContext";
import useAnalyticsLocations, { AnalyticsLocationProvider } from "../../app_analytics/useAnalyticsLocations";
import AnalyticsLocation from "../../app_analytics/AnalyticsLocation";
import { useStateFromStores } from "../../../_bundle/Module589";
import useGetProductsFromSkus from "../hooks/useGetProductsFromSkus";
import { useFilteredAndSortedProducts } from "./hooks/useFilteredAndSortedProducts";
import { openCollectiblesShopMobile } from "../CollectiblesActionCreators";
import CollectiblesShopCardV2, { COLLECTIBLES_SHOP_CARD_WIDTH } from "./CollectiblesShopCardV2";
import { Heading } from "../../../design/components/Text/native/Text";
import { Button } from "../../../design/components/Button/native/Button.native";
import { intl, t } from "../../../intl/index.native";
import { LayerScope } from "../../../design/components/Layers/native/LayerScope.native";
import { FlashList } from "../../../_bundle/noop_6676";
let useStyles, ListItemSeparator;
const ListEdgeSpacer = function ListEdgeSpacer() {
  return <View style={useStyles().listEdgeSpacer} />;
};
ListItemSeparator = function ListItemSeparator() {
  return <View style={useStyles().listItemSeparator} />;
};
useStyles = createStyles({
  container: {
    width: "100%",
    paddingTop: Module712.space.PX_16,
    paddingBottom: Module712.space.PX_16
  },
  containerWithBackground: {
    marginTop: Module712.space.PX_24,
    paddingTop: Module712.space.PX_24,
    paddingBottom: Module712.space.PX_24,
    overflow: "hidden"
  },
  backgroundImage: {
    position: "absolute",
    top: 0,
    left: 0,
    bottom: 0,
    minWidth: "100%",
    aspectRatio: 2.5,
    resizeMode: "cover"
  },
  header: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    gap: Module712.space.PX_12,
    paddingHorizontal: Module712.space.PX_16,
    marginBottom: Module712.space.PX_16,
    zIndex: 1
  },
  headingWrapper: {
    flexShrink: 1
  },
  listEdgeSpacer: {
    width: Module712.space.PX_16
  },
  listItemSeparator: {
    width: Module712.space.PX_12
  }
});
export default ({ block, preferVCPrice }) => {
  let c21266_5;
  c21266_5 = void 0;
  const styles = useStyles();
  const navigation = useNavigation();
  const collectiblesAnalyticsContext = useCollectiblesAnalyticsContext();
  const handleDismissCoachmarkOnScroll = useCollectiblesCoachmarkScrollDismissContext().handleDismissCoachmarkOnScroll;
  const analyticsLocations = useAnalyticsLocations(AnalyticsLocation.COLLECTIBLES_SHOP_SHELF).analyticsLocations;
  const stateFromStores = useStateFromStores([CollectiblesCategoryStore], () => block.categorySkuId != null ? CollectiblesCategoryStore.getCategory(block.categorySkuId) : void 0);
  const getProductsFromSkus = useGetProductsFromSkus();
  c21266_5 = getProductsFromSkus;
  const filteredAndSortedProducts = useFilteredAndSortedProducts({
    products: useMemo(() => c21266_5(block.rankedSkuIds), [block.rankedSkuIds, getProductsFromSkus])
  });
  const callback2 = useCallback(() => {
    if (stateFromStores != null) {
      if (stateFromStores.isOrbsExclusive) {
        openCollectiblesShopMobile({
          analyticsLocations: [AnalyticsLocation.COLLECTIBLES_SHOP],
          analyticsSource: AnalyticsLocation.COLLECTIBLES_SHOP,
          screen: CollectiblesMobileShopScreen.ORBS
        });
      } else {
        navigation.navigate(UserSettingsSections.COLLECTIBLES_SHOP_VIEW_ALL_CATEGORY_ITEMS, {
          category: stateFromStores,
          analyticsContext: collectiblesAnalyticsContext
        });
      }
    }
  }, [stateFromStores, navigation, collectiblesAnalyticsContext]);
  const callback3 = useCallback((a0) => <CollectiblesAnalyticsProvider newValue={{
    tilePosition: a0.index,
    pageSection: block.name
  }}>
    <CollectiblesShopCardV2 product={a0.item} preferVCPrice={preferVCPrice} />
  </CollectiblesAnalyticsProvider>, [block.name, preferVCPrice]);
  const callback = useCallback((a0) => a0.skuId, []);
  if (filteredAndSortedProducts.length === 0) {
    return null;
  }
  const r3 = block.mobileBackgroundImage != null;
  const style = [styles.container, r3 ? styles.containerWithBackground : r3];
  const r91 = [r3 && block.mobileBackgroundImage != null && <Image2 style={styles.backgroundImage} source={{
    uri: block.mobileBackgroundImage
  }} />, , ,];
  let style2 = void 0;
  if (r3) {
    let titleColor = block.titleColor;
    if (titleColor == null) {
      titleColor = "#ffffff";
    }
    style2 = {
      color: titleColor
    };
  }
  r91[1] = <View style={styles.header}>
    <View style={styles.headingWrapper}>
      <Heading variant="text-md/semibold" style={style2}>{block.name}</Heading>
    </View>
    {block.showButton && stateFromStores != null && <Button variant={r3 ? "primary-overlay" : "secondary"} size="sm" shrink grow={false} text={intl.string(t.xFcotU)} onPress={callback2} />}
  </View>;
  r91[2] = <LayerScope>
    <FlashList horizontal accessibilityRole="list" accessibilityLabel={block.name} data={filteredAndSortedProducts} keyExtractor={callback} onScroll={handleDismissCoachmarkOnScroll} renderItem={callback3} decelerationRate="fast" snapToInterval={COLLECTIBLES_SHOP_CARD_WIDTH + Module712.space.PX_12} showsHorizontalScrollIndicator={false} ListHeaderComponent={ListEdgeSpacer} ListFooterComponent={ListEdgeSpacer} ItemSeparatorComponent={ListItemSeparator} />
  </LayerScope>;
  return <AnalyticsLocationProvider value={analyticsLocations}>
    <View style={style}>{r91}</View>
  </AnalyticsLocationProvider>;
};