// Metro module 13936 (f13937).
import { View } from "react-native";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import useCollectiblesData from "../../collectibles/hooks/useCollectiblesData";
import { useTeenUserForId } from "../hooks/useSelectedTeenUser";
import { getPurchaseDisplayInfo } from "../FamilyCenterActivityPurchaseRowUtils";
import { getGiftSubtext } from "../FamilyCenterActivityGiftRowUtils";
import UserUtils from "../../../utils/UserUtils";
import FamilyCenterActivityItemPreview from "./FamilyCenterActivityItemPreview";
import { Text } from "../../../design/components/Text/native/Text";
const useStyles = createStyles({
  container: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    borderBottomColor: Module712.colors.BORDER_SUBTLE,
    borderBottomWidth: 1,
    paddingVertical: 12
  },
  textContainer: {
    display: "flex",
    flexDirection: "column",
    flexShrink: 1
  }
});
export default function FamilyCenterActivityGiftRow(props) {
  const { skuId, subscriptionPlanId, price, gifterUserId, claimed, offeredAt, claimedAt } = props;
  const styles = useStyles();
  let product = useCollectiblesData(skuId).product;
  const teenUserForId = useTeenUserForId(gifterUserId);
  const purchaseDisplayInfo = getPurchaseDisplayInfo(product == null ? null : product, subscriptionPlanId);
  const { displayName, isSubscription } = purchaseDisplayInfo;
  if (skuId != null && !isSubscription && product == null) {
    return null;
  }
  if (displayName == null) {
    return null;
  }
  const giftSubtext = getGiftSubtext({
    claimed,
    price,
    gifterName: teenUserForId != null ? UserUtils.getName(teenUserForId) : null,
    offeredAt,
    claimedAt
  });
  if (product == null) {
    product = null;
  }
  return <View style={styles.container}>
    <FamilyCenterActivityItemPreview displayName={displayName} product={product} isSubscription={isSubscription} subscriptionPlanId={subscriptionPlanId} />
    <View style={styles.textContainer}>
      <Text variant="text-md/semibold" color="interactive-text-active" ellipsizeMode="tail" lineClamp={1}>{displayName}</Text>
      <Text variant="text-xs/medium" color="text-muted">{giftSubtext}</Text>
    </View>
  </View>;
};