// Metro module 9959 (f9960).
import _slicedToArray from "../../../_bundle/_slicedToArray";
import { useMemo, useRef, useEffect, useCallback, forwardRef, useState } from "react";
import { Image as Image2, ScrollView, View } from "react-native";
import AccessibilityStore from "../../a11y/AccessibilityStore";
import EmojiStore from "../../emojis/EmojiStore";
import ChannelStore from "../../../stores/ChannelStore";
import MessageStore from "../../../stores/MessageStore";
import UserStore from "../../../stores/UserStore";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { useStateFromStores } from "../../../_bundle/Module589";
import AvatarUtils from "../../../utils/AvatarUtils";
import Emoji from "../../emojis/native/Emoji";
import { intl, t } from "../../../intl/index.native";
import { PressableHighlight } from "../../../design/void/Pressables/native/Pressables";
import { Text } from "../../../design/components/Text/native/Text";
import { getTotalVotes } from "../PollsUtils";
import { Gesture, GestureDetector } from "../../../_bundle/Module5273";
import { reactionForId } from "../chat/formatPollMessageChatData";
import useAnalyticsLocations, { AnalyticsLocationProvider } from "../../app_analytics/useAnalyticsLocations";
import useVoteReactors from "../useVoteReactors";
import { useReactorsOnScrollNative } from "../../reactions/native/MessageReactionsContent";
import { ReactionTypes } from "../../messages/MessageReactionsTypes";
import NicknameUtils from "../../../utils/NicknameUtils";
import UserUtils from "../../../utils/UserUtils";
import { TableRow } from "../../../design/components/TableRow/native/TableRow.native";
import { Avatar, AvatarSizes } from "../../../design/void/native";
import DiscordTag from "../../user_profile/native/DiscordTag";
import showUserProfileActionSheet from "../../user_profile/native/showUserProfileActionSheet";
import ReanimatedRexport, { useSharedValue, useAnimatedStyle } from "../../reanimated/ReanimatedRexport";
import { withTiming } from "../../../design/animation/reanimated/timing/timing";
import { BottomSheetFlashList } from "../../../_bundle/noop_6676";
import useTheme from "../../../hooks/useTheme";
import { isThemeDark } from "../../../design/shared";
import Module9961 from "../../../_bundle/Module9961";
import Module9962 from "../../../_bundle/Module9962";
import AnalyticsLocation from "../../app_analytics/AnalyticsLocation";
import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
let useStyles, Component, PollVotesHeader, __initData, VotersList, NoResults;
const PollEmoji = function PollEmoji(props) {
  const { style, emoji } = props;
  const styles = useStyles();
  return <Emoji style={style} src={useStateFromStores([EmojiStore], () => {
    if (emoji.id != null) {
      let animated = emoji.animated;
      if (!animated) {
        let r12 = EmojiStore.getCustomEmojiById(emoji.id)?.animated;
        if (r12 == null) {
          r12 = false;
        }
        animated = r12;
      }
      return AvatarUtils.getEmojiURL({
        id: emoji.id,
        animated,
        size: 16
      });
    }
  })} name={emoji.name} textEmojiStyle={styles.emojiText} fastImageStyle={styles.emojiImage} />;
};
PollVotesHeader = function PollVotesHeader(props) {
  let ref, ref2, ref3;
  const { message, selectedAnswerId, setSelectedAnswerId } = props;
  ref = void 0;
  ref2 = void 0;
  ref3 = void 0;
  const styles = useStyles();
  const memo2 = useMemo(() => getTotalVotes(message.reactions), [message.reactions]);
  ref = useRef(null);
  ref2 = useRef(null);
  ref3 = useRef(false);
  useEffect(() => {
    setTimeout(async () => {
      let c30171_0, c30171_1;
      L24: {
        L22: {
          L16: {
            let env31518;
            c30171_1 = void 0;
            const r9 = env31518 = {};
            c30171_0 = r9;
            env31518[0] = void 0;
            env31518[1] = void 0;
            env31518[2] = void 0;
            env31518[3] = void 0;
            env31518[4] = void 0;
            env31518[5] = void 0;
            env31518[6] = void 0;
            env31518[7] = void 0;
            env31518[8] = void 0;
            env31518[9] = void 0;
            env31518[10] = void 0;
            env31518[11] = void 0;
            const current = ref.current;
            env31518[0] = current;
            const current2 = ref2.current;
            env31518[1] = current2;
            if (current == null) {
              break L24;
            }
            if (current2 != null) {
              env31518[2] = await Promise.all([new Promise((c31995_0) => {
                env31518[0].measure((a0, a1, a2, a3, a4) => c31995_0({
                  scrollWidth: a2,
                  scrollPageX: a4
                }));
              }), new Promise((c31996_0) => {
                env31518[1].measure((a0, a1, a2, a3, a4) => c31996_0({
                  width: a2,
                  pageX: a4
                }));
              }), new Promise((c31997_0) => {
                env31518[1].measureLayout(env31518[0], (a0) => c31997_0({
                  x: a0
                }));
              })]);
              env31518[3] = (0, _slicedToArray)(env31518[2], 3);
              env31518[4] = env31518[3][0];
              env31518[5] = env31518[4].scrollWidth;
              env31518[6] = env31518[4].scrollPageX;
              env31518[7] = env31518[3][1];
              env31518[8] = env31518[7].width;
              env31518[9] = env31518[7].pageX;
              env31518[10] = env31518[3][2].x;
              env31518[11] = !AccessibilityStore.useReducedMotion;
              if (ref3.current) {
                if (env31518[9] < env31518[6]) {
                  const current4 = ref.current;
                  if (current4 == null) {
                    break L22;
                  }
                  current4.scrollTo({
                    x: env31518[10] - 16,
                    y: 0,
                    animated: env31518[11]
                  });
                  break L22;
                }
                if (!(env31518[9] + env31518[8] > env31518[6] + env31518[5])) {
                  break L22;
                }
                const current5 = ref.current;
                if (current5 == null) {
                  break L22;
                }
                current5.scrollTo({
                  x: env31518[10] + env31518[8] - env31518[5] + 16,
                  y: 0,
                  animated: env31518[11]
                });
                break L22;
              }
              const current3 = ref.current;
              if (current3 != null) {
                current3.scrollTo({
                  x: env31518[10] + env31518[8] / 2 - env31518[5] / 2,
                  y: 0,
                  animated: env31518[11]
                });
              }
              ref3.current = true;
              break L16;
            }
            break L24;
          }
          return void 0;
        }
        return void 0;
      }
    }, 0);
  }, [selectedAnswerId]);
  const memo = useMemo(() => Gesture.Native().disallowInterruption(true), []);
  return message.poll == null ? null : <View>
    <Text style={styles.headerText} variant="redesign/heading-18/bold" color="mobile-text-heading-primary" accessibilityRole="header">{message.poll.question.text}</Text>
    <Text style={styles.subheaderText} variant="text-md/medium" color="text-default">
      {intl.format(t.XRkuof, {
        count: memo2
      })}
    </Text>
    <GestureDetector gesture={memo}>
      <ScrollView ref={ref} style={styles.answerScroll} contentContainerStyle={styles.answerScrollContainer} horizontal showsHorizontalScrollIndicator={false} accessibilityRole="tablist" accessibilityLabel={intl.string(t["qbir+4"])}>
        {message.poll.answers.map((a0) => {
          const selected = selectedAnswerId === String(a0.answer_id);
          return <Component key={a0.answer_id} ref={selected ? ref2 : void 0} answer={a0} selected={selected} reaction={reactionForId(message.reactions, String(a0.answer_id))} setSelectedAnswerId={setSelectedAnswerId} />;
        })}
      </ScrollView>
    </GestureDetector>
  </View>;
};
VotersList = function VotersList(props) {
  let sharedValue;
  const { channelId, messageId, reaction } = props;
  sharedValue = void 0;
  const styles = useStyles();
  const analyticsLocations = useAnalyticsLocations().analyticsLocations;
  const voteReactors = useVoteReactors({
    channelId,
    messageId,
    reaction
  });
  const reactors = voteReactors.reactors;
  const reactorsOnScrollNative = useReactorsOnScrollNative({
    channelId,
    messageId,
    reactionSelected: reaction,
    reactors,
    reactorsHasMore: voteReactors.hasMore,
    reactionType: ReactionTypes.VOTE
  });
  const stateFromStores = useStateFromStores([ChannelStore], () => ChannelStore.getChannel(channelId));
  const callback = useCallback(({ item, index }) => {
    let r21 = NicknameUtils.getNickname(stateFromStores?.guild_id, stateFromStores?.id, item);
    if (r21 == null) {
      r21 = UserUtils.getGlobalName(item);
    }
    const userTag = UserUtils.getUserTag(item);
    let user = UserStore.getUser(item.id);
    const guild_id = stateFromStores?.guild_id;
    if (user == null) {
      user = item;
    }
    const props = {
      start: index === 0,
      end: reactors.length - 1 === index,
      icon: <Avatar guildId={guild_id} user={user} size={AvatarSizes.SMALL} />,
      label: null,
      subLabel: null,
      onPress: null
    };
    let label = r21;
    if (label == null) {
      label = <DiscordTag user={item} />;
    }
    props.label = label;
    props.subLabel = r21 != null ? userTag : null;
    props.onPress = () => showUserProfileActionSheet({
      userId: item.id,
      localUser: item,
      sourceAnalyticsLocations: analyticsLocations,
      channelId,
      messageId
    });
    return <TableRow {...props} />;
  }, [stateFromStores, reactors.length, channelId, messageId, analyticsLocations]);
  sharedValue = useSharedValue(reactors.length === 0 ? 0 : 1);
  useEffect(() => {
    if (reactors.length !== 0) {
      sharedValue.set(withTiming(1, {
        duration: 200
      }));
    } else {
      sharedValue.set(0);
    }
  }, [sharedValue, reactors.length]);
  const I = function I() {
    return {
      flex: 1,
      opacity: sharedValue.get(),
      marginBottom: 32
    };
  };
  I.__closure = {
    opacity: sharedValue
  };
  I.__workletHash = 8593850252158;
  I.__initData = __initData;
  return <ReanimatedRexport.View style={useAnimatedStyle(I)}>
    <BottomSheetFlashList contentContainerStyle={styles.list} data={reactors} renderItem={callback} onScroll={reactorsOnScrollNative} />
  </ReanimatedRexport.View>;
};
NoResults = function NoResults() {
  const styles = useStyles();
  return <View style={styles.noResultsContainer}>
    <Image2 style={styles.noResultsImage} source={isThemeDark(useTheme()) ? Module9961 : Module9962} />
    <Text style={styles.noResultsTitle} variant="heading-md/bold" color="mobile-text-heading-primary">
      {intl.string(t.vhQK3o)}
    </Text>
    <Text style={styles.noResultsSubtitle} variant="text-sm/semibold" color="text-default">
      {intl.string(t.bwytdh)}
    </Text>
  </View>;
};
useStyles = createStyles({
  headerText: {
    textAlign: "center",
    paddingHorizontal: 16
  },
  subheaderText: {
    textAlign: "center",
    marginTop: 2,
    paddingHorizontal: 16
  },
  answerScroll: {
    marginTop: 24
  },
  answerScrollContainer: {
    gap: 4,
    paddingHorizontal: 16
  },
  answerName: {
    marginTop: 16,
    marginHorizontal: 16,
    marginBottom: 8
  },
  list: {
    paddingHorizontal: 16
  },
  answerButton: {
    padding: 8,
    flexDirection: "row",
    alignItems: "center",
    borderRadius: Module712.radii.xs,
    maxWidth: 200
  },
  answerSelected: {
    backgroundColor: Module712.colors.BORDER_SUBTLE
  },
  answerEmoji: {
    marginRight: 8
  },
  answerText: {
    flexShrink: 1
  },
  emojiText: {
    fontSize: 16
  },
  emojiImage: {
    height: 16,
    width: 16,
    flexShrink: 0
  },
  noResultsContainer: {
    flexDirection: "column",
    alignItems: "center",
    paddingHorizontal: 16
  },
  noResultsImage: {
    marginTop: 32,
    width: 138
  },
  noResultsTitle: {
    marginTop: 16,
    textAlign: "center"
  },
  noResultsSubtitle: {
    marginTop: 4,
    textAlign: "center"
  }
});
Component = forwardRef(function({ answer, reaction, selected, setSelectedAnswerId: setSelectedAnswerId2 }, a1) {
  const styles = useStyles();
  let numVotes = reaction == null ? void 0 : reaction.count_details?.vote;
  if (numVotes == null) {
    numVotes = 0;
  }
  const callback = useCallback(() => {
    setSelectedAnswerId2(String(answer.answer_id));
  }, [setSelectedAnswerId2, answer.answer_id]);
  const color = selected ? "interactive-text-active" : "text-default";
  return <PressableHighlight ref={a1} onPress={callback} style={[styles.answerButton, selected ? styles.answerSelected : void 0]} accessibilityRole="tab" accessibilityState={{
    selected
  }} accessibilityLabel={intl.formatToPlainString(t.wqBc7A, {
    numVotes,
    option: answer.poll_media.text
  })}>
    {answer.poll_media.emoji != null ? <PollEmoji style={styles.answerEmoji} emoji={answer.poll_media.emoji} /> : null}
    {answer.poll_media.text != null ? <Text style={styles.answerText} variant="text-sm/semibold" color={color} lineClamp={1}>{answer.poll_media.text}</Text> : null}
    <Text variant="text-sm/semibold" color={color} lineClamp={1}>
      {" "}
      (
      {numVotes.toLocaleString()}
      )
    </Text>
  </PressableHighlight>;
});
__initData = {
  code: "function PollVotesActionSheetTsx1(){const{opacity}=this.__closure;return{flex:1,opacity:opacity.get(),marginBottom:32};}"
};
export default function PollVotesActionSheet(props) {
  let c17586_4;
  const { channelId: channelId2, messageId: messageId2, initialAnswerId } = props;
  c17586_4 = void 0;
  const styles = useStyles();
  const analyticsLocations2 = useAnalyticsLocations(AnalyticsLocation.POLL_VOTES).analyticsLocations;
  const [state, setSelectedAnswerId3] = useState(initialAnswerId);
  const stateFromStores2 = useStateFromStores([MessageStore], () => MessageStore.getMessage(channelId2, messageId2));
  const r2 = stateFromStores2 != null && stateFromStores2.poll != null;
  c17586_4 = r2;
  useEffect(() => {
    if (!c17586_4) {
      ActionSheetActionCreators.hideActionSheet("PollVotesActionSheet");
    }
  }, [r2]);
  const memo = useMemo(() => {
    if (stateFromStores2?.reactions != null) {
      return reactionForId(stateFromStores2.reactions, state);
    }
  }, [stateFromStores2?.reactions, state]);
  if (r2) {
    const r50 = stateFromStores2 == null;
    let r18 = void 0;
    if (!r50) {
      const poll = stateFromStores2.poll;
      r18 = poll == null ? void 0 : poll.answers.find((answer) => String(answer.answer_id) === state);
    }
    let count = memo == null ? void 0 : memo.count_details?.vote;
    if (count == null) {
      count = 0;
    }
    return <AnalyticsLocationProvider value={analyticsLocations2}>
      <BottomSheet scrollable header={<PollVotesHeader message={stateFromStores2} selectedAnswerId={state} setSelectedAnswerId={setSelectedAnswerId3} />}>
        <Text style={styles.answerName} variant="text-sm/semibold" color="text-default">
          {r18 == null ? void 0 : r18.poll_media.text}
          {" - "}
          {intl.format(t["SG/Cyy"], {
            count
          })}
        </Text>
        {memo != null && count > 0 ? <VotersList channelId={channelId2} messageId={messageId2} reaction={memo} /> : <NoResults />}
      </BottomSheet>
    </AnalyticsLocationProvider>;
  }
  return null;
};