// Metro module 8742 (f8743).
import { useCallback, useLayoutEffect, useMemo, useState, memo } from "react";
import { Pressable, ScrollView, View } from "react-native";
import { ShopCtaEnum } from "../CollectiblesShopConstants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import CollectiblesItemMiniPreview from "./CollectiblesItemMiniPreview";
import { GestureDetector, Gesture } from "../../../_bundle/Module5273";
import { intl, t } from "../../../intl/index.native";
import { getCollectibleTypeLabel } from "../CollectiblesUtils";
import { IndividualProductPreview } from "./IndividualProductPreview";
import { Text } from "../../../design/components/Text/native/Text";
let Component2;
const useStyles = createStyles({
  previewContainer: {
    paddingTop: Module712.space.PX_16,
    paddingBottom: Module712.space.PX_16,
    gap: Module712.space.PX_16
  },
  bundleThumbnail: {
    width: 56,
    height: 56,
    borderRadius: Module712.radii.sm,
    backgroundColor: Module712.colors.BACKGROUND_MOD_SUBTLE,
    overflow: "hidden"
  },
  selectedRing: {
    position: "absolute",
    top: -2,
    left: -2,
    right: -2,
    bottom: -2,
    borderRadius: Module712.radii.sm + 2,
    borderWidth: 2,
    borderColor: Module712.colors.BORDER_STRONG
  },
  bundleThumbnailRow: {
    flexDirection: "row",
    gap: Module712.space.PX_12,
    paddingVertical: Module712.space.PX_4,
    paddingHorizontal: 2
  },
  bundleContainer: {
    paddingHorizontal: Module712.space.PX_16,
    gap: Module712.space.PX_16
  },
  bundleInfoContainer: {
    gap: Module712.space.PX_8
  }
});
let Component = memo(function(a0) {
  const { item, index } = a0;
  let isSelected = a0.isSelected;
  const { setSelected, label, trackedSkuId, onTrackPress } = a0;
  const callback = useCallback(() => {
    if (onTrackPress != null) {
      onTrackPress(ShopCtaEnum.BUNDLE_VIEW_PRODUCT, trackedSkuId);
    }
    setSelected(index);
  }, [setSelected, index, onTrackPress, trackedSkuId]);
  const styles = useStyles();
  const props = {
    role: "radio",
    "aria-checked": isSelected,
    onPress: callback,
    "aria-label": label,
    children: null
  };
  const children = [<View style={styles.bundleThumbnail}>
    <CollectiblesItemMiniPreview item={item} size={56} />
  </View>, ,];
  if (isSelected) {
    isSelected = <View style={styles.selectedRing} pointerEvents="none" />;
  }
  children[1] = isSelected;
  props.children = children;
  return <Pressable {...props} />;
});
Component2 = memo(function({ items, bundledProducts, activeIndex, onSelect, onTrackPress: onTrackPress2 }) {
  const styles = useStyles();
  return <GestureDetector gesture={useMemo(() => Gesture.Native().disallowInterruption(true), [])}>
    <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.bundleThumbnailRow} role="radiogroup" aria-label={intl.string(t.cTbdgu)}>
      {items.map((a0, a1) => {
        let label = bundledProducts == null ? void 0 : bundledProducts[a1]?.name;
        if (label == null) {
          label = a0.skuId;
        }
        let trackedSkuId2 = bundledProducts == null ? void 0 : bundledProducts[a1]?.skuId;
        if (trackedSkuId2 == null) {
          trackedSkuId2 = a0.skuId;
        }
        return <Component key={a0.skuId} item={a0} index={a1} isSelected={a1 === activeIndex} setSelected={onSelect} label={label} trackedSkuId={trackedSkuId2} onTrackPress={onTrackPress2} />;
      })}
    </ScrollView>
  </GestureDetector>;
});
export default function BundleProductDetailsActionSheetPreview(props) {
  const { product, width, handlePreviewPress, onTrackPress: onTrackPress3, onActiveItemChange } = props;
  const styles = useStyles();
  let [activeIndex2, onSelect2] = useState(0);
  const [state, setState] = useState(product.skuId);
  const { items, bundledProducts: bundledProducts2 } = product;
  if (product.skuId !== state) {
    setState(product.skuId);
    onSelect2(0);
    activeIndex2 = 0;
  }
  const r43 = items[activeIndex2];
  let c16761_1 = r43;
  useLayoutEffect(() => {
    if (onActiveItemChange != null) {
      onActiveItemChange(c16761_1);
    }
  }, [r43, onActiveItemChange]);
  let r16 = (bundledProducts2 == null ? void 0 : bundledProducts2[activeIndex2])?.name;
  if (r16 == null) {
    r16 = r43.skuId;
  }
  const collectibleTypeLabel = getCollectibleTypeLabel(r43.type);
  const r66 = [<IndividualProductPreview product={useMemo(() => ({
    skuId: c16761_1.skuId,
    type: c16761_1.type,
    items: [c16761_1]
  }), [r43])} width={width} handlePreviewPress={handlePreviewPress} onTrackPress={onTrackPress3} />, ,];
  r66[1] = <View style={styles.bundleContainer}>
    <View style={styles.bundleInfoContainer}>
      <Text variant="heading-xl/bold">{product.name}</Text>
      <Text variant="text-sm/medium" color="text-default">
        {intl.formatToPlainString(t["/0Yndu"], {
          num: items.length
        })}
      </Text>
    </View>
    <View style={styles.bundleInfoContainer}>
      <Component2 items={items} bundledProducts={bundledProducts2} activeIndex={activeIndex2} onSelect={onSelect2} onTrackPress={onTrackPress3} />
      <Text variant="text-sm/medium" color="text-default">
        {r16}
        {collectibleTypeLabel != null && <Text variant="text-sm/medium" color="text-muted">
          {` - ${collectibleTypeLabel}`}
        </Text>}
      </Text>
    </View>
  </View>;
  return <View style={styles.previewContainer}>{r66}</View>;
};