// Metro module 9452 (f9453).
import { useRef, useCallback, useEffect, useState } from "react";
import { ActivityIndicator, Pressable, View, Platform } from "react-native";
import AccessibilityStore from "../../a11y/AccessibilityStore";
import ChannelStore from "../../../stores/ChannelStore";
import GuildMemberStore from "../../../stores/GuildMemberStore";
import MessageReactionsStore from "../../../stores/MessageReactionsStore";
import PermissionStore from "../../../stores/PermissionStore";
import { DEFAULT_NUM_REACTION_USERS, Permissions } from "../../../Constants";
import ReanimatedRexport, { useSharedValue, useAnimatedStyle } from "../../reanimated/ReanimatedRexport";
import { Text } from "../../../design/components/Text/native/Text";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { useStateFromStores } from "../../../_bundle/Module589";
import { MAX_REACTIONS, getReactionEmojiName, emojiEquals } from "../ReactionUtils";
import isUndefinedOrNull from "../../../_bundle/isUndefinedOrNull";
import { ReactionTypes } from "../../messages/MessageReactionsTypes";
import { getReactors, removeEmojiReactions, removeReaction, ReactionLocations } from "../ReactionActionCreators";
import useInitialValue from "../../../hooks/useInitialValue";
import Module12 from "../../../_bundle/Module12";
import useAnalyticsLocations from "../../app_analytics/useAnalyticsLocations";
import ReactionToProfileExperiment from "../ReactionToProfileExperiment";
import NicknameUtils from "../../../utils/NicknameUtils";
import UserUtils from "../../../utils/UserUtils";
import showUserProfileActionSheet from "../../user_profile/native/showUserProfileActionSheet";
import FormRow from "../../../design/void/Form/native/FormRow";
import { RefreshEmptyState, Avatar, AvatarSizes } from "../../../design/void/native";
import AvatarUtils from "../../../utils/AvatarUtils";
import DiscordTag from "../../user_profile/native/DiscordTag";
import { isAndroid, isIOS } from "../../../utils/PlatformUtils";
import { XSmallIcon } from "../../../design/components/Icon/native/redesign/generated/XSmallIcon";
import FormDivider from "../../../design/void/Form/native/FormDivider";
import SlideoutButton from "../../../components_native/common/SlideoutButton";
import { intl, t } from "../../../intl/index.native";
import { useEmojiColorPalette } from "../../emojis/hooks/useEmojiColorPalette";
import { hexOpacityToRgba } from "../../../utils/ColorUtils";
import { AnimateEmoji } from "../../user_settings/UserSettings";
import Emoji from "../../emojis/native/Emoji";
import useCanRemoveAllReactions from "../useCanRemoveAllReactions";
import * as _timing from "../../../design/animation/reanimated/timing/timing";
import { getWindowDimensions } from "../../screen/useWindowDimensions.native";
import { TrashIcon } from "../../../design/components/Icon/native/redesign/generated/TrashIcon";
import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
import { ChevronSmallRightIcon } from "../../../design/components/Icon/native/redesign/generated/ChevronSmallRightIcon";
import TidaWebformExperiment from "../../guild/TidaWebformExperiment";
import TabBar from "../../../components_native/common/TabBar";
import { triggerHapticFeedback } from "../../haptics/HapticUtils.native";
import HapticFeedbackTypes from "../../haptics/HapticFeedbackTypes";
import useSafeAreaInsets_native from "../../safe_area/useSafeAreaInsets.native";
import { useNoResultsSource } from "../../../design/components/Illustration/native/redesign/generated/NoResults";
import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
import { BottomSheetView } from "../../../_bundle/Module5245";
import { Storage } from "../../../_bundle/Module595";
import { useIsActiveChannelOrUnarchivableThread } from "../../threads/ThreadHooks";
import { BACKDROP_OPACITY } from "../../messages/native/burst_reactions/BurstReactionEffectUtils";
import BurstReactionAnimationPreview from "../../messages/native/burst_reactions/BurstReactionAnimationPreview";
import SwipeableFastList from "../../../components_native/common/SwipeableFastList";
import FastList from "../../../lib/native/FastList";
let AnimatedComponent, useStyles, useReactorsOnScrollNative, ReactionTab, __initData, __initData2, RemoveAllButton, EmojiOptionsButton, ReactionTabs, c6232_28, c6232_29;
const useReactors = function useReactors({ channelId, messageId, reaction, reactionType }) {
  let r37;
  const stateFromStores = useStateFromStores([MessageReactionsStore], () => {
    const reactions3 = MessageReactionsStore.getReactions(channelId, messageId, reaction.emoji, DEFAULT_NUM_REACTION_USERS, reactionType);
    const r16 = Array;
    let r18 = reactions3 == null ? void 0 : reactions3.values();
    if (r18 == null) {
      r18 = [];
    }
    return r16.from(r18);
  }, [channelId, messageId, reaction.emoji, reactionType], isUndefinedOrNull);
  if (reactionType === ReactionTypes.VOTE) {
    let r39 = reaction.count_details?.vote;
    if (r39 == null) {
      r39 = 0;
    }
    r37 = r39;
  } else {
    r37 = reactionType === ReactionTypes.BURST ? reaction.burst_count : reaction.count;
  }
  return {
    reactors: stateFromStores,
    reactorsHasMore: r37 > stateFromStores.length
  };
};
useReactorsOnScrollNative = function useReactorsOnScrollNative({ channelId: channelId2, messageId: messageId2, reactionSelected, reactors: reactors4, reactorsHasMore, reactionType: reactionType2 }) {
  let ref2, c17221_9;
  ref2 = void 0;
  c17221_9 = void 0;
  const ref = useRef(false);
  const id = reactors4.length > 0 ? reactors4[reactors4.length - 1].id : null;
  const callback = useCallback((a0, a1) => {
    if (a0 / a1 > 0.75 && reactorsHasMore && !ref.current) {
      ref.current = true;
      getReactors({
        channelId: channelId2,
        messageId: messageId2,
        emoji: reactionSelected.emoji,
        limit: DEFAULT_NUM_REACTION_USERS,
        after: id,
        type: reactionType2
      }).then(() => {
        ref.current = false;
      });
    }
  }, [channelId2, messageId2, reactionSelected, reactorsHasMore, id, reactionType2]);
  ref2 = useRef(callback);
  useEffect(() => {
    ref2.current = callback;
  }, [callback]);
  c17221_9 = useInitialValue(() => Module12.debounce((a0, a1) => ref2.current(a0, a1), 16));
  return useInitialValue(() => ({ nativeEvent }) => c17221_9(nativeEvent.contentOffset.y, nativeEvent.contentSize.height));
};
ReactionTab = function ReactionTab(props) {
  const { reaction: reaction3, selected } = props;
  const styles4 = useStyles();
  const r4 = reaction3.burst_count > 0;
  let burst_colors = reaction3.burst_colors;
  if (burst_colors == null) {
    burst_colors = [];
  }
  const emojiColorPalette = useEmojiColorPalette(burst_colors);
  const r10 = emojiColorPalette?.accentColor != null ? {
    color: emojiColorPalette.accentColor
  } : null;
  const r31 = emojiColorPalette != null ? {
    backgroundColor: hexOpacityToRgba(emojiColorPalette.backgroundColor, emojiColorPalette.opacity)
  } : null;
  const emoji2 = reaction3.emoji;
  const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
  const setting = AnimateEmoji.useSetting();
  const props2 = {
    style: [styles4.tabContainer, selected ? styles4.tabContainerSelected : null, selected ? r4 ? r31 : null : null],
    accessible: true,
    accessibilityLabel: emoji2.name,
    accessibilityState: {
      selected
    },
    children: [<Emoji src={emoji2.id != null ? AvatarUtils.getEmojiURL({
      id: emoji2.id,
      animated: emoji2.animated && !stateFromStores && setting,
      size: 48
    }) : void 0} name={emoji2.name} textEmojiStyle={[styles4.emoji, styles4.emojiText]} fastImageStyle={[styles4.emoji, styles4.emojiImage]} />, <Text variant="text-md/bold" style={[styles4.reactionCountText, selected ? styles4.reactionCountTextSelected : null, r4 ? r10 : null]}>
      {reaction3.burst_count > 0 ? reaction3.burst_count : reaction3.count}
    </Text>]
  };
  let id3 = emoji2.id;
  if (id3 == null) {
    id3 = emoji2.name;
  }
  return <View key={id3} {...props2} />;
};
RemoveAllButton = function RemoveAllButton(props) {
  let useReducedMotion, state, setState, sharedValue, sharedValue2, callback2;
  const { reactions, reactionSelectedIndex, channelId: channelId3, messageId: messageId3 } = props;
  useReducedMotion = void 0;
  state = void 0;
  setState = void 0;
  sharedValue = void 0;
  sharedValue2 = void 0;
  callback2 = void 0;
  const styles4 = useStyles();
  const canRemoveAllReactions = useCanRemoveAllReactions(useStateFromStores([ChannelStore], () => ChannelStore.getChannel(channelId3), [channelId3]));
  useReducedMotion = AccessibilityStore.useReducedMotion;
  [state, setState] = useState(true);
  sharedValue = useSharedValue(64);
  const S = function S() {
    return {
      maxWidth: useReducedMotion ? sharedValue.get() : _timing.withTiming(sharedValue.get(), {
        duration: 200
      })
    };
  };
  S.__closure = {
    useReducedMotion,
    buttonWidth: sharedValue,
    withTiming: _timing.withTiming
  };
  S.__workletHash = 16499689496895;
  S.__initData = __initData;
  const animatedStyle = useAnimatedStyle(S);
  sharedValue2 = useSharedValue(0);
  const T = function T() {
    return {
      opacity: useReducedMotion ? sharedValue2.get() : _timing.withTiming(sharedValue2.get(), {
        duration: 125
      }),
      color: "white",
      fontSize: 14,
      marginLeft: 8,
      textAlignVertical: "center"
    };
  };
  T.__closure = {
    useReducedMotion,
    textOpacity: sharedValue2,
    withTiming: _timing.withTiming
  };
  T.__workletHash = 8698187840986;
  T.__initData = __initData2;
  const animatedStyle2 = useAnimatedStyle(T);
  callback2 = useCallback(() => {
    setState(true);
    sharedValue.set(32);
    sharedValue2.set(0);
  }, [sharedValue, sharedValue2]);
  useEffect(() => {
    callback2();
  }, [reactionSelectedIndex, callback2]);
  return canRemoveAllReactions ? <Pressable onPress={() => {
    if (state) {
      setState(false);
      sharedValue.set(getWindowDimensions().width);
      sharedValue2.set(1);
    } else {
      removeEmojiReactions(channelId3, messageId3, reactions[reactionSelectedIndex].emoji);
      callback2();
    }
  }}>
    <ReanimatedRexport.View style={[styles4.removeAllButton, animatedStyle]}>
      <TrashIcon color={Module712.unsafe_rawColors.WHITE} size="sm" />
      <AnimatedComponent style={animatedStyle2} variant="text-sm/semibold" color="text-overlay-light">
        {intl.string(t["zx/e4P"])}
      </AnimatedComponent>
    </ReanimatedRexport.View>
  </Pressable> : null;
};
EmojiOptionsButton = function EmojiOptionsButton(props) {
  let reaction2;
  const { reactions: reactions3, reactionSelectedIndex: reactionSelectedIndex3, channelId: channelId4, messageId: messageId4 } = props;
  reaction2 = void 0;
  const styles4 = useStyles();
  const canRemoveReactions = useCanRemoveAllReactions(useStateFromStores([ChannelStore], () => ChannelStore.getChannel(channelId4), [channelId4]));
  reaction2 = reactions3[reactionSelectedIndex3];
  return <Pressable onPress={useCallback(() => {
    ActionSheetActionCreators.openLazy(import("./ReactionEmojiOptionsActionSheet"), "ReactionEmojiOptionsActionSheet", {
      channelId: channelId4,
      messageId: messageId4,
      reaction: reaction2,
      canRemoveReactions
    }, "replaceTopSheet");
  }, [channelId4, messageId4, reaction2, canRemoveReactions])} style={styles4.emojiOptionsButton}>
    <Text variant="text-xs/semibold" color="text-subtle">
      {intl.string(t.pCaYID)}
    </Text>
    <ChevronSmallRightIcon color={Module712.colors.ICON_SUBTLE} size="xs" />
  </Pressable>;
};
ReactionTabs = function ReactionTabs(props) {
  const styles4 = useStyles();
  const { reactions: reactions3, reactionSelectedIndex: reactionSelectedIndex2, setReactionSelectedIndex } = props;
  const tidaWebformEnabled = TidaWebformExperiment.useExperiment({
    location: "ReactionTabs"
  }, {
    autoTrackExposure: false
  }).tidaWebformEnabled;
  return <View style={styles4.reactionTab}>
    <TabBar tabs={reactions3.map((item, index) => {
      const props = {
        reaction: item,
        selected: index === reactionSelectedIndex2
      };
      let id3 = item.emoji.id;
      if (id3 == null) {
        id3 = "";
      }
      return <ReactionTab key={`${id3}:${item.emoji.name}`} {...props} />;
    })} tabStyle={styles4.tab} tabStyleActive={styles4.tabActive} tabStyleSelected={styles4.tabSelected} tabIndexSelected={reactionSelectedIndex2} onSelect={(event) => {
      triggerHapticFeedback(HapticFeedbackTypes.IMPACT_LIGHT);
      setReactionSelectedIndex(event);
    }} initialNumTabsToRender={MAX_REACTIONS} />
    <FormDivider outer />
    <View style={styles4.removeButtonContainer}>
      <Text style={styles4.emojiTextIdentifier} variant="eyebrow" color="text-default">
        {getReactionEmojiName(reactions3[reactionSelectedIndex2].emoji)}
      </Text>
      {tidaWebformEnabled ? <EmojiOptionsButton {...props} /> : <RemoveAllButton {...props} />}
    </View>
  </View>;
};
Platform;
AnimatedComponent = ReanimatedRexport.createAnimatedComponent(Text);
useStyles = createStyles({
  container: {
    flex: 1
  },
  containerEmpty: {
    padding: 32,
    borderTopLeftRadius: Module712.radii.sm,
    borderTopRightRadius: Module712.radii.sm
  },
  listRow: {
    height: 48,
    backgroundColor: Module712.colors.MOBILE_ACTIONSHEET_BACKGROUND
  },
  tabContainer: {
    flexDirection: "row",
    alignItems: "center",
    borderRadius: Module712.radii.sm,
    padding: 8,
    marginTop: 8
  },
  tabContainerSelected: {
    backgroundColor: Module712.colors.INTERACTIVE_BACKGROUND_SELECTED
  },
  tab: {
    padding: 0,
    marginHorizontal: 8,
    marginBottom: 8
  },
  tabSelected: {
    borderBottomColor: "transparent"
  },
  tabActive: {
    borderRadius: Module712.radii.sm
  },
  reactionTab: {
    display: "flex",
    flexDirection: "column"
  },
  removeButtonContainer: {
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center"
  },
  emojiOptionsButton: {
    flexDirection: "row",
    alignItems: "center",
    marginRight: Module712.space.PX_16,
    gap: 2
  },
  removeAllButton: {
    backgroundColor: Module712.colors.BACKGROUND_FEEDBACK_CRITICAL,
    borderRadius: Module712.radii.xxl,
    height: 32,
    overflow: "hidden",
    minWidth: 42,
    marginRight: 20,
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: 12
  },
  reactionCountText: {
    color: Module712.colors.INTERACTIVE_TEXT_DEFAULT
  },
  reactionCountTextSelected: {
    color: Module712.colors.INTERACTIVE_TEXT_ACTIVE
  },
  emoji: {
    marginRight: 8
  },
  emojiText: {
    lineHeight: 24,
    fontSize: 20,
    textAlign: "center",
    color: Module712.colors.INTERACTIVE_TEXT_DEFAULT
  },
  emojiImage: {
    resizeMode: "contain",
    width: 24,
    height: 24
  },
  emojiTextIdentifier: {
    padding: 16
  },
  avatar: {
    marginRight: 10
  },
  buttonRow: {
    flexDirection: "row",
    justifyContent: "flex-end",
    alignItems: "center"
  },
  loadingSpinner: {
    height: 48,
    padding: 6
  }
});
__initData = {
  code: "function MessageReactionsContentTsx1(){const{useReducedMotion,buttonWidth,withTiming}=this.__closure;return{maxWidth:useReducedMotion?buttonWidth.get():withTiming(buttonWidth.get(),{duration:200})};}"
};
__initData2 = {
  code: "function MessageReactionsContentTsx2(){const{useReducedMotion,textOpacity,withTiming}=this.__closure;return{opacity:useReducedMotion?textOpacity.get():withTiming(textOpacity.get(),{duration:125}),color:'white',fontSize:14,marginLeft:8,textAlignVertical:'center'};}"
};
c6232_28 = "MessageReactionsContent_SwipableBounced";
c6232_29 = Storage.get("MessageReactionsContent_SwipableBounced", false);
export { useReactors };
export { useReactorsOnScrollNative };
export function MessageReactionsEmpty() {
  const styles4 = useStyles();
  return <BottomSheet scrollable startHeight={338 + useSafeAreaInsets_native().bottom}>
    <BottomSheetView style={styles4.containerEmpty}>
      <RefreshEmptyState source={useNoResultsSource()} title={intl.string(t.HmPOrp)} body={intl.string(t["pTJ5J/"])} />
    </BottomSheetView>
  </BottomSheet>;
}
export function MessageReactionsContent(props) {
  const { channelId: channelId5, messageId: messageId7, emoji: emoji2, reactions: reactions3 } = props;
  let isSelectedBurst = props.isSelectedBurst;
  const { disableManage = false, disableTabs = false } = props;
  const styles4 = useStyles();
  const reactions2 = reactions3;
  const emoji = emoji2;
  if (isSelectedBurst === void 0) {
    isSelectedBurst = false;
  }
  let c17226_2 = isSelectedBurst;
  const [state, setReactionSelectedIndex2] = useState(() => {
    if (emoji == null) {
      return 0;
    }
    const r7 = reactions2.findIndex((item) => {
      let r17;
      const r12 = emojiEquals(item.emoji, emoji);
      let burst_count = item.burst_count;
      if (burst_count == null) {
        burst_count = 0;
      }
      let r15 = burst_count > 0;
      if (c17226_2) {
        if (r15) {
          r15 = r12;
        }
        r17 = r15;
      } else {
        r17 = r15 ? !r15 : r12;
      }
      return r17;
    });
    return r7 >= 0 ? r7 : 0;
  });
  const reactionSelectedIndex3 = Math.min(state, reactions2.length - 1);
  const reaction3 = reactions2[reactionSelectedIndex3];
  const reactionType3 = reaction3.me_vote != null ? ReactionTypes.VOTE : reaction3.burst_count > 0 ? ReactionTypes.BURST : ReactionTypes.NORMAL;
  let channelId6;
  const reactors4 = useReactors({
    channelId: channelId5,
    messageId: messageId7,
    reaction: reaction3,
    reactionType: reactionType3
  });
  const { reactors: reactors5, reactorsHasMore: reactorsHasMore3 } = reactors4;
  const isActiveChannelOrUnarchivableThread2 = useIsActiveChannelOrUnarchivableThread(useStateFromStores([ChannelStore], () => ChannelStore.getChannel(channelId5), [channelId5]));
  const safeAreaInsets_native = useSafeAreaInsets_native();
  channelId6 = channelId5;
  const r96 = useStateFromStores([PermissionStore], () => PermissionStore.canWithPartialContext(Permissions.MANAGE_MESSAGES, {
    channelId: channelId6
  }), [channelId5]) && !disableManage && isActiveChannelOrUnarchivableThread2;
  let id3 = reaction3.emoji.id;
  if (id3 == null) {
    id3 = reaction3.emoji.name;
  }
  let reactors2, messageId5, channelId7, c17229_3, isActiveChannelOrUnarchivableThread, styles2, analyticsLocations, reactionToProfileEnabled;
  let channelId8, messageId6, c17230_2, reactors3, styles3;
  const props2 = {
    accessibilityLabel: intl.string(t.gHp0C4),
    footerSize: 48,
    insetBottom: safeAreaInsets_native.bottom,
    onScroll: useReactorsOnScrollNative({
      channelId: channelId5,
      messageId: messageId7,
      reactionSelected: reaction3,
      reactors: reactors5,
      reactorsHasMore: reactorsHasMore3,
      reactionType: reactionType3
    }),
    renderFooter: null,
    renderItem: null,
    renderQuickActions: null,
    itemSize: 48,
    sections: null,
    style: null
  };
  const reactors = reactors5;
  const reactorsHasMore2 = reactorsHasMore3;
  const styles = useStyles();
  props2.renderFooter = useCallback(() => reactorsHasMore2 ? <ActivityIndicator style={styles.loadingSpinner} size="large" /> : reactors.length === 0 ? <ActivityIndicator style={styles.loadingSpinner} size="large" /> : null, [reactors, reactorsHasMore2, styles]);
  reactors2 = reactors;
  messageId5 = messageId7;
  channelId7 = channelId5;
  c17229_3 = reaction3;
  isActiveChannelOrUnarchivableThread = r96;
  styles2 = void 0;
  analyticsLocations = void 0;
  reactionToProfileEnabled = void 0;
  styles2 = useStyles();
  analyticsLocations = useAnalyticsLocations().analyticsLocations;
  reactionToProfileEnabled = ReactionToProfileExperiment.useConfig({
    location: "MessageReactionsContent"
  }).reactionToProfileEnabled;
  props2.renderItem = useCallback((a0, a1) => {
    const localUser = reactors2[a1];
    const id2 = localUser.id;
    const r26 = reactors2.length - 1;
    const channel = ChannelStore.getChannel(channelId7);
    const r28 = channel != null ? channel.getGuildId() : null;
    let nick = NicknameUtils.getNickname(r28, channelId7, localUser);
    if (nick == null) {
      nick = UserUtils.getGlobalName(localUser);
    }
    const r24 = r28 != null ? GuildMemberStore.getMember(r28, id2) : null;
    const BURST = c17229_3.burst_count > 0 ? ReactionTypes.BURST : ReactionTypes.NORMAL;
    const avatarSource = localUser.getAvatarSource(r28);
    const props = {
      leading: <Avatar style={styles2.avatar} size={AvatarSizes.SMALL} source={r28 != null ? r24?.avatar != null ? AvatarUtils.getGuildMemberAvatarSource(r24, localUser) : avatarSource : avatarSource} />,
      label: <DiscordTag user={localUser} nick={nick} />,
      trailing: null,
      onPress: null,
      onLongPress: null
    };
    const trailing = isActiveChannelOrUnarchivableThread ? isAndroid() ? <Pressable onPress={() => removeReaction({
      channelId: channelId7,
      messageId: messageId5,
      emoji: c17229_3.emoji,
      location: ReactionLocations.MESSAGE,
      userId: localUser.id,
      options: {
        burst: BURST === ReactionTypes.BURST
      }
    })}>
      <XSmallIcon />
    </Pressable> : null : null;
    const openProfile = function openProfile() {
      showUserProfileActionSheet({
        userId: id2,
        channelId: channelId7,
        messageId: messageId5,
        localUser,
        sourceAnalyticsLocations: analyticsLocations
      });
    };
    props.trailing = trailing;
    props.onPress = reactionToProfileEnabled ? openProfile : void 0;
    props.onLongPress = openProfile;
    return <View style={styles2.listRow}>
      <FormRow {...props} />
      {a1 !== r26 ? <FormDivider /> : null}
    </View>;
  }, [reactors, channelId5, isActiveChannelOrUnarchivableThread, messageId5, reaction3, styles2, analyticsLocations, reactionToProfileEnabled]);
  channelId8 = channelId5;
  messageId6 = messageId5;
  c17230_2 = reaction3;
  reactors3 = reactors;
  styles3 = void 0;
  styles3 = useStyles();
  props2.renderQuickActions = useCallback((a0, a1) => {
    let c26439_0 = reactors3[a1];
    const BURST2 = c17230_2.burst_count > 0 ? ReactionTypes.BURST : ReactionTypes.NORMAL;
    return <View style={styles3.buttonRow}>
      <SlideoutButton title={intl.string(t.N86XcP)} IconComponent={XSmallIcon} color={Module712.unsafe_rawColors.RED_400} onPress={() => removeReaction({
        channelId: channelId8,
        messageId: messageId6,
        emoji: c17230_2.emoji,
        location: ReactionLocations.MESSAGE,
        userId: c26439_0.id,
        options: {
          burst: BURST2 === ReactionTypes.BURST
        }
      })} height={48} />
    </View>;
  }, [reactors, channelId5, messageId5, reaction3, styles3]);
  props2.sections = [reactors.length];
  props2.style = styles4.container;
  const callback3 = useCallback(() => {
    c6232_29 = true;
    Storage.set(c6232_28, true);
  }, []);
  return <BottomSheet scrollable backdropOpacity={BACKDROP_OPACITY} backdropChildren={reactionType3 === ReactionTypes.BURST ? <BurstReactionAnimationPreview emoji={reaction3.emoji} reactionType={reactionType3} messageId={messageId5} channelId={channelId5} /> : null} header={disableTabs !== true ? <ReactionTabs reactions={reactions2} reactionSelectedIndex={reactionSelectedIndex3} setReactionSelectedIndex={setReactionSelectedIndex2} messageId={messageId5} channelId={channelId5} /> : null}>
    {isIOS() && isActiveChannelOrUnarchivableThread ? <SwipeableFastList key={id3} inActionSheet bounceFirstRowOnMount={!c6232_29} onBounceSwipable={callback3} {...props2} /> : <FastList key={id3} inActionSheet {...props2} />}
  </BottomSheet>;
}