// Metro module 14625 (f14626).
import { useMemo } from "react";
import { Image as Image2, View } from "react-native";
import AccessibilityStore from "../../a11y/AccessibilityStore";
import ThemeStore from "../../user_settings/ThemeStore";
import ConsentStore from "../../../stores/ConsentStore";
import { CollectiblesMobileShopScreen } from "../CollectiblesShopConstants";
import { Consents } from "../../../Constants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { useStateFromStores } from "../../../_bundle/Module589";
import { isThemeDark } from "../../../design/shared";
import useGetProductsFromSkus from "../hooks/useGetProductsFromSkus";
import { ShopHomeSortType } from "../../../_bundle/Module14626";
import { useFilteredAndSortedProducts } from "./hooks/useFilteredAndSortedProducts";
import { openCollectiblesShopMobile } from "../CollectiblesActionCreators";
import AnalyticsLocation from "../../app_analytics/AnalyticsLocation";
import useAnalyticsLocations, { AnalyticsLocationProvider } from "../../app_analytics/useAnalyticsLocations";
import { intl, t } from "../../../intl/index.native";
import { Heading, Text } from "../../../design/components/Text/native/Text";
import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
import { CircleInformationIcon } from "../../../design/components/Icon/native/redesign/generated/CircleInformationIcon";
import { Button } from "../../../design/components/Button/native/Button.native";
import FeedProductList from "./FeedProductList";
import Module14628 from "../../../_bundle/Module14628";
import { isAndroid } from "../../../utils/PlatformUtils";
import Module6208 from "../../../_bundle/Module6208";
import Module14629 from "../../../_bundle/Module14629";
import FastImage from "../../../components_native/common/FastImage";
import * as _Module14630 from "../../../_bundle/Module14630";
import * as _Module14631 from "../../../_bundle/Module14631";
const useStyles = createStyles({
  feedContainer: {
    display: "flex",
    flexDirection: "column",
    height: "100%",
    gap: Module712.space.PX_16
  },
  feedHeader: {
    display: "flex",
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent: "space-between",
    alignItems: "center",
    gap: Module712.space.PX_12,
    paddingHorizontal: Module712.space.PX_16
  },
  feedTitle: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    flexShrink: 1,
    gap: Module712.space.PX_8
  },
  feedFooter: {
    display: "flex",
    gap: Module712.space.PX_16,
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center"
  },
  feedFooterImage: {
    width: "100%",
    resizeMode: "cover"
  },
  feedFooterOrbImage: {
    width: "100%",
    alignSelf: "center",
    resizeMode: "contain",
    height: 130
  }
});
export default ({ feedBlock, screen, preferVCPrice, disableBundleStaticBackground }) => {
  let r171, props;
  let stateFromStores, c21264_2;
  stateFromStores = void 0;
  c21264_2 = void 0;
  const styles = useStyles();
  const stateFromStores2 = useStateFromStores([ThemeStore], () => isThemeDark(ThemeStore.theme));
  stateFromStores = useStateFromStores([ConsentStore], () => ConsentStore.hasConsented(Consents.PERSONALIZATION));
  const getProductsFromSkus = useGetProductsFromSkus();
  c21264_2 = getProductsFromSkus;
  const memo = useMemo(() => {
    const sortedSkuIds = feedBlock.sortedSkuIds;
    let r4 = sortedSkuIds == null ? void 0 : sortedSkuIds[ShopHomeSortType.RECOMMENDED];
    if (r4 == null) {
      r4 = [];
    }
    const sortedSkuIds2 = feedBlock.sortedSkuIds;
    let r17 = sortedSkuIds2 == null ? void 0 : sortedSkuIds2[ShopHomeSortType.POPULAR];
    if (r17 == null) {
      r17 = [];
    }
    let isPersonalized = stateFromStores;
    if (stateFromStores) {
      isPersonalized = r4.length > 0;
    }
    if (isPersonalized) {
      r17 = r4;
    }
    return {
      feedProducts: c21264_2(r17),
      isPersonalized
    };
  }, [feedBlock.sortedSkuIds, getProductsFromSkus, stateFromStores]);
  const feedProducts = memo.feedProducts;
  let isPersonalized = memo.isPersonalized;
  const filteredAndSortedProducts = useFilteredAndSortedProducts({
    products: feedProducts,
    maxProducts: 36,
    screen
  });
  const ORBS = CollectiblesMobileShopScreen.ORBS;
  const stateFromStores3 = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
  const analyticsLocations = useAnalyticsLocations(AnalyticsLocation.COLLECTIBLES_SHOP_POPULAR_PICKS).analyticsLocations;
  const accessibilityLabel = isPersonalized ? intl.string(t.NSv5KV) : intl.string(t.ivaAA7);
  const r92 = [<Heading variant="heading-lg/semibold">{accessibilityLabel}</Heading>, ,];
  if (isPersonalized) {
    isPersonalized = <PressableOpacity onPress={() => ActionSheetActionCreators.openLazy(import("./PersonalizationDisclaimerActionSheet"), "PersonalizationDisclaimerActionSheet", {})} hitSlop={14} aria-label={intl.string(t.hvVgAZ)}>
      <CircleInformationIcon size="xs" />
    </PressableOpacity>;
  }
  const goToShopAll = function goToShopAll() {
    openCollectiblesShopMobile({
      analyticsLocations: [AnalyticsLocation.COLLECTIBLES_MOBILE_SHOP_ALL_BUTTON],
      analyticsSource: AnalyticsLocation.COLLECTIBLES_MOBILE_SHOP_ALL_BUTTON,
      screen: CollectiblesMobileShopScreen.SHOP_ALL
    });
  };
  const r1 = screen === ORBS;
  r92[1] = isPersonalized;
  const r126 = [<View style={styles.feedHeader}>
    <View style={styles.feedTitle}>{r92}</View>
    {r1 ? !r1 : <Button onPress={goToShopAll} text={intl.string(t.xFcotU)} variant="primary" size="sm" />}
  </View>, <FeedProductList products={filteredAndSortedProducts} loadingCardsNum={36} preferVCPrice={preferVCPrice} accessibilityLabel={accessibilityLabel} disableBundleStaticBackground={disableBundleStaticBackground} />, ,];
  const r147 = [<Text variant="heading-lg/bold" accessibilityRole="header">
    {intl.string(t.Yr70c4)}
  </Text>, <Button onPress={goToShopAll} text={intl.string(t.AfrvRD)} variant="primary" size="md" />, ,];
  if (r1) {
    r171 = stateFromStores3 ? <Image2 source={{
      uri: Module14628
    }} style={styles.feedFooterOrbImage} accessibilityElementsHidden importantForAccessibility="no-hide-descendants" /> : isAndroid() ? <Module6208 url={Module14629} autoplay style={styles.feedFooterOrbImage} accessibilityElementsHidden importantForAccessibility="no-hide-descendants" /> : <FastImage source={{
      uri: Module14629
    }} enableAnimation resizeMode="contain" style={styles.feedFooterOrbImage} accessibilityElementsHidden importantForAccessibility="no-hide-descendants" />;
  } else {
    const r163 = {
      source: null,
      style: null,
      accessibilityElementsHidden: true,
      importantForAccessibility: "no-hide-descendants"
    };
    if (stateFromStores2) {
      r163.source = _Module14630;
      r163.style = styles.feedFooterImage;
      props = r163;
    } else {
      r163.source = _Module14631;
      r163.style = styles.feedFooterImage;
      props = r163;
    }
    r171 = <Image2 {...props} />;
  }
  r147[2] = r171;
  r126[2] = <View style={styles.feedFooter}>{r147}</View>;
  return <AnalyticsLocationProvider value={analyticsLocations}>
    <View style={styles.feedContainer}>{r126}</View>
  </AnalyticsLocationProvider>;
};