// Metro module 8763 (f8764).
import { View } from "react-native";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { useProductPurchaseState } from "../hooks/useProductPurchaseState";
import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
import { intl, t } from "../../../intl/index.native";
import useIsVariantColorLight from "../hooks/useIsVariantColorLight";
import { CheckmarkSmallIcon } from "../../../design/components/Icon/native/redesign/generated/CheckmarkSmallIcon";
import { getIsVariantProduct } from "../utils/CollectiblesProductUtils";
import { Text } from "../../../design/components/Text/native/Text";
let useStyles, useStyles2, VariantCheckmark;
const VariantOption = function VariantOption(props) {
  const { variant, isSelected, onSelect: onSelect2 } = props;
  const styles2 = useStyles2(isSelected);
  let isPurchased = useProductPurchaseState(variant).isPurchased;
  const accessibilityLabel = isPurchased ? intl.formatToPlainString(t["SfQB4+"], {
    variantLabel: variant.name
  }) : variant.name;
  if (isPurchased) {
    isPurchased = <VariantCheckmark variant={variant} />;
  }
  return <PressableOpacity accessibilityRole="button" accessibilityLabel={accessibilityLabel} accessibilityState={{
    selected: isSelected
  }} onPress={onSelect2} style={styles2.variantOption}>
    <View style={[styles2.variantOptionInner, {
      backgroundColor: variant.variantValue
    }]}>{isPurchased}</View>
  </PressableOpacity>;
};
VariantCheckmark = function VariantCheckmark(props) {
  return <CheckmarkSmallIcon color={useIsVariantColorLight(props.variant) ? Module712.colors.BLACK : Module712.colors.WHITE} size="md" />;
};
useStyles = createStyles({
  container: {
    flex: 1,
    display: "flex",
    flexDirection: "column",
    marginTop: Module712.space.PX_16,
    marginHorizontal: Module712.space.PX_16,
    gap: Module712.space.PX_8
  },
  headerRow: {
    flexDirection: "row",
    alignItems: "center",
    gap: Module712.space.PX_12
  },
  variantsContainer: {
    display: "flex",
    flexWrap: "wrap",
    flexDirection: "row",
    alignItems: "center",
    gap: Module712.space.PX_12
  },
  text: {
    flexGrow: 1,
    flexShrink: 1,
    minWidth: 28
  }
});
useStyles2 = createStyles((a0) => ({
  variantOption: {
    width: 28,
    height: 28,
    borderRadius: Module712.radii.round,
    justifyContent: "center",
    alignItems: "center",
    borderWidth: 1,
    borderColor: a0 ? Module712.colors.BUTTON_OUTLINE_PRIMARY_TEXT : Module712.colors.BORDER_STRONG
  },
  variantOptionInner: {
    width: "100%",
    height: "100%",
    justifyContent: "center",
    alignItems: "center",
    borderRadius: Module712.radii.round,
    borderWidth: 1,
    borderColor: Module712.colors.BACKGROUND_BASE_LOW
  }
}));
export default function ProductDetailsActionSheetVariants(props) {
  const { product, selectedVariantIndex, onVariantSelect } = props;
  const styles = useStyles();
  return getIsVariantProduct(product) ? <View style={styles.container}>
    <View style={styles.headerRow}>
      <Text variant="text-md/bold" color="mobile-text-heading-primary">
        {intl.string(t.wbgaj6)}
      </Text>
      {product.variants.length > selectedVariantIndex && <Text variant="text-md/medium" color="text-default" lineClamp={1} style={styles.text}>{product.variants[selectedVariantIndex].variantLabel}</Text>}
    </View>
    <View style={styles.variantsContainer}>
      {product.variants.map((a0, index) => {
        return <VariantOption key={a0.variantValue} variant={a0} isSelected={selectedVariantIndex === index} onSelect={() => onVariantSelect(index)} />;
      })}
    </View>
  </View> : null;
};