// Metro module 8775 (f8776).
import * as Module19 from "react";
import { useState, useCallback, useMemo, useEffect, useRef } from "react";
import { ScrollView, View } from "react-native";
import { AnalyticEvents } from "../../../../Constants";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { useNavigation } from "../../../../design/components/Navigator/native/useNavigation.native";
import { UnifiedGiftModalScreens } from "./UnifiedGiftModalTypes";
import useAnalyticsLocations from "../../../app_analytics/useAnalyticsLocations";
import useInitialValue from "../../../../hooks/useInitialValue";
import { v4 } from "../../../../_bundle/Module514";
import AnalyticsUtils from "../../../../utils/AnalyticsUtils";
import { useGiftStyles } from "../../../premium/gifting/hooks/useGiftStyles";
import { GiftBackgroundSelect } from "../../../premium/native/gifting/PremiumGiftBackgroundSelect";
import { Text } from "../../../../design/components/Text/native/Text";
import { intl, t } from "../../../../intl/index.native";
import LockedRecipientField from "./LockedRecipientField";
import SelectedUserField from "./SelectedUserField";
import { GiftCustomMessage } from "../../../premium/native/gifting/PremiumGiftCustomMessage";
const useStyles = createStyles({
  container: {
    flex: 1,
    paddingTop: Module712.space.PX_12,
    alignItems: "stretch"
  },
  scrollView: {
    paddingBottom: Module712.space.PX_24
  },
  sectionHeader: {
    marginTop: Module712.space.PX_24,
    marginBottom: Module712.space.PX_8,
    paddingHorizontal: Module712.space.PX_16,
    textTransform: "capitalize"
  }
});
const r58 = Module19.memo(function({ skuId, applicationId, recipientUser, setRecipientUser, lockedRecipient, validateRecipient, renderProductDetails, renderPurchaseSection }) {
  let analyticsLocations, load_id, memo, state, ref, state2, state3;
  analyticsLocations = void 0;
  load_id = void 0;
  memo = void 0;
  state = void 0;
  ref = void 0;
  state2 = void 0;
  state3 = void 0;
  const styles = useStyles();
  const navigation = useNavigation();
  const [isValidRecipient, setState] = useState(true);
  const [state4, setState2] = useState(false);
  const callback2 = useCallback(() => {
    navigation.navigate(UnifiedGiftModalScreens.RECIPENT_SELECT);
  }, [navigation]);
  analyticsLocations = useAnalyticsLocations().analyticsLocations;
  load_id = useInitialValue(() => v4());
  memo = useMemo(() => ({
    is_gift: true,
    location_stack: analyticsLocations,
    payment_type: "sku",
    sku_id: skuId,
    application_id: applicationId,
    load_id
  }), [analyticsLocations, skuId, applicationId, load_id]);
  useEffect(() => {
    setState(true);
    if (recipientUser != null) {
      setState2(true);
      validateRecipient(recipientUser.id).then((result) => {
        setState(result);
      }).finally(() => {
        setState2(false);
      });
    }
  }, [recipientUser, skuId, validateRecipient]);
  useEffect(() => {
    AnalyticsUtils.track(AnalyticEvents.PAYMENT_FLOW_STARTED, memo);
    AnalyticsUtils.track(AnalyticEvents.PAYMENT_FLOW_LOADED, {
      ...memo,
      initial_step: "gift_customization"
    });
  }, [memo]);
  let setGiftStyle;
  [state, setGiftStyle] = useState(useGiftStyles()[0]);
  ref = useRef(null);
  let setMessagePosition;
  [state2, setMessagePosition] = useState(0);
  let setCustomGiftMessage;
  [state3, setCustomGiftMessage] = useState(void 0);
  const callback = useCallback(() => {
    setTimeout(() => {
      const current = ref.current;
      return current == null ? void 0 : current.scrollTo({
        y: state2,
        animated: true
      });
    }, 100);
  }, [state2]);
  const memo2 = useMemo(() => ({
    gift_style: state,
    recipient_id: recipientUser?.id,
    custom_message: state3
  }), [state, recipientUser, state3]);
  return <View style={styles.container}>
    <ScrollView ref={ref} contentContainerStyle={styles.scrollView} showsVerticalScrollIndicator={false}>
      <GiftBackgroundSelect giftStyle={state} setGiftStyle={setGiftStyle} withConsistentHeight={false} />
      <Text variant="text-sm/semibold" style={styles.sectionHeader}>
        {intl.string(t.xFn72s)}
      </Text>
      {lockedRecipient && recipientUser != null ? <LockedRecipientField user={recipientUser} /> : <SelectedUserField selectedUser={recipientUser} onPress={callback2} setSelectedUser={setRecipientUser} />}
      <Text variant="text-sm/semibold" style={styles.sectionHeader}>
        {intl.string(t.PpoJzt)}
      </Text>
      {renderProductDetails({
        recipientUser,
        isValidRecipient
      })}
      <GiftCustomMessage onFocusMessage={callback} setMessagePosition={setMessagePosition} customGiftMessage={state3} setCustomGiftMessage={setCustomGiftMessage} />
    </ScrollView>
    {renderPurchaseSection({
      isPurchaseDisabled: recipientUser == null || state4 || !isValidRecipient,
      giftOptions: memo2,
      baseAnalyticsFields: memo
    })}
  </View>;
});
export default r58;