// Metro module 8670 (f8671).
import { Pressable, View, StyleSheet } from "react-native";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import ToastActionCreators from "../../toast/native/ToastActionCreators";
import { HeartIcon } from "../../../design/components/Icon/native/redesign/generated/HeartIcon";
import { useThemeContext } from "../../../_bundle/Module3901";
import { useUserProfileColors } from "../../user_profile/hooks/native/useUserProfileColors";
import { useToken } from "../../../design/tokens/native/useToken";
import { WishlistItemSource } from "../hooks/useWishlistHooks";
import { intl, t } from "../../../intl/index.native";
import { isNotNullish } from "../../../utils/GlobalUtils";
import { CheckmarkLargeBoldIcon } from "../../../design/components/Icon/native/redesign/generated/CheckmarkLargeBoldIcon";
let useStyles;
const SourceIcon = function SourceIcon(props) {
  const toastText = props.toastText;
  return <Pressable style={useStyles().sourceIcon} onPress={function onPress() {
    ToastActionCreators.open({
      key: "WISHLIST_SOURCE_ICON",
      content: toastText
    });
  }} accessible={false} accessibilityElementsHidden importantForAccessibility="no-hide-descendants">
    <HeartIcon color={Module712.colors.INTERACTIVE_ICON_DEFAULT} size="md" />
  </Pressable>;
};
useStyles = createStyles({
  card: {
    borderWidth: 1,
    borderRadius: Module712.radii.lg,
    borderColor: Module712.colors.BORDER_MUTED,
    justifyContent: "center",
    alignItems: "center",
    overflow: "hidden"
  },
  ownedOverlay: {
    ...StyleSheet.absoluteFillObject,
    justifyContent: "center",
    alignItems: "center",
    zIndex: 2,
    shadowOpacity: 0.5,
    shadowRadius: 6,
    elevation: 6
  },
  previewWrap: {
    width: "100%",
    height: "100%",
    justifyContent: "center",
    alignItems: "center"
  },
  ownedCard: {
    opacity: 0.5
  },
  sourceIcon: {
    position: "absolute",
    top: Module712.space.PX_8,
    right: Module712.space.PX_8,
    zIndex: 1
  }
});
export default function WishlistItemCardBase(props) {
  const { onPress: onPress2, accessibilityLabel, renderPreview, source, size = 170 } = props;
  let isOwned = props.isOwned;
  if (isOwned === void 0) {
    isOwned = false;
  }
  const { accessibilityHidden, recipientName } = props;
  const styles = useStyles();
  const themeContext = useThemeContext();
  const { theme, primaryColor } = themeContext;
  const containerBackground = useUserProfileColors({
    theme,
    primaryColor,
    secondaryColor: themeContext.secondaryColor
  }).containerBackground;
  let backgroundColor = useToken(Module712.colors.BG_SURFACE_RAISED);
  if (primaryColor != null) {
    backgroundColor = containerBackground;
  }
  const style = [styles.card, {
    backgroundColor
  }, typeof size === "object" ? {
    width: size.width,
    height: size.height
  } : {
    width: size,
    aspectRatio: 1
  }];
  const WISHLIST = WishlistItemSource.WISHLIST;
  const toastText2 = intl.formatToPlainString(t.p3RmJF, {
    username: recipientName
  });
  const r61 = isOwned ? intl.string(t["6cfuDj"]) : null;
  let r70 = source === WISHLIST;
  const accessibilityLabel2 = [accessibilityLabel, r61, r70 ? toastText2 : null].filter(isNotNullish).join(", ");
  const r94 = <View style={styles.ownedOverlay} pointerEvents="none" accessibilityElementsHidden importantForAccessibility="no-hide-descendants">
    <CheckmarkLargeBoldIcon color={Module712.colors.WHITE} size="custom" style={{
      width: 40,
      height: 40
    }} />
  </View>;
  const r103 = [<View style={[styles.previewWrap, isOwned ? styles.ownedCard : isOwned]} aria-hidden>
    {renderPreview()}
  </View>, , ,];
  if (isOwned) {
    isOwned = r94;
  }
  r103[1] = isOwned;
  if (r70) {
    r70 = <SourceIcon toastText={toastText2} />;
  }
  r103[2] = r70;
  const r107 = <>{r103}</>;
  return onPress2 == null ? <View style={style} accessibilityElementsHidden={accessibilityHidden} importantForAccessibility={accessibilityHidden ? "no-hide-descendants" : "auto"}>{r107}</View> : <Pressable accessibilityRole="button" accessibilityLabel={accessibilityLabel2} style={style} onPress={onPress2} accessibilityElementsHidden={accessibilityHidden} importantForAccessibility={accessibilityHidden ? "no-hide-descendants" : "auto"}>{r107}</Pressable>;
};
export const DEFAULT_ITEM_SIZE = 170;