// Metro module 8727 (f8728).
import { memo } from "react";
import { View } from "react-native";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { useProductPurchaseState } from "../hooks/useProductPurchaseState";
import useIsVariantColorLight from "../hooks/useIsVariantColorLight";
import { CheckmarkSmallIcon } from "../../../design/components/Icon/native/redesign/generated/CheckmarkSmallIcon";
import { PlusSmallIcon } from "../../../design/components/Icon/native/redesign/generated/PlusSmallIcon";
import { useDefaultVariantIndex } from "../hooks/useDefaultVariantIndex";
import { getIsVariantProduct } from "../utils/CollectiblesProductUtils";
let useStyles, useStyles2, VariantCheckmark, VariantOverflowOption;
const VariantOption = function VariantOption(props) {
  const { variant, zIndex } = props;
  const styles2 = useStyles2(props.isSelected);
  return <View style={[styles2.variantOption, {
    zIndex
  }]}>
    <View style={[styles2.variantOptionInner, {
      backgroundColor: variant.variantValue
    }]}>
      {useProductPurchaseState(variant).isPurchased && <VariantCheckmark variant={variant} />}
    </View>
  </View>;
};
VariantCheckmark = function VariantCheckmark(props) {
  return <CheckmarkSmallIcon color={useIsVariantColorLight(props.variant) ? Module712.colors.BLACK : Module712.colors.WHITE} size="xxs" />;
};
VariantOverflowOption = function VariantOverflowOption(props) {
  const zIndex = props.zIndex;
  const styles2 = useStyles2(props.isSelected);
  return <View style={[styles2.variantOption, {
    zIndex
  }]}>
    <View style={[styles2.variantOptionInner, styles2.variantOverflowInner]}>
      <PlusSmallIcon color={Module712.colors.WHITE} size="xxs" />
    </View>
  </View>;
};
useStyles = createStyles({
  variantsContainer: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    paddingStart: Module712.space.PX_4
  }
});
useStyles2 = createStyles((a0) => ({
  variantOption: {
    marginStart: -Module712.space.PX_4,
    width: 14,
    height: 14,
    borderWidth: 1,
    borderColor: Module712.colors.BACKGROUND_BASE_LOW,
    borderRadius: Module712.radii.round,
    justifyContent: "center",
    alignItems: "center"
  },
  variantOptionInner: {
    width: "100%",
    height: "100%",
    justifyContent: "center",
    alignItems: "center",
    borderRadius: Module712.radii.round,
    borderWidth: a0 ? 1 : 0,
    borderColor: Module712.colors.BUTTON_OUTLINE_PRIMARY_TEXT
  },
  variantOverflowInner: {
    backgroundColor: Module712.colors.ICON_MUTED
  }
}));
const r42 = memo(function CardProductVariants(props) {
  const product = props.product;
  const styles = useStyles();
  const defaultVariantIndex = useDefaultVariantIndex(product);
  if (getIsVariantProduct(product)) {
    const length = product.variants.length;
    const r24 = length > 4 ? 3 : length;
    return <View style={styles.variantsContainer}>
      {product.variants.slice(0, r24).map((item, index) => <VariantOption key={item.variantValue} variant={item} isSelected={index === defaultVariantIndex} zIndex={4 - Math.abs(defaultVariantIndex - index)} />)}
      {r24 !== length && <VariantOverflowOption isSelected={defaultVariantIndex >= 3} zIndex={defaultVariantIndex >= 3 ? 4 : 0} />}
    </View>;
  }
  return null;
});
export default r42;