// Metro module 10339 (f10340).
import { useMemo, useCallback } from "react";
import { Keyboard, View } from "react-native";
import { NOTIFICATION_CONTAINER_MARGIN, NOTIFICATION_MAX_WIDTH } from "./InAppNotificationConstants";
import { EmojiPickerSource } from "../../emoji_picker/native/components/EmojiPickerListConstants";
import { EmojiIntention } from "../../emojis/EmojiConstants";
import Module712 from "../../../_bundle/Module712";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import useWindowDimensions_native from "../../screen/useWindowDimensions.native";
import { useEmojisForReactionRow } from "../../reactions/native/useEmojisForReactionRow";
import { trackInAppNotificationAccessoryClicked } from "./InAppNotificationUtils";
import { InAppNotificationAccessoryTypes } from "../InAppNotificationTypes";
import { openEmojiPickerActionSheet } from "../../emoji_picker/native/openEmojiPickerActionSheet";
import { ReactionTypes } from "../../messages/MessageReactionsTypes";
import { ReactionLocations } from "../../reactions/ReactionActionCreators";
import ReanimatedRexport from "../../reanimated/ReanimatedRexport";
import { EmojiReactionRowButton, getEmojiKey, EmojiPickerRowButton } from "../../reactions/native/EmojiReactionRowButton";
const PX_12 = Module712.space.PX_12;
const useStyles = createStyles({
  container: {
    alignSelf: "center",
    flexDirection: "row",
    gap: 8,
    alignItems: "center",
    justifyContent: "space-between",
    paddingHorizontal: PX_12,
    paddingVertical: 10,
    width: "100%"
  },
  divider: {
    height: 1,
    backgroundColor: Module712.colors.BORDER_SUBTLE,
    margin: 0,
    padding: 0
  },
  roundButton: {
    borderRadius: Module712.radii.round
  }
});
export function MessageNotificationReactBar(props) {
  let callback;
  const { notification, onReactionPress, animationStyle } = props;
  callback = void 0;
  const styles = useStyles();
  const width = useWindowDimensions_native().width;
  const emojisForReactionRow = useEmojisForReactionRow(notification.channel, useMemo(() => {
    const r1 = 2 * PX_12;
    return Math.min(NOTIFICATION_MAX_WIDTH - r1, width - r1 - 2 * NOTIFICATION_CONTAINER_MARGIN);
  }, [width]), 48);
  const callback2 = useCallback(() => {
    Keyboard.dismiss();
    trackInAppNotificationAccessoryClicked(notification, InAppNotificationAccessoryTypes.REACTION_PICKER_BUTTON);
    openEmojiPickerActionSheet({
      onPressEmoji: onReactionPress,
      channel: notification.channel,
      pickerIntention: EmojiIntention.REACTION,
      reactionType: ReactionTypes.NORMAL,
      analyticsObject: ReactionLocations.IN_APP_NOTIFICATION,
      startExpanded: false,
      source: EmojiPickerSource.NOTIFICATION
    });
  }, [onReactionPress, notification]);
  callback = useCallback((a0) => {
    trackInAppNotificationAccessoryClicked(notification, InAppNotificationAccessoryTypes.REACTION_BUTTON);
    if (a0 != null) {
      onReactionPress(a0);
    }
  }, [notification, onReactionPress]);
  return <ReanimatedRexport.View style={animationStyle}>
    <View style={styles.divider} />
    <View style={styles.container}>
      {emojisForReactionRow.map((item, index) => {
        return <EmojiReactionRowButton key={getEmojiKey(item, index)} emoji={item == null ? null : item} onPress={() => callback(item)} emojiSize={20} emojiFontSize={16} emojiContainerSize={40} emojiLineHeight={22} styles={styles.roundButton} />;
      })}
      <EmojiPickerRowButton emojiContainerSize={40} onPress={callback2} iconSize="sm" styles={styles.roundButton} />
    </View>
  </ReanimatedRexport.View>;
}