// Metro module 9967 (f9968).
import { View } from "react-native";
import { ACTION_SHEET_MAX_WIDTH } from "../ActionSheetConstants";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import ActionSheetActionCreators from "../ActionSheetActionCreators";
import { triggerHapticFeedback, HapticFeedbackTypes } from "../../../haptics/HapticUtils.native";
import { addReaction, ReactionLocations } from "../../../reactions/ReactionActionCreators";
import { toReactionEmoji } from "../../../reactions/ReactionUtils";
import MessageActionCreators from "../../../../actions/MessageActionCreators";
import { maybeShowDoubleTapReminderToast } from "../../../double_tap_to_react/native/DoubleTapReminderToast";
import { useToken } from "../../../../design/tokens/native/useToken";
import Module712 from "../../../../_bundle/Module712";
import { useEmojisForReactionRow } from "../../../reactions/native/useEmojisForReactionRow";
import { EmojiReactionRowButton, getEmojiKey, EmojiPickerRowButton } from "../../../reactions/native/EmojiReactionRowButton";
import { handleAddNewReactions } from "../../../reactions/native/ReactionUtils";
import { DoubleTapEmojiEditNudge } from "../../../double_tap_to_react/native/DoubleTapEmojiEditNudge";
import AnalyticsLocation from "../../../app_analytics/AnalyticsLocation";
const useStyles = createStyles({
  emojiRowContainer: {
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center"
  },
  emojiRow: {
    height: 52,
    alignSelf: "stretch",
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    marginTop: 0,
    marginBottom: 0
  }
});
export default function EmojiRow(props) {
  const { message, channel } = props;
  const token = useToken(Module712.modules.mobile.EMOJI_ROW_EMOJI_SIZE);
  const token2 = useToken(Module712.modules.mobile.EMOJI_ROW_EMOJI_FONT_SIZE);
  const token3 = useToken(Module712.modules.mobile.EMOJI_ROW_EMOJI_LINE_HEIGHT);
  const token4 = useToken(Module712.modules.mobile.EMOJI_ROW_EMOJI_CONTAINER_SIZE);
  const emojisForReactionRow = useEmojisForReactionRow(channel, ACTION_SHEET_MAX_WIDTH, token4 + useToken(Module712.modules.mobile.EMOJI_ROW_EMOJI_MIN_SPACING));
  const styles = useStyles();
  return <View style={styles.emojiRowContainer}>
    <View style={styles.emojiRow}>
      {emojisForReactionRow.map((item, index) => {
        return <EmojiReactionRowButton key={getEmojiKey(item, index)} emoji={item} onPress={() => {
          ActionSheetActionCreators.hideActionSheet();
          if (item != null) {
            triggerHapticFeedback(HapticFeedbackTypes.IMPACT_LIGHT);
            addReaction(message.channel_id, message.id, toReactionEmoji(item));
            MessageActionCreators.focusMessage({
              channelId: message.channel_id,
              messageId: message.id
            });
            maybeShowDoubleTapReminderToast(item);
          }
        }} emojiSize={token} emojiFontSize={token2} emojiLineHeight={token3} emojiContainerSize={token4} />;
      })}
      <EmojiPickerRowButton emojiContainerSize={token4} onPress={() => handleAddNewReactions(channel, message.id, ReactionLocations.MESSAGE)} />
    </View>
    <DoubleTapEmojiEditNudge location={AnalyticsLocation.MESSAGE_LONG_PRESS_MENU} />
  </View>;
};