// Metro module 7964 (f7965).
import { useCallback } from "react";
import { View } from "react-native";
import UserStore from "../../../stores/UserStore";
import { CollectiblesMobileShopScreen } from "../CollectiblesShopConstants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
import { triggerHapticFeedback } from "../../haptics/HapticUtils.native";
import HapticFeedbackTypes from "../../haptics/HapticFeedbackTypes";
import { Icon, IconSizes } from "../../../design/void/native";
import Module7965 from "../../../_bundle/Module7965";
import { Text } from "../../../design/components/Text/native/Text";
import { intl, t } from "../../../intl/index.native";
import useAnalyticsLocations from "../../app_analytics/useAnalyticsLocations";
import { openCollectiblesShopMobile } from "../CollectiblesActionCreators";
import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
import Module7966 from "../../../_bundle/Module7966";
import { NewBadge, LockBadge, PremiumBadge } from "./CollectiblesBadges";
import { useStateFromStores } from "../../../_bundle/Module589";
import PremiumUtils from "../../../utils/PremiumUtils";
import useCollectiblesData from "../hooks/useCollectiblesData";
import * as _CollectiblesUtils from "../CollectiblesUtils";
import { isPremiumCollectiblesProduct, isPremiumCollectiblesPurchase } from "../CollectiblesUtils";
let useStyles;
const EditCollectibleListItem = function EditCollectibleListItem(props) {
  const { size, isSelected, children, style, onPress: onPress2, onLongPress, accessibilityLabel, accessibilityRole = "button" } = props;
  const styles = useStyles();
  return <PressableOpacity style={styles.pressable} disabled={isSelected} onPress={function onPress() {
    triggerHapticFeedback(HapticFeedbackTypes.IMPACT_LIGHT);
    onPress2();
  }} onLongPress={onLongPress} accessibilityRole={accessibilityRole} accessibilityLabel={accessibilityLabel} accessibilityState={{
    selected: isSelected
  }}>
    <View style={[styles.item, isSelected ? styles.selected : null, {
      width: size,
      height: size
    }, style]}>{children}</View>
  </PressableOpacity>;
};
useStyles = createStyles({
  pressable: {
    marginTop: 10,
    borderRadius: Module712.radii.sm
  },
  item: {
    borderWidth: 2,
    borderColor: Module712.colors.BORDER_SUBTLE,
    borderRadius: Module712.radii.sm,
    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
    alignItems: "center",
    justifyContent: "center"
  },
  selected: {
    borderColor: Module712.colors.BUTTON_OUTLINE_BRAND_BORDER_ACTIVE
  },
  optionCell: {
    justifyContent: "center",
    alignItems: "center"
  },
  optionCellText: {
    marginTop: 4
  },
  newIcon: {
    position: "absolute",
    top: -12,
    right: 5
  },
  lockIcon: {
    position: "absolute",
    top: -12,
    right: -10
  }
});
export { EditCollectibleListItem };
export function EditCollectiblesListItemNone(props) {
  const styles = useStyles();
  return <EditCollectibleListItem style={styles.optionCell} {...props}>
    <Icon source={Module7965} size={IconSizes.LARGE} />
    <Text variant="text-sm/medium" color="mobile-text-heading-primary" style={styles.optionCellText}>
      {props.asDefault ? intl.string(t.CHf9iJ) : intl.string(t.PoWNfe)}
    </Text>
  </EditCollectibleListItem>;
}
export function EditCollectiblesListItemShop(props) {
  const { analyticsSource, ...props2 } = props;
  const styles = useStyles();
  const analyticsLocations = useAnalyticsLocations(analyticsSource).analyticsLocations;
  return <EditCollectibleListItem style={styles.optionCell} isSelected={false} onPress={useCallback(() => {
    openCollectiblesShopMobile({
      analyticsLocations,
      analyticsSource,
      screen: CollectiblesMobileShopScreen.FEATURED_PAGE
    });
    ActionSheetActionCreators.hideActionSheet();
  }, [analyticsLocations, analyticsSource])} {...props2}>
    <Icon source={Module7966} size={IconSizes.LARGE} />
    <Text variant="text-sm/medium" color="mobile-text-heading-primary" style={styles.optionCellText}>
      {intl.string(t.pWG4ze)}
    </Text>
    <NewBadge style={styles.newIcon} />
  </EditCollectibleListItem>;
}
export function EditCollectiblesListItemProduct(props) {
  let r57, r58;
  const { isSelected, isTryItOut, skuId, children, ...props2 } = props;
  const styles = useStyles();
  const canUseCollectibles = PremiumUtils.canUseCollectibles(useStateFromStores([UserStore], () => UserStore.getCurrentUser()));
  const collectiblesData = useCollectiblesData(skuId);
  const { product, purchase } = collectiblesData;
  const isProductNew = _CollectiblesUtils.isProductNew(skuId);
  const r16 = isPremiumCollectiblesProduct(product) || isPremiumCollectiblesPurchase(purchase);
  const r52 = [children, ,];
  if (purchase == null && !r16) {
    r57 = <LockBadge style={styles.lockIcon} isNew={isProductNew} />;
  } else {
    L10: {
      r58 = null;
      if (r16) {
        r58 = null;
        if (!isTryItOut) {
          if (purchase != null) {
            r58 = null;
            if (canUseCollectibles) {
              break L10;
            }
          }
          r58 = <PremiumBadge style={styles.lockIcon} isNew={isProductNew} />;
        }
      }
    }
    r57 = r58;
  }
  r52[1] = r57;
  return <EditCollectibleListItem isSelected={isSelected} {...props2}>{r52}</EditCollectibleListItem>;
}