// Metro module 5139 (f5140).
import _slicedToArray from "../../../_bundle/_slicedToArray";
import { useCallback, useState, useEffect, useLayoutEffect } from "react";
import { StyleSheet, View } from "react-native";
import AccessibilityStore from "../../a11y/AccessibilityStore";
import MemberVerificationFormStore from "../../guild_member_verification/MemberVerificationFormStore";
import ChannelStore from "../../../stores/ChannelStore";
import GuildStore from "../../../stores/GuildStore";
import SelectedChannelStore from "../../../stores/SelectedChannelStore";
import GuildOnboardingPromptsStore from "../GuildOnboardingPromptsStore";
import { OnboardingPromptType } from "../GuildOnboardingPromptsConstants";
import { GuildOnboardingModalStates } from "./GuildOnboardingConstants";
import { AnalyticEvents, MarketingURLs, Routes } from "../../../Constants";
import { transitionTo } from "../../routing/router_utils";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import { NAV_BAR_HEIGHT } from "../../../design/components/Navigator/native/NavigatorConstants.native";
import Module712 from "../../../_bundle/Module712";
import { getPaletteForAvatar } from "../../../utils/ImageUtils";
import { rgbToHex, hexWithOpacity } from "../../../utils/ColorUtils";
import FastImage from "../../../components_native/common/FastImage";
import Module4611 from "../../../_bundle/Module4611";
import { VerticalGradient } from "../../../ConstantsIOS";
import { useStateFromStores, useStateFromStoresArray } from "../../../_bundle/Module589";
import useSafeAreaInsets_native from "../../safe_area/useSafeAreaInsets.native";
import { useNavigation } from "../../../design/components/Navigator/native/useNavigation.native";
import * as _ReanimatedRexport from "../../reanimated/ReanimatedRexport";
import ReanimatedRexport, { useSharedValue, useAnimatedStyle } from "../../reanimated/ReanimatedRexport";
import GuildOnboardingActionCreators from "../GuildOnboardingActionCreators";
import { showRulesInOnboarding } from "../GuildOnboardingUtils";
import AvatarUtils from "../../../utils/AvatarUtils";
import getDevicePixelRatio_native from "../../../utils/getDevicePixelRatio.native";
import AnalyticsUtils from "../../../utils/AnalyticsUtils";
import { collectGuildAnalyticsMetadata } from "../../app_analytics/AppAnalyticsUtils";
import * as _timing from "../../../design/animation/reanimated/timing/timing";
import { getHeaderCloseButton, getHeaderBackButton } from "../../../design/components/Navigator/native/NavigatorHeader.native";
import { SafeAreaPaddingView } from "../../../components_native/common/SafeAreaView";
import { MultipleChoicePrompt, DropdownPrompt } from "./GuildOnboardingPrompt";
import { assertNever } from "../../../utils/GlobalUtils";
import LottieAnimationView from "../../../components_native/common/LottieAnimationView";
import { Text } from "../../../design/components/Text/native/Text";
import { t, intl } from "../../../intl/index.native";
let useStyles, BackgroundImageGradient, __initData, __initData2, __initData3, __initData4, __initData5;
let _getBackgroundGradientColor = function _getBackgroundGradientColor() {
  const r8 = async (c25362_0) => {
    let c25362_2;
    c25362_2 = void 0;
    let c29467_0 = await getPaletteForAvatar(c25362_0);
    let c29467_1 = (0, _slicedToArray)(c29467_0[0], 3);
    let c29467_2 = c29467_1[0];
    let c29467_3 = c29467_1[1];
    let c29467_4 = c29467_1[2];
    return rgbToHex(c29467_2, c29467_3, c29467_4);
  };
  _getBackgroundGradientColor = r8;
  return r8.apply(this, arguments);
};
BackgroundImageGradient = function BackgroundImageGradient(props) {
  const { splashUrl, color } = props;
  const styles = useStyles();
  return <>
    <FastImage source={{
      uri: splashUrl
    }} style={[styles.backgroundImage]} resizeMode="cover" />
    <Module4611 style={styles.backgroundColorGradient} start={VerticalGradient.START} end={VerticalGradient.END} colors={[hexWithOpacity(color, 0.16), color]} />
  </>;
};
useStyles = createStyles({
  flex: {
    flex: 1
  },
  container: {
    display: "flex",
    flex: 1,
    flexGrow: 1,
    marginTop: NAV_BAR_HEIGHT,
    marginBottom: Module712.space.PX_16,
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWER
  },
  subtitle: {
    marginBottom: Module712.space.PX_16,
    opacity: 0.8
  },
  onboardingTitle: {
    textAlign: "center"
  },
  onboardingPolicy: {
    position: "absolute",
    paddingHorizontal: Module712.space.PX_16,
    display: "flex",
    justifyContent: "center",
    width: "100%",
    marginBottom: Module712.space.PX_16
  },
  onboardingPolicyText: {
    textAlign: "center"
  },
  landingOverlay: {
    position: "absolute",
    width: "100%",
    height: "100%",
    display: "flex",
    justifyContent: "center"
  },
  artWrapper: {
    height: 350,
    position: "relative",
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center"
  },
  landingBody: {
    alignItems: "center",
    marginTop: -24,
    paddingHorizontal: Module712.space.PX_16
  },
  backgroundImage: {
    position: "absolute",
    height: "50%",
    width: "100%",
    top: 0
  },
  backgroundColorGradient: {
    position: "absolute",
    height: "100%",
    width: "100%",
    top: 0
  },
  darkColorGradient: {
    position: "absolute",
    height: "100%",
    width: "100%",
    top: 0
  }
});
__initData = {
  code: "function GuildOnboardingPromptsTsx1(){const{showPrompts,withTiming,Easing,useReducedMotion}=this.__closure;const rawOpacity=showPrompts.get()?0:1;const opacity=withTiming(rawOpacity,{duration:300,easing:Easing.out(Easing.ease)});const rawTranslateY=!useReducedMotion&&showPrompts.get()?-80:0;const translateY=withTiming(rawTranslateY,{duration:300,easing:Easing.out(Easing.ease)});return{opacity:opacity,transform:[{translateY:translateY}]};}"
};
__initData2 = {
  code: "function GuildOnboardingPromptsTsx2(){const{showPrompts,withDelay,withTiming,Easing,useReducedMotion}=this.__closure;const rawOpacity=showPrompts.get()?0:1;const opacity=withDelay(200,withTiming(rawOpacity,{duration:300,easing:Easing.out(Easing.ease)}));const rawTranslateY=!useReducedMotion&&showPrompts.get()?-80:0;const translateY=withDelay(200,withTiming(rawTranslateY,{duration:300,easing:Easing.out(Easing.ease)}));return{opacity:opacity,transform:[{translateY:translateY}]};}"
};
__initData3 = {
  code: "function GuildOnboardingPromptsTsx3(){const{showPrompts,withDelay,withTiming,Easing}=this.__closure;const rawOpacity=showPrompts.get()?0:1;const opacity=withDelay(200,withTiming(rawOpacity,{duration:300,easing:Easing.out(Easing.ease)}));return{opacity:opacity};}"
};
__initData4 = {
  code: "function GuildOnboardingPromptsTsx4(){const{showPrompts,withDelay,withTiming,Easing}=this.__closure;const rawOpacity=showPrompts.get()?0:1;const opacity=withDelay(200,withTiming(rawOpacity,{duration:300,easing:Easing.out(Easing.ease)}));return{opacity:opacity};}"
};
__initData5 = {
  code: "function GuildOnboardingPromptsTsx5(){const{showPrompts,withDelay,withTiming,Easing,useReducedMotion}=this.__closure;const rawOpacity=showPrompts.get()?1:0;const opacity=withDelay(600,withTiming(rawOpacity,{duration:300,easing:Easing.out(Easing.ease)}));const rawTranslateY=!useReducedMotion&&!showPrompts.get()?80:0;const translateY=withDelay(600,withTiming(rawTranslateY,{duration:300,easing:Easing.out(Easing.ease)}));return{opacity:opacity,transform:[{translateY:translateY}]};}"
};
export default function GuildOnboardingPrompt(props) {
  let stateFromStores2, c14698_7, c14698_8, navigation, skipped, c14698_11, sharedValue, callback, stateFromStores3, stateFromStoresArray, required, c14698_17, setState, guildSplashURL, required2;
  const { guildId, currentPromptIdx, prompts, selectOption, onClose, landingAnimation } = props;
  let isFirstOpen = props.isFirstOpen;
  const backShouldLeaveGuild = props.backShouldLeaveGuild;
  stateFromStores2 = void 0;
  c14698_7 = void 0;
  c14698_8 = void 0;
  navigation = void 0;
  skipped = void 0;
  c14698_11 = void 0;
  sharedValue = void 0;
  callback = void 0;
  stateFromStores3 = void 0;
  stateFromStoresArray = void 0;
  required = void 0;
  c14698_17 = void 0;
  setState = void 0;
  guildSplashURL = void 0;
  required2 = void 0;
  const styles = useStyles();
  const stateFromStores = useStateFromStores([MemberVerificationFormStore], () => MemberVerificationFormStore.getRulesPrompt(guildId));
  stateFromStores2 = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
  const bottom = useSafeAreaInsets_native().bottom;
  const r5 = useStateFromStores([GuildOnboardingPromptsStore], () => GuildOnboardingPromptsStore.getOnboardingConnections(guildId)).length > 0;
  c14698_7 = r5;
  if (isFirstOpen) {
    isFirstOpen = currentPromptIdx === 0;
  }
  if (isFirstOpen) {
    isFirstOpen = !r5;
  }
  c14698_8 = isFirstOpen;
  navigation = useNavigation();
  skipped = prompts.length > 0;
  const currentPrompt = prompts[currentPromptIdx];
  c14698_11 = currentPrompt;
  sharedValue = useSharedValue(!isFirstOpen);
  callback = useCallback(() => {
    GuildOnboardingActionCreators.completeOnboarding(guildId, prompts);
  }, [guildId, prompts]);
  stateFromStores3 = useStateFromStores([GuildStore], () => GuildStore.getGuild(guildId));
  stateFromStoresArray = useStateFromStoresArray([GuildOnboardingPromptsStore], () => c14698_11 != null ? GuildOnboardingPromptsStore.getOnboardingResponsesForPrompt(guildId, c14698_11.id) : [], [guildId, currentPrompt]);
  required = stateFromStoresArray.length === 0 && currentPrompt?.required;
  const lastPrompt = currentPromptIdx + 1 >= prompts.length && !showRulesInOnboarding(stateFromStores3, stateFromStores);
  c14698_17 = lastPrompt;
  let color;
  [color, setState] = useState(Module712.unsafe_rawColors.PRIMARY_800);
  guildSplashURL = stateFromStores3 != null ? AvatarUtils.getGuildSplashURL({
    id: stateFromStores3.id,
    splash: stateFromStores3.splash,
    size: 400 * getDevicePixelRatio_native()
  }) : null;
  useEffect(() => {
    if (guildSplashURL != null) {
      (function getBackgroundGradientColor() {
        return _getBackgroundGradientColor.apply(this, arguments);
      })(guildSplashURL).then((result) => {
        setState(result);
      });
    }
  }, [guildSplashURL]);
  useEffect(() => {
    if (c14698_8) {
      AnalyticsUtils.track(AnalyticEvents.GUILD_ONBOARDING_STEP_VIEWED, {
        ...collectGuildAnalyticsMetadata(guildId),
        step: -1,
        required: true
      });
      AnalyticsUtils.track(AnalyticEvents.GUILD_ONBOARDING_STEP_COMPLETED, {
        ...collectGuildAnalyticsMetadata(guildId),
        step: -1,
        skipped,
        is_final_step: false,
        in_onboarding: true
      });
    }
  }, [guildId, skipped, stateFromStores, isFirstOpen]);
  useEffect(() => {
    if (c14698_8) {
      setTimeout(() => {
        if (skipped) {
          sharedValue.set(true);
          return void 0;
        }
        onClose();
        callback();
      }, 2000);
    }
  }, [sharedValue, isFirstOpen, skipped, r5, onClose, callback, guildId]);
  useEffect(() => {
    if (!(c14698_8 || skipped)) {
      onClose();
    }
  }, [isFirstOpen, skipped, onClose]);
  required2 = skipped ? prompts[0].required : skipped;
  useEffect(() => {
    if (currentPromptIdx === 0) {
      AnalyticsUtils.track(AnalyticEvents.GUILD_ONBOARDING_STEP_VIEWED, {
        ...collectGuildAnalyticsMetadata(guildId),
        step: 0,
        required: required2
      });
    }
  }, [guildId, required2, currentPromptIdx]);
  const ot = function ot() {
    return {
      opacity: _timing.withTiming(sharedValue.get() ? 0 : 1, {
        duration: 300,
        easing: _ReanimatedRexport.Easing.out(_ReanimatedRexport.Easing.ease)
      }),
      transform: [{
        translateY: _timing.withTiming(stateFromStores2 ? 0 : sharedValue.get() ? -80 : 0, {
          duration: 300,
          easing: _ReanimatedRexport.Easing.out(_ReanimatedRexport.Easing.ease)
        })
      }]
    };
  };
  ot.__closure = {
    showPrompts: sharedValue,
    withTiming: _timing.withTiming,
    Easing: _ReanimatedRexport.Easing,
    useReducedMotion: stateFromStores2
  };
  ot.__workletHash = 6820086589932;
  ot.__initData = __initData;
  const animatedStyle = useAnimatedStyle(ot);
  const st = function st() {
    return {
      opacity: _ReanimatedRexport.withDelay(200, _timing.withTiming(sharedValue.get() ? 0 : 1, {
        duration: 300,
        easing: _ReanimatedRexport.Easing.out(_ReanimatedRexport.Easing.ease)
      })),
      transform: [{
        translateY: _ReanimatedRexport.withDelay(200, _timing.withTiming(stateFromStores2 ? 0 : sharedValue.get() ? -80 : 0, {
          duration: 300,
          easing: _ReanimatedRexport.Easing.out(_ReanimatedRexport.Easing.ease)
        }))
      }]
    };
  };
  st.__closure = {
    showPrompts: sharedValue,
    withDelay: _ReanimatedRexport.withDelay,
    withTiming: _timing.withTiming,
    Easing: _ReanimatedRexport.Easing,
    useReducedMotion: stateFromStores2
  };
  st.__workletHash = 3034833873876;
  st.__initData = __initData2;
  const animatedStyle2 = useAnimatedStyle(st);
  const rt = function rt() {
    return {
      opacity: _ReanimatedRexport.withDelay(200, _timing.withTiming(sharedValue.get() ? 0 : 1, {
        duration: 300,
        easing: _ReanimatedRexport.Easing.out(_ReanimatedRexport.Easing.ease)
      }))
    };
  };
  rt.__closure = {
    showPrompts: sharedValue,
    withDelay: _ReanimatedRexport.withDelay,
    withTiming: _timing.withTiming,
    Easing: _ReanimatedRexport.Easing
  };
  rt.__workletHash = 2795589385440;
  rt.__initData = __initData3;
  const animatedStyle3 = useAnimatedStyle(rt);
  const lt = function lt() {
    return {
      opacity: _ReanimatedRexport.withDelay(200, _timing.withTiming(sharedValue.get() ? 0 : 1, {
        duration: 300,
        easing: _ReanimatedRexport.Easing.out(_ReanimatedRexport.Easing.ease)
      }))
    };
  };
  lt.__closure = {
    showPrompts: sharedValue,
    withDelay: _ReanimatedRexport.withDelay,
    withTiming: _timing.withTiming,
    Easing: _ReanimatedRexport.Easing
  };
  lt.__workletHash = 13481450530727;
  lt.__initData = __initData4;
  const animatedStyle4 = useAnimatedStyle(lt);
  const ct = function ct() {
    return {
      opacity: _ReanimatedRexport.withDelay(600, _timing.withTiming(sharedValue.get() ? 1 : 0, {
        duration: 300,
        easing: _ReanimatedRexport.Easing.out(_ReanimatedRexport.Easing.ease)
      })),
      transform: [{
        translateY: _ReanimatedRexport.withDelay(600, _timing.withTiming(stateFromStores2 ? 0 : sharedValue.get() ? 0 : 80, {
          duration: 300,
          easing: _ReanimatedRexport.Easing.out(_ReanimatedRexport.Easing.ease)
        }))
      }]
    };
  };
  ct.__closure = {
    showPrompts: sharedValue,
    withDelay: _ReanimatedRexport.withDelay,
    withTiming: _timing.withTiming,
    Easing: _ReanimatedRexport.Easing,
    useReducedMotion: stateFromStores2
  };
  ct.__workletHash = 14018549800735;
  ct.__initData = __initData5;
  const animatedStyle5 = useAnimatedStyle(ct);
  useLayoutEffect(() => {
    navigation.setOptions({
      headerLeft: currentPromptIdx === 0 && !c14698_7 ? getHeaderCloseButton(() => {
        AnalyticsUtils.track(AnalyticEvents.GUILD_ONBOARDING_STEP_COMPLETED, {
          ...collectGuildAnalyticsMetadata(guildId),
          step: 0,
          skipped: true,
          back: false,
          options_selected: 0,
          in_onboarding: true,
          is_final_step: false
        });
        if (backShouldLeaveGuild) {
          const channel = ChannelStore.getChannel(SelectedChannelStore.getLastSelectedChannelId());
          if (channel != null && channel.guild_id !== guildId) {
            transitionTo(Routes.CHANNEL(channel.guild_id, channel.id));
          } else {
            transitionTo(Routes.ME, {
              navigationReplace: true
            });
          }
          onClose();
        } else {
          onClose();
        }
      }) : currentPromptIdx === 0 && c14698_7 ? getHeaderBackButton(() => {
        AnalyticsUtils.track(AnalyticEvents.GUILD_ONBOARDING_STEP_COMPLETED, {
          ...collectGuildAnalyticsMetadata(guildId),
          step: 0,
          skipped: false,
          back: true,
          options_selected: stateFromStoresArray.length,
          in_onboarding: true,
          is_final_step: false
        });
        navigation.pop();
      }, true) : getHeaderBackButton(() => {
        AnalyticsUtils.track(AnalyticEvents.GUILD_ONBOARDING_STEP_COMPLETED, {
          ...collectGuildAnalyticsMetadata(guildId),
          step: currentPromptIdx,
          skipped: false,
          back: true,
          options_selected: stateFromStoresArray.length,
          in_onboarding: true,
          is_final_step: false
        });
        AnalyticsUtils.track(AnalyticEvents.GUILD_ONBOARDING_STEP_VIEWED, {
          ...collectGuildAnalyticsMetadata(guildId),
          step: currentPromptIdx - 1,
          required: prompts[currentPromptIdx - 1].required
        });
        navigation.pop();
      }, true)
    });
  }, [navigation, currentPromptIdx, stateFromStoresArray, guildId, prompts, onClose, backShouldLeaveGuild, r5]);
  let r241 = null;
  if (skipped) {
    const r242 = currentPrompt == null;
    r241 = null;
    if (!r242) {
      const handleOnPress = function handleOnPress() {
        if (!required) {
          if (c14698_17) {
            navigation.push(GuildOnboardingModalStates.COMPLETED);
          } else {
            AnalyticsUtils.track(AnalyticEvents.GUILD_ONBOARDING_STEP_COMPLETED, {
              ...collectGuildAnalyticsMetadata(guildId),
              step: currentPromptIdx,
              options_selected: stateFromStoresArray.length,
              skipped: stateFromStoresArray.length === 0,
              back: false,
              in_onboarding: true,
              is_final_step: false
            });
            if (currentPromptIdx < prompts.length - 1) {
              AnalyticsUtils.track(AnalyticEvents.GUILD_ONBOARDING_STEP_VIEWED, {
                ...collectGuildAnalyticsMetadata(guildId),
                step: currentPromptIdx + 1,
                required: prompts[currentPromptIdx + 1].required
              });
            }
            if (currentPromptIdx + 1 < prompts.length) {
              navigation.push(GuildOnboardingModalStates.PROMPT, {
                currentPrompt: currentPromptIdx + 1
              });
            } else if (showRulesInOnboarding(stateFromStores3, stateFromStores)) {
              navigation.push(GuildOnboardingModalStates.RULES);
            }
          }
        }
      };
      const type = currentPrompt.type;
      if (OnboardingPromptType.MULTIPLE_CHOICE === type) {
        r241 = <MultipleChoicePrompt guildId={guildId} currentPrompt={currentPrompt} lastPrompt={lastPrompt} currentPromptIndex={currentPromptIdx} numberOfPrompts={prompts.length} selectOption={selectOption} handleOnPress={handleOnPress} />;
      } else if (OnboardingPromptType.DROPDOWN === type) {
        r241 = <DropdownPrompt guildId={guildId} currentPrompt={currentPrompt} lastPrompt={lastPrompt} currentPromptIndex={currentPromptIdx} numberOfPrompts={prompts.length} selectOption={selectOption} handleOnPress={handleOnPress} />;
      } else {
        assertNever(currentPrompt.type);
        r241 = void 0;
      }
    }
  }
  const r264 = [<SafeAreaPaddingView top bottom style={[styles.flex, styles.container]}>
    <ReanimatedRexport.View style={[styles.flex, animatedStyle5]}>{r241}</ReanimatedRexport.View>
  </SafeAreaPaddingView>, ,];
  const r314 = [<ReanimatedRexport.View style={[styles.landingOverlay, animatedStyle4]}>
    {guildSplashURL != null ? <BackgroundImageGradient splashUrl={guildSplashURL} color={color} /> : null}
    <Module4611 style={styles.darkColorGradient} start={VerticalGradient.START} end={VerticalGradient.END} colors={[hexWithOpacity(Module712.unsafe_rawColors.PRIMARY_800, 0.5), Module712.unsafe_rawColors.PRIMARY_800]} />
  </ReanimatedRexport.View>, <ReanimatedRexport.View style={[styles.artWrapper, animatedStyle]}>
    <LottieAnimationView source={landingAnimation} autoPlay={!stateFromStores2} style={{
      width: "100%"
    }} />
  </ReanimatedRexport.View>, ,];
  const O2bQlD = t.O2bQlD;
  let guildName = stateFromStores3?.name;
  if (guildName == null) {
    guildName = "";
  }
  r314[2] = <ReanimatedRexport.View style={[styles.landingBody, animatedStyle2]}>
    <Text style={styles.subtitle} variant="text-md/semibold" color="text-overlay-light">
      {intl.format(O2bQlD, {
        guildName
      })}
    </Text>
    <Text style={styles.onboardingTitle} accessibilityRole="header" variant="heading-xl/semibold" color="text-overlay-light">
      {intl.string(t["Alcl/e"])}
    </Text>
  </ReanimatedRexport.View>;
  r264[1] = <View style={StyleSheet.absoluteFill} pointerEvents="none">
    <ReanimatedRexport.View style={[styles.flex, styles.landingOverlay]} pointerEvents="none">{r314}</ReanimatedRexport.View>
    <ReanimatedRexport.View style={[styles.onboardingPolicy, animatedStyle3, {
      bottom
    }]} pointerEvents="auto">
      <Text style={styles.onboardingPolicyText} variant="heading-sm/normal" color="text-default">
        {intl.format(t.kI6UoD, {
          privacyLink: MarketingURLs.PRIVACY
        })}
      </Text>
    </ReanimatedRexport.View>
  </View>;
  return <View style={styles.flex}>{r264}</View>;
};