// Metro module 5211 (f5212).
import { useCallback } from "react";
import { View } from "react-native";
import EmojiStore from "../../emojis/EmojiStore";
import GuildOnboardingPromptsStore from "../GuildOnboardingPromptsStore";
import { EMOJI_URL_BASE_SIZE } from "../../emojis/EmojiConstants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import { useStateFromStores, useStateFromStoresArray } from "../../../_bundle/defaultAreStatesEqual";
import Emoji from "../../emojis/native/Emoji";
import AvatarUtils from "../../../utils/AvatarUtils";
import { TextBadge, BadgeColors, CardSection } from "../../../design/void/native";
import { intl, t } from "../../../intl/index.native";
import { Text } from "../../../design/components/Text/native/Text";
import FormCheckboxRow from "../../../design/void/Form/native/FormCheckboxRow";
import useSafeAreaInsets_native from "../../safe_area/useSafeAreaInsets.native";
import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
import { BottomSheetTitleHeader } from "../../../design/components/Sheet/native/BottomSheetTitleHeader.native";
import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
import { BottomSheetScrollView } from "../../../_bundle/Module5245";
import { Button } from "../../../design/components/Button/native/Button.native";
let useStyles;
const DropdownOptionRow = function DropdownOptionRow(props) {
  let leading;
  let c14759_2;
  const { option, responses, onSelect, canBeNew: canBeNew2 } = props;
  c14759_2 = void 0;
  const styles = useStyles();
  const stateFromStores = useStateFromStores([EmojiStore], () => option.emoji?.id != null ? EmojiStore.getUsableCustomEmojiById(option.emoji?.id) : null);
  const selected = responses.includes(option.id);
  c14759_2 = selected;
  const callback = useCallback(() => {
    onSelect(option, !c14759_2);
  }, [onSelect, option, selected]);
  const id = option.emoji?.id;
  L13: {
    if (id == null) {
      const r40 = option.emoji?.name != null;
      leading = null;
      if (!r40) {
        break L13;
      }
    }
    const src = stateFromStores != null ? AvatarUtils.getEmojiURL({
      id: stateFromStores.id,
      animated: stateFromStores.animated,
      size: EMOJI_URL_BASE_SIZE
    }) : void 0;
    let name = option.emoji?.name;
    if (name == null) {
      name = "";
    }
    leading = <View style={{
      display: "flex",
      alignItems: "center"
    }}>
      <Emoji textEmojiStyle={styles.optionTextEmoji} fastImageStyle={styles.optionImageEmoji} src={src} name={name} />
    </View>;
  }
  const trailing = canBeNew2 ? option.isUnseen ? <TextBadge color={BadgeColors.BRAND} text={intl.string(t.y2b7CA)} textStyle={styles.newBadge} /> : null : null;
  return <FormCheckboxRow label={<View style={styles.labelRow}>
    <Text variant="text-md/normal">{option.title}</Text>
    {trailing}
  </View>} selected={selected} leading={leading} trailing={trailing} onPress={callback} />;
};
useStyles = createStyles({
  optionTextEmoji: {
    fontSize: 24,
    lineHeight: 24,
    paddingTop: 5
  },
  optionImageEmoji: {
    height: 24,
    width: 24
  },
  newBadge: {
    fontWeight: "bold"
  },
  labelRow: {
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center"
  },
  closeButtonWrapper: {
    marginTop: 16,
    marginHorizontal: 16
  }
});
export default function DropdownOptionsActionSheet(props) {
  let stateFromStoresArray;
  const { guildId, promptId, canBeNew, onSelect: onSelect2 } = props;
  stateFromStoresArray = void 0;
  const styles = useStyles();
  const bottom = useSafeAreaInsets_native().bottom;
  const stateFromStores = useStateFromStores([GuildOnboardingPromptsStore], () => GuildOnboardingPromptsStore.getOnboardingPrompt(promptId));
  stateFromStoresArray = useStateFromStoresArray([GuildOnboardingPromptsStore], () => GuildOnboardingPromptsStore.getOnboardingResponsesForPrompt(guildId, promptId));
  const callback = useCallback(() => {
    ActionSheetActionCreators.hideActionSheet();
  }, []);
  if (stateFromStores == null) {
    return null;
  }
  return <BottomSheet scrollable header={<BottomSheetTitleHeader title={intl.string(t.E2ICbC)} />}>
    <BottomSheetScrollView contentContainerStyle={{
      paddingBottom: bottom
    }}>
      <CardSection accessibilityRole="radiogroup" accessibilityLabel={intl.string(t.E2ICbC)}>
        {stateFromStores.options.map((a0) => <DropdownOptionRow key={a0.id} option={a0} responses={stateFromStoresArray} onSelect={onSelect2} canBeNew={Boolean(canBeNew)} />)}
      </CardSection>
      <View style={styles.closeButtonWrapper}>
        <Button onPress={callback} text={intl.string(t.cpT0Cq)} grow />
      </View>
    </BottomSheetScrollView>
  </BottomSheet>;
};