// Metro module 9701 (f9702).
import { useState, useEffect, useRef, useCallback, useMemo } from "react";
import { ActivityIndicator, Pressable, ScrollView, View } from "react-native";
import BadgeDirectoryStore from "../../../badges/BadgeDirectoryStore";
import PromotionsStore from "../../promotions/PromotionsStore";
import { PremiumTypes } from "../../PremiumConstants";
import { VerticalGradient } from "../../../../Constants";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import Module689 from "../../../../_bundle/Module689";
import { useNavigation } from "../../../../design/components/Navigator/native/useNavigation.native";
import useSafeAreaInsets_native from "../../../safe_area/useSafeAreaInsets.native";
import useWindowDimensions_native from "../../../screen/useWindowDimensions.native";
import { useNativeGiftContext } from "../../../payments/native/NativeGiftContext";
import { useIsScreenReaderEnabled } from "../../../a11y/native/useIsScreenReaderEnabled.native";
import { useNavigatorBackPressHandler } from "../../../../design/components/Navigator/native/useNavigatorBackPressHandler.native";
import { useStateFromStoresArray, useStateFromStoresObject } from "../../../../_bundle/Module589";
import { useSelectPremiumGift } from "../hooks/useSelectPremiumGift";
import GiftingBadgeExperiment from "../../gifting/experiments/GiftingBadgeExperiment";
import { BadgeId } from "../../../../_bundle/Module8106";
import { PremiumGiftScreens } from "./PremiumGiftModal";
import openGiftingBadgeInfoActionSheet from "../../gifting/native/openGiftingBadgeInfoActionSheet";
import PremiumGiftFeaturesCard from "./PremiumGiftFeaturesCard";
import { useIsWindowSmall } from "../../../screen/native/useIsWindowSmall";
import { useSharedValue, useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
import * as _native from "../../../../design/void/native";
import { Avatar, AvatarSizes, CarouselPagination } from "../../../../design/void/native";
import * as _timing from "../../../../design/animation/reanimated/timing/timing";
import GiftingBadgeProgressBanner from "../../gifting/native/views/GiftingBadgeProgressBanner";
import AnalyticsLocation from "../../../app_analytics/AnalyticsLocation";
import Module9714 from "../../../../_bundle/Module9714";
import { PremiumGiftWishlistBanner } from "./PremiumGiftWishlistBanner";
import StatusBar_android from "../../../status_bar/native/components/StatusBar.android";
import { intl, t } from "../../../../intl/index.native";
import { XSmallIcon } from "../../../../design/components/Icon/native/redesign/generated/XSmallIcon";
import FastImage from "../../../../components_native/common/FastImage";
import Module9777 from "../../../../_bundle/Module9777";
import Module4611 from "../../../../_bundle/Module4611";
import { NAV_BAR_HEIGHT } from "../../../../design/components/Navigator/native/NavigatorConstants.native";
import { Text } from "../../../../design/components/Text/native/Text";
let __initData, __initData2;
const data = [PremiumTypes.TIER_2, PremiumTypes.TIER_0];
const gap = 16;
const useStyles = createStyles((a0, a1, a2) => ({
  container: {
    flex: 1,
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
  },
  headerBackground: {
    position: "absolute",
    width: a0,
    height: 0.1 * a1,
    top: a1 / 1.75 - 0.1 * a1
  },
  headerBackgroundColor: {
    color: Module712.colors.BACKGROUND_BASE_LOW
  },
  headerImageContainer: {
    position: "absolute",
    width: a0,
    height: a1 / 1.75
  },
  headerImage: {
    width: a0
  },
  headerOverlay: {
    width: a0,
    backgroundColor: Module689("#000000").alpha(0.8).hex()
  },
  avatar: {
    alignSelf: "center"
  },
  title: {
    textAlign: "center",
    marginTop: a2 ? Module712.space.PX_16 : Module712.space.PX_12,
    marginHorizontal: Module712.space.PX_24
  },
  description: {
    textAlign: "center",
    marginTop: a2 ? Module712.space.PX_16 : Module712.space.PX_12,
    marginHorizontal: Module712.space.PX_24
  },
  carousel: {
    marginTop: a2 ? Module712.space.PX_16 : Module712.space.PX_32
  },
  dmGiftingContent: {
    paddingTop: Module712.space.PX_16,
    paddingBottom: Module712.space.PX_48
  },
  loadingContainer: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  closeButtonContainer: {
    position: "absolute",
    top: 0,
    left: 0,
    zIndex: 1
  },
  closeButton: {
    padding: Module712.space.PX_16
  },
  closeButtonIcon: {
    width: 24,
    height: 24,
    tintColor: "white"
  },
  badgeBanner: {
    marginTop: Module712.space.PX_16,
    marginHorizontal: Module712.space.PX_16
  }
}));
__initData = {
  code: "function PremiumGiftPlanSelectTsx1(){const{STANDARD_EASING,withTiming,carouselVisibility}=this.__closure;const animationSettings={easing:STANDARD_EASING,duration:500};return{opacity:withTiming(carouselVisibility.get()?1:0,animationSettings),transform:[{translateY:withTiming(carouselVisibility.get()?0:100,animationSettings)}]};}"
};
__initData2 = {
  code: "function PremiumGiftPlanSelectTsx2(value,index){const{lastItemIndex,leftOffset,centerOffset,rightOffset,carouselStep}=this.__closure;const activeIndex=index-value;const leftT=Math.max(0,Math.min(1,activeIndex));const rightT=Math.max(0,Math.min(1,activeIndex-(lastItemIndex-1)));const offset=leftOffset+leftT*(centerOffset-leftOffset)+rightT*(rightOffset-centerOffset);return{transform:[{translateX:value*carouselStep+offset}]};}"
};
export default function PremiumGiftPlanSelect(props) {
  let r270, r307, r332, r342, r381, children2, children3, props6;
  let selectPremiumGift, c17415_4, styles, state, setState, state2, setState2, ref, callback, width, callback2, c17415_14, sharedValue, c17415_16, c17415_17, c17415_18, c17415_19;
  const { shouldUseDMWishlistGiftingDesign, isLoadingWishlist } = props;
  selectPremiumGift = void 0;
  c17415_4 = void 0;
  styles = void 0;
  state = void 0;
  setState = void 0;
  state2 = void 0;
  setState2 = void 0;
  ref = void 0;
  callback = void 0;
  width = void 0;
  callback2 = void 0;
  c17415_14 = void 0;
  sharedValue = void 0;
  c17415_16 = void 0;
  c17415_17 = void 0;
  c17415_18 = void 0;
  c17415_19 = void 0;
  const navigation = useNavigation();
  const safeAreaInsets_native = useSafeAreaInsets_native();
  const { top, bottom } = safeAreaInsets_native;
  const windowDimensions_native = useWindowDimensions_native();
  const { width: width2, height } = windowDimensions_native;
  const nativeGiftContext = useNativeGiftContext();
  const { recipientUser, claimableRewards, onClose } = nativeGiftContext;
  const isScreenReaderEnabled = useIsScreenReaderEnabled();
  useNavigatorBackPressHandler(() => {
    onClose();
    return true;
  });
  const stateFromStoresArray = useStateFromStoresArray([PromotionsStore], () => PromotionsStore.getGiftPromotionRewardSkuIds());
  selectPremiumGift = useSelectPremiumGift("PremiumGiftPlanSelect");
  let enabled = GiftingBadgeExperiment.useConfig({
    location: "PremiumGiftPlanSelect"
  }).enabled;
  const stateFromStoresObject = useStateFromStoresObject([BadgeDirectoryStore], () => ({
    nextTier: BadgeDirectoryStore.getNextTier(BadgeId.GIFTING),
    giftsToNextTier: BadgeDirectoryStore.getRemainingToNextTier(BadgeId.GIFTING)
  }));
  const { nextTier, giftsToNextTier } = stateFromStoresObject;
  if (enabled) {
    enabled = nextTier != null;
  }
  c17415_4 = enabled;
  styles = useStyles(width2, height, enabled);
  let onSnapToItem;
  [state, onSnapToItem] = useState(0);
  let state3;
  [state3, setState] = useState(false);
  useEffect(() => {
    let c26519_0 = navigation.addListener("state", () => {
      const state3 = navigation.getState();
      setState(state3.routes[state3.index].name === PremiumGiftScreens.PLAN_SELECT);
    });
    return () => {
      navigation.removeListener("state", c26519_0);
    };
  }, [navigation]);
  let state4;
  [state4, setState2] = useState(null);
  state2 = state4;
  ref = useRef([]);
  useEffect(() => {
    ref.current = [];
    setState2(null);
  }, [shouldUseDMWishlistGiftingDesign]);
  callback = useCallback(() => {
    if (ref.current.length >= data.length) {
      const r6 = Math;
      const r20 = r6.max.apply(r6, [...ref.current]);
      if (!Number.isNaN(r20)) {
        setState2(r20);
      }
    }
  }, [setState2]);
  const callback3 = useCallback(() => {
    openGiftingBadgeInfoActionSheet();
  }, []);
  width = 0.86 * width2;
  callback2 = useCallback(function(variant, r3 = {
    forScreenReader: false
  }) {
    const forScreenReader = r3.forScreenReader;
    return function({ item, index }) {
      const Component = forScreenReader ? Pressable : View;
      const r14 = {
        accessible: forScreenReader ? forScreenReader : void 0,
        accessibilityRole: forScreenReader ? "button" : void 0,
        onPress: forScreenReader ? () => selectPremiumGift(item) : void 0,
        style: {
          paddingVertical: Module712.space.PX_8
        },
        children: null
      };
      let height = state2;
      if (state2 == null) {
        height = void 0;
      }
      r14.children = <PremiumGiftFeaturesCard key={index} premiumType={item} variant={variant} onPress={() => selectPremiumGift(item)} style={{
        height,
        width,
        alignSelf: variant === "default" ? "center" : void 0
      }} onLayout={(event) => {
        const height = event.nativeEvent.layout.height;
        if (height > 0) {
          const current = ref.current;
          const r7 = Math;
          let r15 = ref.current[index];
          if (r15 == null) {
            r15 = 0;
          }
          current[index] = r7.max(height, r15);
          callback();
        }
      }} claimableRewards={claimableRewards} isSelected={state === index} />;
      return <Component {...r14} />;
    };
  }, [selectPremiumGift, width, ref, callback, state2, state, claimableRewards]);
  const isWindowSmall = useIsWindowSmall();
  let r9 = claimableRewards != null;
  let r136 = enabled;
  if (r9) {
    r9 = claimableRewards.length > 0;
  }
  const r138 = isWindowSmall ? "smallCompact" : r9 ? "smallCompact" : "compact";
  c17415_14 = r138;
  const memo = useMemo(() => callback2(c17415_14), [callback2, r138]);
  let renderItem = useMemo(() => callback2("default"), [callback2]);
  sharedValue = useSharedValue(false);
  useEffect(() => {
    sharedValue.set(state2 != null);
  }, [sharedValue, state2]);
  const he = function he() {
    const r8 = {
      easing: _native.STANDARD_EASING,
      duration: 500
    };
    return {
      opacity: _timing.withTiming(sharedValue.get() ? 1 : 0, r8),
      transform: [{
        translateY: _timing.withTiming(sharedValue.get() ? 0 : 100, r8)
      }]
    };
  };
  he.__closure = {
    STANDARD_EASING: _native.STANDARD_EASING,
    withTiming: _timing.withTiming,
    carouselVisibility: sharedValue
  };
  he.__workletHash = 2946262965957;
  he.__initData = __initData;
  const animatedStyle = useAnimatedStyle(he);
  const memo2 = useMemo(() => [Module689(styles.headerBackgroundColor.color).alpha(0).hex(), Module689(styles.headerBackgroundColor.color).alpha(1).hex()], [styles]);
  const carouselStep = width + gap;
  c17415_16 = carouselStep;
  const lastItemIndex = data.length - 1;
  c17415_17 = lastItemIndex;
  const centerOffset = (width2 - width) / 2;
  c17415_18 = centerOffset;
  const rightOffset = width2 - width - gap;
  c17415_19 = rightOffset;
  const fe = function fe(a0, a1) {
    const r13 = a1 - a0;
    const r16 = Math.max(0, Math.min(1, r13));
    const r23 = Math.max(0, Math.min(1, r13 - (c17415_17 - 1)));
    const r25 = a0 * c17415_16;
    return {
      transform: [{
        translateX: r25 + (16 + r16 * (c17415_18 - 16) + r23 * (c17415_19 - c17415_18))
      }]
    };
  };
  fe.__closure = {
    lastItemIndex,
    leftOffset: 16,
    centerOffset,
    rightOffset,
    carouselStep
  };
  fe.__workletHash = 8954351954675;
  fe.__initData = __initData2;
  const callback4 = useCallback(fe, [carouselStep, lastItemIndex, 16, centerOffset, rightOffset]);
  if (isLoadingWishlist) {
    r342 = <View style={[styles.container, styles.loadingContainer]}>
      <ActivityIndicator size="large" />
    </View>;
  } else if (shouldUseDMWishlistGiftingDesign) {
    const props4 = {
      style: styles.container,
      children: null
    };
    const props5 = {
      contentContainerStyle: {
        paddingBottom: bottom
      },
      children: null
    };
    if (r136) {
      let name2 = nextTier.name;
      if (name2 == null) {
        name2 = "";
      }
      r136 = <View style={styles.badgeBanner}>
        <Pressable onPress={callback3} accessibilityRole="button">
          <GiftingBadgeProgressBanner giftsToNextTier={giftsToNextTier} nextTierName={name2} nextTierIcon={nextTier.simple_icon_url} analyticsLocation={AnalyticsLocation.PREMIUM_GIFT_PLAN_SELECTION} />
        </Pressable>
      </View>;
    }
    L52: {
      children2 = [r136, , ,];
      props6 = {
        style: styles.dmGiftingContent,
        children: null
      };
      if (stateFromStoresArray.length !== 0) {
        children3 = null;
        if (claimableRewards === void 0) {
          break L52;
        }
      }
      if (isScreenReaderEnabled) {
        r381 = <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
          gap,
          paddingHorizontal: gap
        }}>
          {data.map((a0, a1) => callback2(c17415_14, {
            forScreenReader: true
          })({
            item: a0,
            index: a1
          }))}
        </ScrollView>;
      } else {
        if (state2 == null) {
          state4 = 1;
        }
        r381 = <Module9714 style={animatedStyle} data={data} renderItem={memo} width={width2} windowSize={data.length} height={state4 + 2 * Module712.space.PX_8} onConfigurePanGesture={(event) => {
          event.activeOffsetX([-10, 10]);
        }} loop={false} scrollAnimationDuration={200} customAnimation={callback4} onSnapToItem={onSnapToItem} />;
      }
      children3 = r381;
    }
    props6.children = children3;
    children2[1] = <View {...props6} />;
    children2[2] = recipientUser != null && <PremiumGiftWishlistBanner giftRecipient={recipientUser} />;
    props5.children = children2;
    props4.children = <ScrollView {...props5} />;
    r342 = <View {...props4} />;
  } else {
    if (state3) {
      state3 = <StatusBar_android animated barStyle="light-content" />;
    }
    const r191 = [state3, <Pressable style={[styles.closeButtonContainer, {
      paddingTop: top
    }]} onPress={onClose} accessibilityRole="button" accessibilityLabel={intl.string(t.cpT0Cq)}>
      <View style={styles.closeButton}>
        <XSmallIcon size="md" style={styles.closeButtonIcon} />
      </View>
    </Pressable>, <FastImage resizeMode="cover" style={[styles.headerImageContainer, styles.headerImage]} source={Module9777} />, <View style={[styles.headerImageContainer, styles.headerOverlay]} />, <Module4611 style={styles.headerBackground} start={VerticalGradient.START} end={VerticalGradient.END} colors={memo2} />, ,];
    const props2 = {
      contentContainerStyle: {
        paddingBottom: bottom
      },
      children: null
    };
    const props3 = {
      style: [{
        paddingTop: top + NAV_BAR_HEIGHT
      }],
      children: null
    };
    const children = [recipientUser != null && <Avatar style={styles.avatar} guildId={void 0} size={r136 ? AvatarSizes.LARGE_48 : AvatarSizes.XLARGE} user={recipientUser} />, , , , ,];
    const variant2 = recipientUser != null ? "heading-xl/extrabold" : "heading-xxl/extrabold";
    if (recipientUser != null) {
      const m5ggvH = t.m5ggvH;
      let globalName = recipientUser.globalName;
      if (globalName == null) {
        globalName = recipientUser.username;
      }
      r270 = intl.formatToPlainString(m5ggvH, {
        username: globalName
      });
    } else {
      r270 = intl.string(t.dqQgZv);
    }
    children[1] = <Text style={styles.title} variant={variant2} color="text-overlay-light">{r270}</Text>;
    children[2] = <Text style={styles.description} variant="heading-sm/medium" color="text-overlay-light">
      {intl.string(t["30qzrd"])}
    </Text>;
    let r294 = r136;
    if (r136) {
      let name = nextTier.name;
      if (name == null) {
        name = "";
      }
      r294 = <Pressable style={styles.badgeBanner} onPress={callback3} accessibilityRole="button">
        <GiftingBadgeProgressBanner giftsToNextTier={giftsToNextTier} nextTierName={name} nextTierIcon={nextTier.simple_icon_url} analyticsLocation={AnalyticsLocation.PREMIUM_GIFT_PLAN_SELECTION} />
      </Pressable>;
    }
    L39: {
      children[3] = r294;
      if (stateFromStoresArray.length !== 0) {
        r307 = null;
        if (claimableRewards === void 0) {
          break L39;
        }
      }
      if (isScreenReaderEnabled) {
        r332 = <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.carousel} contentContainerStyle={{
          gap,
          paddingHorizontal: gap
        }}>
          {data.map((a0, a1) => callback2(c17415_4 ? c17415_14 : "default", {
            forScreenReader: true
          })({
            item: a0,
            index: a1
          }))}
        </ScrollView>;
      } else {
        if (r136) {
          renderItem = memo;
        }
        r332 = <>
          <Module9714 style={[styles.carousel, animatedStyle]} data={data} renderItem={renderItem} width={width2} height={state2 != null ? state2 + 2 * Module712.space.PX_8 : void 0} onConfigurePanGesture={(event) => {
            event.activeOffsetX([-10, 10]);
          }} loop={false} scrollAnimationDuration={200} customAnimation={r136 ? callback4 : void 0} mode="parallax" modeConfig={{
            parallaxScrollingScale: 1,
            parallaxScrollingOffset: 40
          }} onSnapToItem={onSnapToItem} />
          <CarouselPagination numberOfItems={data.length} currentIndex={state} />
        </>;
      }
      r307 = r332;
    }
    children[4] = r307;
    props3.children = children;
    props2.children = <View {...props3} />;
    r191[5] = <ScrollView {...props2} />;
    r342 = <>{r191}</>;
  }
  return r342;
};