// Metro module 9085 (f9086).
import { useMemo } from "react";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import { AnimateEmoji } from "../../user_settings/UserSettings";
import AvatarUtils from "../../../utils/AvatarUtils";
import { ReactionIcon } from "../../../design/components/Icon/native/redesign/generated/ReactionIcon";
import Emoji from "../../emojis/native/Emoji";
const useStyles = createStyles({
  emoji: {
    flexShrink: 0,
    width: "100%",
    height: "100%"
  },
  text: {
    textAlign: "center",
    fontFamily: "System"
  }
});
export default function ActivityEmoji(props) {
  const { emoji, size, style, withPlaceholder = false, animate = true } = props;
  const styles = useStyles();
  const setting = AnimateEmoji.useSetting();
  const animated = Boolean(emoji?.animated && setting && animate);
  const memo = useMemo(() => {
    if (emoji?.id != null) {
      return AvatarUtils.getEmojiURL({
        id: emoji.id,
        size: 48,
        animated
      });
    }
  }, [emoji?.id, animated]);
  return emoji == null ? withPlaceholder ? emoji == null ? <ReactionIcon style={style} size="sm" /> : <Emoji src={memo} name={emoji.name} style={[style, {
    width: size,
    height: size
  }]} textEmojiStyle={[styles.emoji, styles.text, {
    fontSize: size
  }]} fastImageStyle={styles.emoji} adjustsFontSizeToFit /> : null : emoji == null ? <ReactionIcon style={style} size="sm" /> : <Emoji src={memo} name={emoji.name} style={[style, {
    width: size,
    height: size
  }]} textEmojiStyle={[styles.emoji, styles.text, {
    fontSize: size
  }]} fastImageStyle={styles.emoji} adjustsFontSizeToFit />;
};