// Metro module 9780 (f9781).
import { useState, useRef, useCallback, useEffect } from "react";
import { ScrollView, View } from "react-native";
import { PremiumTypes } from "../../PremiumConstants";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { useNavigation } from "../../../../design/components/Navigator/native/useNavigation.native";
import { useNativeGiftContext } from "../../../payments/native/NativeGiftContext";
import { useGiftingPromotionDefaultSelectionV2 } from "../../gifting/hooks/useGiftingPromotionDefaultSelection";
import { intl, t } from "../../../../intl/index.native";
import PremiumGiftBackgroundSelect from "./PremiumGiftBackgroundSelect";
import PremiumGiftDuration from "./PremiumGiftDuration";
import { Text } from "../../../../design/components/Text/native/Text";
import LockedRecipientField from "../../../checkout/native/gifting/LockedRecipientField";
import PremiumGiftCustomMessage from "./PremiumGiftCustomMessage";
import PremiumGiftPurchaseButton from "./PremiumGiftPurchaseButton";
const useStyles = createStyles({
  container: {
    flex: 1,
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
  },
  scrollViewContainer: {
    paddingBottom: Module712.space.PX_24
  },
  senderHeaderTitle: {
    marginTop: Module712.space.PX_24,
    marginLeft: Module712.space.PX_16,
    marginBottom: Module712.space.PX_8,
    fontSize: 14
  }
});
export default function PremiumGiftCustomization() {
  let nitroTierName;
  const navigation = useNavigation();
  const styles = useStyles();
  const nativeGiftContext = useNativeGiftContext();
  const { recipientUser, premiumType } = nativeGiftContext;
  const giftingPromotionDefaultSelectionV2 = useGiftingPromotionDefaultSelectionV2(nativeGiftContext.claimableRewards, nativeGiftContext.selectedGiftingPromotionReward);
  const [state, setMessagePosition] = useState(0);
  const ref = useRef(null);
  const callback = useCallback(() => {
    setTimeout(() => {
      const current = ref.current;
      return current == null ? void 0 : current.scrollTo({
        y: state,
        animated: true
      });
    }, 100);
  }, [state]);
  nitroTierName = premiumType === PremiumTypes.TIER_2 ? intl.string(t.lG6a5x) : intl.string(t["t9uG/o"]);
  useEffect(() => {
    navigation.setOptions({
      title: intl.formatToPlainString(t["RMu0/q"], {
        nitroTierName
      })
    });
  }, [navigation, nitroTierName]);
  return <View style={styles.container}>
    <ScrollView ref={ref} contentContainerStyle={styles.scrollViewContainer} showsVerticalScrollIndicator={false}>
      <View>
        <PremiumGiftBackgroundSelect />
        <PremiumGiftDuration />
        {recipientUser != null && <>
          <Text style={styles.senderHeaderTitle} variant="text-md/semibold">
            {intl.string(t.NlkxGS)}
          </Text>
          <LockedRecipientField user={recipientUser} />
          <PremiumGiftCustomMessage onFocusMessage={callback} setMessagePosition={setMessagePosition} />
        </>}
      </View>
    </ScrollView>
    <PremiumGiftPurchaseButton defaultSelection={giftingPromotionDefaultSelectionV2} />
  </View>;
};