// Metro module 5179 (f5180).
import { useMemo, useState, useCallback } from "react";
import { FlatList, Image as Image2, ScrollView, View } from "react-native";
import EmojiStore from "../../emojis/EmojiStore";
import MemberVerificationFormStore from "../../guild_member_verification/MemberVerificationFormStore";
import GuildStore from "../../../stores/GuildStore";
import GuildOnboardingPromptsStore from "../GuildOnboardingPromptsStore";
import { GuildOnboardingModalStates } from "./GuildOnboardingConstants";
import { EMOJI_URL_BASE_SIZE } from "../../emojis/EmojiConstants";
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 { useNavigation } from "../../../design/components/Navigator/native/useNavigation.native";
import { useStateFromStores, useStateFromStoresArray } from "../../../_bundle/Module589";
import useSafeAreaInsets_native from "../../safe_area/useSafeAreaInsets.native";
import { useToken } from "../../../design/tokens/native/useToken";
import Module689 from "../../../_bundle/Module689";
import { SafeAreaPaddingView } from "../../../components_native/common/SafeAreaView";
import TermsFieldList from "../../guild_member_verification/native/components/form_fields/TermsFieldList";
import { Text } from "../../../design/components/Text/native/Text";
import { intl, t } from "../../../intl/index.native";
import { Button } from "../../../design/components/Button/native/Button.native";
import MemberVerificationActionCreators from "../../guild_member_verification/MemberVerificationActionCreators";
import Module4611 from "../../../_bundle/Module4611";
import { VerticalGradient } from "../../../ConstantsIOS";
import { getSelectedRoleIds, getSelectedChannelIds } from "../GuildOnboardingUtils";
import usePromptHelpText from "../usePromptHelpText";
import GuildOnboardingPromptOptionButton from "./GuildOnboardingPromptOptionButton";
import Emoji from "../../emojis/native/Emoji";
import AvatarUtils from "../../../utils/AvatarUtils";
import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
import { PressableHighlight } from "../../../design/void/Pressables/native/Pressables";
import Module5505 from "../../../_bundle/Module5505";
let useStyles, PromptFooter, formattedNameHighlight, DropdownOption;
const PromptHeader = function PromptHeader(props) {
  const { currentPrompt: currentPrompt3, numberOfPrompts, currentPromptIndex } = props;
  const styles = useStyles();
  return <>
    <View style={styles.promptHeader}>
      <Text style={styles.countText} variant="text-sm/medium" color="text-muted">
        {intl.format(t.isV0NW, {
          currentQuestion: currentPromptIndex + 1,
          questionCount: numberOfPrompts
        })}
      </Text>
      {currentPrompt3?.required ? <>
        <View style={styles.requiredSeparator} />
        <Text variant="text-sm/medium" color="text-brand">
          {intl.string(t.Ur8Vrt)}
        </Text>
      </> : null}
    </View>
    <Text style={styles.title} accessibilityRole="header" variant="heading-xl/semibold" color="mobile-text-heading-primary">{currentPrompt3.title}</Text>
  </>;
};
PromptFooter = function PromptFooter(props) {
  let c14713_2;
  const { guildId, currentPrompt: currentPrompt3, selectedOptionIds, handleOnPress, lastPrompt } = props;
  c14713_2 = void 0;
  const styles = useStyles();
  const stateFromStores4 = useStateFromStores([GuildStore], () => GuildStore.getGuild(guildId));
  const r2 = selectedOptionIds.length === 0 && !currentPrompt3?.required;
  const text = lastPrompt ? `${intl.string(t["8SuVoE"])} 🎉` : r2 ? intl.string(t["5Wxrcd"]) : intl.string(t.PDTjLN);
  const disabled = selectedOptionIds.length === 0 && currentPrompt3?.required;
  const r55 = currentPrompt3 == null;
  let r19 = void 0;
  if (!r55) {
    const options = currentPrompt3.options;
    r19 = options == null ? void 0 : options.filter((option) => selectedOptionIds.includes(option.id));
  }
  c14713_2 = r19;
  const promptHelpText = usePromptHelpText({
    guild: stateFromStores4,
    prompt: currentPrompt3,
    selectedRoleIds: useMemo(() => c14713_2 != null ? getSelectedRoleIds(c14713_2) : new Set(), [r19]),
    selectedChannelIds: useMemo(() => c14713_2 != null ? getSelectedChannelIds(c14713_2) : new Set(), [r19]),
    itemHook: formattedNameHighlight
  });
  const { helpText, helpTextAdditional } = promptHelpText;
  const token = useToken(Module712.colors.BACKGROUND_BASE_LOWER);
  return <View style={styles.footer}>
    <Module4611 style={[styles.scrollContainerGradient]} start={VerticalGradient.START} end={VerticalGradient.END} colors={[Module689(token).alpha(0).hex(), Module689(token).alpha(1).hex()]} pointerEvents="none" />
    <View style={styles.footerContent}>
      {disabled ? <Text style={styles.helpText} variant="text-xs/medium" color="text-default">
        {intl.string(t.dA1dSf)}
      </Text> : null}
      {helpText === "" ? helpTextAdditional !== "" ? <Text style={styles.helpText} variant="text-xs/medium" color="text-default">
        {helpText}
        {" "}
        {helpTextAdditional}
      </Text> : null : <Text style={styles.helpText} variant="text-xs/medium" color="text-default">
        {helpText}
        {" "}
        {helpTextAdditional}
      </Text>}
      <Button variant={r2 ? lastPrompt ? "primary" : "secondary" : "primary"} size="md" grow text={text} onPress={handleOnPress} disabled={disabled} />
    </View>
  </View>;
};
formattedNameHighlight = function formattedNameHighlight(a0, a1) {
  return <Text key={a1} variant="text-xs/medium" color="mobile-text-heading-primary">
    {a0}
  </Text>;
};
DropdownOption = function DropdownOption(props) {
  const option = props.option;
  const styles = useStyles();
  const stateFromStores4 = useStateFromStores([EmojiStore], () => option.emoji?.id != null ? EmojiStore.getUsableCustomEmojiById(option.emoji?.id) : null);
  const src = stateFromStores4 != null ? AvatarUtils.getEmojiURL({
    id: stateFromStores4.id,
    animated: stateFromStores4.animated,
    size: EMOJI_URL_BASE_SIZE
  }) : void 0;
  let name = option.emoji?.name;
  if (name == null) {
    name = "";
  }
  return <View style={styles.dropdownPill}>
    <View style={styles.emojiContainer}>
      <Emoji textEmojiStyle={styles.optionTextEmoji} fastImageStyle={styles.optionImageEmoji} src={src} name={name} />
    </View>
    <Text variant="text-md/semibold">{option.title}</Text>
  </View>;
};
useStyles = createStyles({
  flex: {
    flex: 1
  },
  container: {
    display: "flex",
    flex: 1,
    flexGrow: 1,
    marginTop: NAV_BAR_HEIGHT,
    marginBottom: 16,
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWER
  },
  scrollContainer: {
    display: "flex",
    flexGrow: 1,
    justifyContent: "center",
    paddingHorizontal: 16,
    paddingTop: 0,
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWER
  },
  scrollContainerGradient: {
    position: "absolute",
    height: 48,
    width: "100%",
    left: 0,
    top: -48
  },
  promptHeader: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 8
  },
  requiredSeparator: {
    flexShrink: 0,
    marginHorizontal: 8,
    color: Module712.colors.BORDER_SUBTLE,
    backgroundColor: Module712.colors.BORDER_SUBTLE,
    width: 4,
    height: 4,
    borderRadius: Module712.radii.xs
  },
  countText: {},
  title: {
    marginBottom: 32
  },
  helpText: {
    marginTop: 8,
    marginBottom: 8,
    textAlign: "center"
  },
  footer: {
    display: "flex",
    flexDirection: "column",
    justifyContent: "flex-end",
    alignItems: "center",
    bottom: 0,
    paddingBottom: 8,
    position: "absolute",
    width: "100%",
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWER
  },
  footerText: {
    paddingHorizontal: 16,
    paddingBottom: 8,
    paddingTop: 8
  },
  footerContent: {
    width: "100%",
    paddingHorizontal: 16
  },
  optionTextEmoji: {
    fontSize: 18,
    lineHeight: 22,
    marginRight: 6
  },
  optionImageEmoji: {
    height: 22,
    width: 22,
    marginRight: 6
  },
  emojiContainer: {
    display: "flex",
    alignItems: "center"
  },
  dropdownContainer: {
    borderRadius: Module712.radii.sm,
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST,
    padding: 8,
    paddingRight: 32,
    minHeight: 48,
    display: "flex",
    flexDirection: "row",
    flexWrap: "wrap",
    alignItems: "center",
    position: "relative"
  },
  emptyDropdownText: {
    marginTop: 16
  },
  dropdownPill: {
    borderRadius: Module712.radii.sm,
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
    padding: 6,
    marginRight: 8,
    marginTop: 8,
    display: "flex",
    flexDirection: "row",
    alignItems: "center"
  },
  dropdownIconContainer: {
    position: "absolute",
    right: 4,
    top: 8
  },
  dropdownIcon: {
    height: 32,
    width: 32
  }
});
export function RulesPrompt(props) {
  let stateFromStores2, stateFromStores3, setState;
  const guildId2 = props.guildId;
  stateFromStores2 = void 0;
  stateFromStores3 = void 0;
  setState = void 0;
  const styles = useStyles();
  const navigation = useNavigation();
  const stateFromStores = useStateFromStores([MemberVerificationFormStore], () => MemberVerificationFormStore.getRulesPrompt(guildId2));
  stateFromStores2 = useStateFromStores([GuildStore], () => GuildStore.getGuild(guildId2)?.rulesChannelId);
  const bottom = useSafeAreaInsets_native().bottom;
  const r44 = 64 + bottom;
  stateFromStores3 = useStateFromStores([MemberVerificationFormStore], () => MemberVerificationFormStore.get(guildId2));
  let state;
  [state, setState] = useState(false);
  const token = useToken(Module712.colors.BACKGROUND_BASE_LOWER);
  const colors = [Module689(token).alpha(0).hex(), Module689(token).alpha(1).hex()];
  let r82 = null;
  if (stateFromStores != null) {
    const paddingBottom = r44 + 8;
    r82 = <SafeAreaPaddingView top style={[styles.flex, styles.container]}>
      <View style={styles.flex}>
        <FlatList contentContainerStyle={[styles.scrollContainer, {
          paddingBottom
        }]} data={[0]} renderItem={() => <TermsFieldList rules={stateFromStores.values} rulesChannelId={stateFromStores2} />} onEndReached={() => setState(true)} />
        <View style={[styles.footer, styles.footerContent, {
          paddingBottom: bottom
        }]}>
          <Text style={styles.footerText} variant="text-xs/medium">
            {state ? intl.string(t.arAe3I) : intl.string(t.D0CVAc)}
          </Text>
          <Button variant="primary" size="md" grow disabled={!state} text={intl.string(t["0KL0ot"])} onPress={function onPress() {
            if (stateFromStores != null && stateFromStores3 != null) {
              MemberVerificationActionCreators.submitVerificationForm(guildId2, {
                ...stateFromStores3,
                formFields: [{
                  ...stateFromStores,
                  response: true
                }]
              });
              navigation.push(GuildOnboardingModalStates.COMPLETED);
            }
          }} />
        </View>
      </View>
      <Module4611 style={[styles.scrollContainerGradient, {
        bottom: paddingBottom
      }]} start={VerticalGradient.START} end={VerticalGradient.END} colors={colors} pointerEvents="none" />
    </SafeAreaPaddingView>;
  }
  return r82;
}
export function MultipleChoicePrompt(props) {
  const { guildId: guildId3, currentPrompt, lastPrompt, currentPromptIndex, numberOfPrompts, selectOption, handleOnPress } = props;
  const styles = useStyles();
  const bottom = useSafeAreaInsets_native().bottom;
  const stateFromStoresArray = useStateFromStoresArray([GuildOnboardingPromptsStore], () => currentPrompt != null ? GuildOnboardingPromptsStore.getOnboardingResponsesForPrompt(guildId3, currentPrompt.id) : [], [guildId3, currentPrompt]);
  return <>
    <ScrollView contentContainerStyle={[styles.scrollContainer, {
      paddingBottom: 64 + bottom + 48 + 48,
      position: "relative"
    }]}>
      <PromptHeader currentPrompt={currentPrompt} numberOfPrompts={numberOfPrompts} currentPromptIndex={currentPromptIndex} />
      <View>
        {currentPrompt.options.map((a0) => {
          let selected = stateFromStoresArray.includes(a0.id);
          if (selected == null) {
            selected = false;
          }
          return <GuildOnboardingPromptOptionButton key={a0.id} option={a0} guildId={guildId3} onSelect={(event) => {
            let r4 = event;
            const id = currentPrompt.id;
            const id2 = a0.id;
            if (event == null) {
              r4 = false;
            }
            return selectOption(id, id2, r4);
          }} selected={selected} />;
        })}
      </View>
    </ScrollView>
    <PromptFooter guildId={guildId3} currentPrompt={currentPrompt} selectedOptionIds={stateFromStoresArray} handleOnPress={handleOnPress} lastPrompt={lastPrompt} />
  </>;
}
export function DropdownPrompt(props) {
  const { guildId: guildId4, currentPrompt: currentPrompt2, lastPrompt, currentPromptIndex, numberOfPrompts, selectOption: selectOption2, handleOnPress } = props;
  const styles = useStyles();
  const bottom = useSafeAreaInsets_native().bottom;
  const stateFromStoresArray2 = useStateFromStoresArray([GuildOnboardingPromptsStore], () => currentPrompt2 != null ? GuildOnboardingPromptsStore.getOnboardingResponsesForPrompt(guildId4, currentPrompt2.id) : [], [guildId4, currentPrompt2]);
  const r3 = currentPrompt2 == null;
  let r24 = void 0;
  if (!r3) {
    const options = currentPrompt2.options;
    r24 = options == null ? void 0 : options.filter((option) => stateFromStoresArray2.includes(option.id));
  }
  return <>
    <ScrollView contentContainerStyle={[styles.scrollContainer, {
      paddingBottom: 64 + bottom + 48 + 48,
      position: "relative"
    }]}>
      <PromptHeader currentPrompt={currentPrompt2} numberOfPrompts={numberOfPrompts} currentPromptIndex={currentPromptIndex} />
      <View>
        <PressableHighlight style={styles.dropdownContainer} onPress={useCallback(() => {
          ActionSheetActionCreators.openLazy(import("./DropdownOptionsActionSheet"), "DropdownOptions", {
            guildId: guildId4,
            promptId: currentPrompt2.id,
            onSelect: (a0, a1) => {
              let r4 = a1;
              const id = currentPrompt2.id;
              const id2 = a0.id;
              if (a1 == null) {
                r4 = false;
              }
              return selectOption2(id, id2, r4);
            }
          });
        }, [guildId4, currentPrompt2.id, selectOption2])}>
          {r24.length === 0 && <Text style={styles.emptyDropdownText} variant="text-sm/normal" color="text-muted">No answers selected.</Text>}
          {r24.map((item) => <DropdownOption key={item.id} option={item} />)}
          <View style={styles.dropdownIconContainer}>
            <Image2 style={styles.dropdownIcon} source={Module5505} />
          </View>
        </PressableHighlight>
      </View>
    </ScrollView>
    <PromptFooter guildId={guildId4} currentPrompt={currentPrompt2} selectedOptionIds={stateFromStoresArray2} handleOnPress={handleOnPress} lastPrompt={lastPrompt} />
  </>;
}