// Metro module 14621 (f14622).
import { useMemo } from "react";
import { ScrollView, View } from "react-native";
import CollectiblesCategoryStore from "../CollectiblesCategoryStore";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import CollectiblesShopCardV2, { COLLECTIBLES_SHOP_CARD_GAP } from "./CollectiblesShopCardV2";
import { CollectiblesAnalyticsProvider } from "../CollectiblesAnalyticsContext";
import { useCardLayout } from "./hooks/useCardLayout";
import Module12 from "../../../_bundle/Module12";
let useStyles;
const ShopCardGridItem = function ShopCardGridItem(props) {
  const { product, index, cardWidth: cardWidth2, preferVCPrice: preferVCPrice2, unpublishedAt, disableBundleStaticBackground: disableBundleStaticBackground2, muteBundleStaticBackground: muteBundleStaticBackground2 } = props;
  return <CollectiblesAnalyticsProvider newValue={useMemo(() => ({
    tilePosition: index
  }), [index])}>
    <CollectiblesShopCardV2 unpublishedAt={unpublishedAt} product={product} cardWidth={cardWidth2} preferVCPrice={preferVCPrice2} disableBundleStaticBackground={disableBundleStaticBackground2} muteBundleStaticBackground={muteBundleStaticBackground2} />
  </CollectiblesAnalyticsProvider>;
};
useStyles = createStyles({
  rowContainer: {
    justifyContent: "center",
    flexDirection: "row",
    gap: COLLECTIBLES_SHOP_CARD_GAP
  }
});
export default function CollectiblesShopCardsGrid(props) {
  const { products, accessibilityLabel, category, preferVCPrice, scrollEnabled = false, onScroll, paddingTop, paddingBottom, disableBundleStaticBackground, muteBundleStaticBackground } = props;
  const styles = useStyles();
  const cardLayout = useCardLayout();
  const { columns, cardWidth } = cardLayout;
  return <ScrollView accessibilityLabel={accessibilityLabel} accessibilityRole="list" scrollEnabled={scrollEnabled} showsVerticalScrollIndicator={false} onScroll={onScroll} contentContainerStyle={{
    gap: COLLECTIBLES_SHOP_CARD_GAP,
    paddingTop,
    paddingBottom
  }}>
    {useMemo(() => Module12.chunk(products, columns), [products, columns]).map((a0, a1) => {
      let c27784_0 = a1;
      return <View key={a1} style={styles.rowContainer}>
        {a0.map((item, a1) => {
          let r8 = category;
          if (category == null) {
            r8 = CollectiblesCategoryStore.getCategoryForProduct(item.skuId);
          }
          return <ShopCardGridItem key={item.skuId} product={item} index={c27784_0 * columns + a1} cardWidth={cardWidth} unpublishedAt={r8?.unpublishedAt} preferVCPrice={preferVCPrice} disableBundleStaticBackground={disableBundleStaticBackground} muteBundleStaticBackground={muteBundleStaticBackground} />;
        })}
      </View>;
    })}
  </ScrollView>;
};