// Metro module 15772 (f15773).
import { useRef, useEffect, useCallback, useMemo } from "react";
import { Image as Image2, View, StyleSheet } from "react-native";
import { CollectiblesMobileShopScreen } from "../CollectiblesShopConstants";
import { ACTION_SHEET_MAX_WIDTH } from "../../action_sheet/native/ActionSheetConstants";
import { ContentDismissActionType } from "../../dismissible_content/DismissibleContentConstants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import useWindowDimensions_native from "../../screen/useWindowDimensions.native";
import { useBottomSheet } from "../../../_bundle/Module5245";
import useSafeAreaInsets_native from "../../safe_area/useSafeAreaInsets.native";
import ReanimatedRexport, { useAnimatedStyle } from "../../reanimated/ReanimatedRexport";
import Module15773 from "../../../_bundle/Module15773";
import { Text } from "../../../design/components/Text/native/Text";
import * as _index_native from "../../../intl/index.native";
import { intl } from "../../../intl/index.native";
import { useProfileFramesMarketing } from "../hooks/useProfileFramesMarketing";
import { openCollectiblesShopMobile } from "../CollectiblesActionCreators";
import AnalyticsLocation from "../../app_analytics/AnalyticsLocation";
import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
import Module15776 from "../../../_bundle/Module15776";
import { PaintIllocon, HeartIllocon, ShopIllocon } from "../../../design/assets/native";
import { Button } from "../../../design/components/Button/native/Button.native";
let useStyles, __initData, FeatureRow;
const CatEarsBackdrop = function CatEarsBackdrop() {
  const styles = useStyles();
  const width = useWindowDimensions_native().width;
  const animatedPosition = useBottomSheet().animatedPosition;
  const top = useSafeAreaInsets_native().top;
  const r28 = Math.min(width, ACTION_SHEET_MAX_WIDTH);
  const left = (width - r28) / 2;
  const r31 = r28 / 1200;
  const t = () => ({
    transform: [{
      translateY: animatedPosition.get() + top - 60
    }]
  });
  t.__closure = {
    animatedPosition,
    safeAreaTop: top,
    MASCOT_SAFE_AREA_NUDGE: 60
  };
  t.__workletHash = 6274760278164;
  t.__initData = __initData;
  const style = [styles.mascotContainer, {
    left,
    right: left
  }, useAnimatedStyle(t)];
  const style2 = [styles.mascotLayer, ,];
  const left2 = -(56 * r31);
  style2[1] = {
    top: -138 * r31,
    left: left2,
    right: left2
  };
  return <ReanimatedRexport.View style={style}>
    <View style={style2}>
      <Image2 source={{
        uri: Module15773
      }} style={styles.mascotImage} accessibilityElementsHidden importantForAccessibility="no-hide-descendants" />
    </View>
  </ReanimatedRexport.View>;
};
FeatureRow = function FeatureRow(props) {
  const { icon, text } = props;
  const styles = useStyles();
  return <View style={styles.featureRow}>
    {icon}
    <Text variant="text-sm/medium" color="text-subtle" style={styles.featureText}>{text}</Text>
  </View>;
};
useStyles = createStyles({
  mascotContainer: {
    ...StyleSheet.absoluteFillObject,
    pointerEvents: "none"
  },
  mascotLayer: {
    ...StyleSheet.absoluteFillObject
  },
  mascotImage: {
    width: "100%",
    aspectRatio: 1.8324022346368716
  },
  framePreviewImage: {
    width: "100%",
    aspectRatio: 3.25,
    resizeMode: "contain"
  },
  container: {
    padding: Module712.space.PX_16,
    paddingTop: Module712.space.PX_24,
    gap: Module712.space.PX_16
  },
  headerText: {
    textAlign: "center"
  },
  featureRow: {
    flexDirection: "row",
    alignItems: "center",
    gap: Module712.space.PX_16
  },
  featureText: {
    flex: 1
  },
  featureRows: {
    gap: Module712.space.PX_32
  }
});
__initData = {
  code: "function CollectiblesMobileAnnouncementActionSheetTsx1(){const{animatedPosition,safeAreaTop,MASCOT_SAFE_AREA_NUDGE}=this.__closure;return{transform:[{translateY:animatedPosition.get()+safeAreaTop-MASCOT_SAFE_AREA_NUDGE}]};}"
};
export default function CollectiblesMobileAnnouncementActionSheet(props) {
  const markAsDismissed = props.markAsDismissed;
  const styles = useStyles();
  const profileFramesMarketing = useProfileFramesMarketing("CollectiblesMobileAnnouncementActionSheet");
  const text2 = profileFramesMarketing.showEaPremiumMarketing ? intl.string(_index_native.t["7cmcJI"]) : intl.string(_index_native.t.MkVbBY);
  const { showGiftingMarketing, showEaPremiumMarketing, showEaNonPremiumMarketing } = profileFramesMarketing;
  const text = showGiftingMarketing ? intl.string(_index_native.t["/4bQuG"]) : showEaPremiumMarketing ? intl.string(_index_native.t["5UI+bw"]) : showEaNonPremiumMarketing ? intl.string(_index_native.t["4a7pVU"]) : intl.string(_index_native.t["+9vaAT"]);
  const ref = useRef(false);
  const ref2 = useRef(markAsDismissed);
  useEffect(() => {
    ref2.current = markAsDismissed;
  }, [markAsDismissed]);
  useEffect(() => () => {
    if (!ref.current) {
      ref2.current(ContentDismissActionType.AUTO_DISMISS);
    }
  }, []);
  const callback = useCallback(() => {
    ref.current = true;
    markAsDismissed(ContentDismissActionType.PRIMARY);
    openCollectiblesShopMobile({
      screen: CollectiblesMobileShopScreen.FEATURED_PAGE,
      analyticsLocations: [],
      analyticsSource: AnalyticsLocation.ACTION_SHEET
    });
  }, [markAsDismissed]);
  return <BottomSheet onDismiss={useCallback(() => {
    ref.current = true;
    markAsDismissed(ContentDismissActionType.USER_DISMISS);
  }, [markAsDismissed])} backdropChildren={useMemo(() => <CatEarsBackdrop />, [])}>
    <View style={styles.container}>
      <Image2 source={{
        uri: Module15776
      }} style={styles.framePreviewImage} accessibilityElementsHidden importantForAccessibility="no-hide-descendants" />
      <Text variant="heading-xl/bold" color="text-strong" accessibilityRole="header" style={styles.headerText}>
        {intl.string(_index_native.t.vRCvqo)}
      </Text>
      <View style={styles.featureRows}>
        <FeatureRow icon={<PaintIllocon size={32} />} text={intl.string(_index_native.t["6ZWB0C"])} />
        <FeatureRow icon={<HeartIllocon size={32} />} text={text2} />
        <FeatureRow icon={<ShopIllocon size={32} />} text={text} />
      </View>
      <Button size="lg" text={intl.string(_index_native.t.S9hXPI)} onPress={callback} />
    </View>
  </BottomSheet>;
};