// Metro module 9410 (f9411).
import { useMemo } from "react";
import { View } from "react-native";
import SelectedGuildStore from "../../../../stores/SelectedGuildStore";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { useSharedMessageEmojiStyles } from "./useSharedMessageEmojiStyles";
import EmojiUtils from "../../../../utils/EmojiUtils";
import FastImage from "../../../../components_native/common/FastImage";
import { Text } from "../../../../design/components/Text/native/Text";
import { useTrackOpenPopout } from "../../../emojis/useTrackOpenPopout";
import UnicodeEmojis from "../../../emojis/UnicodeEmojis";
import { useIsFavoriteEmoji } from "../../../emoji_picker/EmojiPickerUtils";
import useMaybeAddReactionMarketingEasterEggNote from "../../useMaybeAddReactionMarketingEasterEggNote";
import { intl, t } from "../../../../intl/index.native";
import { FormDivider } from "../../../../design/void/Form/native/index";
import { Button } from "../../../../design/components/Button/native/Button.native";
import { unfavoriteEmoji, favoriteEmoji } from "../../../../actions/EmojiActionCreators";
let useStyles;
const Emoji = function Emoji(props) {
  const surrogate = props.surrogate;
  const r7 = {
    ...useStyles(),
    ...useSharedMessageEmojiStyles()
  };
  const uRL = EmojiUtils.getURL(surrogate);
  return <View style={r7.emojiWrapper}>
    {uRL !== "" ? <FastImage style={r7.emojiIcon} resizeMode="contain" source={{
      uri: uRL
    }} /> : <Text style={r7.emojiSurrogate} variant="text-md/medium">{surrogate}</Text>}
  </View>;
};
useStyles = createStyles({
  emojiSurrogate: {
    lineHeight: 48,
    fontSize: 40,
    margin: 8
  },
  ctaContainer: {
    paddingTop: Module712.space.PX_4
  }
});
export default function StandardEmojiContent(props) {
  let isFavoriteEmoji;
  const { emojiNode, nonce } = props;
  isFavoriteEmoji = void 0;
  const r9 = {
    ...useStyles(),
    ...useSharedMessageEmojiStyles()
  };
  const guildId = SelectedGuildStore.getGuildId();
  useTrackOpenPopout({
    currentGuildId: guildId,
    nonce
  });
  const memo = useMemo(() => UnicodeEmojis.convertSurrogateToBase(emojiNode.surrogate), [emojiNode.surrogate]);
  isFavoriteEmoji = useIsFavoriteEmoji(guildId, memo);
  return <>
    {[<View style={r9.emojiContainer}>
      <Emoji surrogate={emojiNode.surrogate} />
      <View style={r9.emojiDescriptionWrapper}>
        <Text variant="text-md/bold" color="mobile-text-heading-primary">
          {useMaybeAddReactionMarketingEasterEggNote(emojiNode.content)}
        </Text>
        <Text variant="text-sm/medium">
          {intl.string(t.sXdH8c)}
        </Text>
      </View>
    </View>, <FormDivider style={r9.divider} />, <View style={r9.ctaContainer}>
      <Button text={isFavoriteEmoji ? intl.string(t.Ay49KA) : intl.string(t.nNsr67)} variant={isFavoriteEmoji ? "tertiary" : "primary"} onPress={() => {
        if (isFavoriteEmoji) {
          unfavoriteEmoji(memo);
        } else {
          favoriteEmoji(memo);
        }
      }} />
    </View>]}
  </>;
};