// Metro module 9969 (f9970).
import { useMemo } from "react";
import { Platform } from "react-native";
import { EMOJI_URL_BASE_SIZE } from "../../emojis/EmojiConstants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { isThemeLight, useThemeContext } from "../../../design/shared";
import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
import { intl, t } from "../../../intl/index.native";
import { ReactionIcon } from "../../../design/components/Icon/native/redesign/generated/ReactionIcon";
import MobileVisualRefreshExperiment from "../../themes/experiments/MobileVisualRefreshExperiment";
import Emoji from "../../emojis/native/Emoji";
import AvatarUtils from "../../../utils/AvatarUtils";
import { EmojiTypes } from "../../emojis/EmojiTypes";
let useStyles2;
Platform;
const useStyles = createStyles((a0) => ({
  emojiContainer: {
    width: a0,
    height: a0,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: Module712.colors.MOBILE_EMOJI_BUTTON_BACKGROUND,
    borderRadius: Module712.modules.button.BORDER_RADIUS,
    overflow: "hidden"
  }
}));
useStyles2 = createStyles((a0, a1, a2, a3) => {
  const width = a3 ? a2 : a0;
  return {
    emojiImage: {
      width: a0,
      height: a0
    },
    emojiText: {
      lineHeight: a2,
      fontSize: a1,
      color: Module712.colors.INTERACTIVE_TEXT_DEFAULT,
      textAlign: "center",
      width,
      height: width,
      ...a3 ? void 0 : null
    }
  };
});
export function EmojiPickerRowButton(props) {
  const { emojiContainerSize, onPress } = props;
  let iconSize = props.iconSize;
  const styles2 = props.styles;
  const styles = useStyles(emojiContainerSize);
  const color = isThemeLight(useThemeContext().theme) ? Module712.unsafe_rawColors.PRIMARY_500 : Module712.unsafe_rawColors.PRIMARY_300;
  const props2 = {
    activeOpacity: 0.5,
    accessibilityRole: "button",
    accessibilityLabel: intl.string(t.lfIHs4),
    hitSlop: 4,
    onPress,
    style: [styles.emojiContainer, styles2],
    children: null
  };
  if (iconSize == null) {
    iconSize = "md";
  }
  props2.children = <ReactionIcon color={color} size={iconSize} />;
  return <PressableOpacity {...props2} />;
}
export function EmojiReactionRowButton(props) {
  const { emoji, emojiSize, emojiFontSize, emojiContainerSize, emojiLineHeight, onPress, styles: styles2 } = props;
  const styles = useStyles(emojiContainerSize);
  const styles22 = useStyles2(emojiSize, emojiFontSize, emojiLineHeight, MobileVisualRefreshExperiment("EmojiReactionRowButton"));
  return <PressableOpacity androidRippleConfig={useMemo(() => ({
    foreground: true
  }), [])} activeOpacity={0.5} accessibilityRole="button" accessibilityLabel={intl.formatToPlainString(t["/iYSo6"], {
    emojiName: emoji?.name
  })} disabled={emoji == null} hitSlop={4} onPress={onPress} style={[styles.emojiContainer, styles2]}>
    {emoji != null ? <Emoji textEmojiStyle={styles22.emojiText} fastImageStyle={styles22.emojiImage} name={emoji.id == null ? emoji.surrogates : ""} src={emoji.id != null ? AvatarUtils.getEmojiURL({
      id: emoji.id,
      animated: emoji.animated,
      size: EMOJI_URL_BASE_SIZE
    }) : emoji.url} /> : null}
  </PressableOpacity>;
}
export function getEmojiKey(a0, a1) {
  return a0 != null ? a0.type === EmojiTypes.UNICODE ? a0.surrogates : a0.id : a1;
}