discord-decomp/modules/reactions/native/ReactionEmojiOptionsActionSheet.tsx

// Metro module 9458 (f9459).
import { useCallback } from "react";
import { View } from "react-native";
import AccessibilityStore from "../../a11y/AccessibilityStore";
import EmojiStore from "../../emojis/EmojiStore";
import SelectedGuildStore from "../../../stores/SelectedGuildStore";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { DeveloperMode, AnimateEmoji } from "../../user_settings/UserSettings";
import TidaWebformExperiment from "../../guild/TidaWebformExperiment";
import { useStateFromStores } from "../../../_bundle/Module589";
import { useIsFavoriteEmoji } from "../../emoji_picker/EmojiPickerUtils";
import AvatarUtils from "../../../utils/AvatarUtils";
import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
import { StarIcon } from "../../../design/components/Icon/native/redesign/generated/StarIcon";
import { StarOutlineIcon } from "../../../design/components/Icon/native/redesign/generated/StarOutlineIcon";
import { Text } from "../../../design/components/Text/native/Text";
import { intl, t } from "../../../intl/index.native";
import { unfavoriteEmoji, favoriteEmoji } from "../../../actions/EmojiActionCreators";
import ToastActionCreators from "../../toast/native/ToastActionCreators";
import { copy } from "../../../utils/ClipboardUtils.native";
import { presentCopiedToClipboard } from "../../toast/native/ToastUtils";
import { removeEmojiReactions } from "../ReactionActionCreators";
import { ActionSheet } from "../../../design/components/Sheet/native/ActionSheet.native";
import Emoji from "../../emojis/native/Emoji";
import { TableRowGroup } from "../../../design/components/TableRow/native/TableRowGroup.native";
import { TableRow } from "../../../design/components/TableRow/native/TableRow.native";
import { HermesBuiltin } from "../../../_hermes/prelude";
const useStyles = createStyles({
  header: {
    alignItems: "center",
    paddingTop: Module712.space.PX_8,
    gap: Module712.space.PX_16
  },
  reactionPill: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: Module712.colors.MESSAGE_HIGHLIGHT_BACKGROUND_DEFAULT,
    borderRadius: Module712.radii.xl,
    borderWidth: 4,
    borderColor: Module712.colors.BORDER_STRONG,
    paddingVertical: Module712.space.PX_8,
    paddingHorizontal: Module712.space.PX_16,
    gap: Module712.space.PX_8
  },
  emoji: {
    width: 50,
    height: 50
  },
  emojiText: {
    fontSize: 24,
    lineHeight: 50,
    textAlign: "center"
  },
  reactionText: {
    fontSize: 24,
    lineHeight: 50
  },
  starIcon: {
    height: 24,
    width: 24
  },
  starIconSelected: {
    tintColor: Module712.colors.ICON_FEEDBACK_WARNING
  },
  starIconUnselected: {
    tintColor: Module712.colors.INTERACTIVE_TEXT_DEFAULT
  }
});
export default function ReactionEmojiOptionsActionSheet(props) {
  let stateFromStores, isFavoriteEmoji, emojiURL, callback, callback2;
  const { channelId, messageId, reaction } = props;
  let canRemoveReactions = props.canRemoveReactions;
  stateFromStores = void 0;
  isFavoriteEmoji = void 0;
  emojiURL = void 0;
  callback = void 0;
  callback2 = void 0;
  const styles = useStyles();
  const emoji = reaction.emoji;
  const r3 = emoji.id != null;
  let r34 = DeveloperMode.useSetting();
  const tidaWebformEnabled = TidaWebformExperiment.useExperiment({
    location: "ReactionEmojiOptionsActionSheet"
  }, {
    autoTrackExposure: false
  }).tidaWebformEnabled;
  const stateFromStores3 = useStateFromStores([SelectedGuildStore], () => SelectedGuildStore.getGuildId());
  stateFromStores = useStateFromStores([EmojiStore], () => emoji.id != null ? EmojiStore.getCustomEmojiById(emoji.id) : null, [emoji.id]);
  isFavoriteEmoji = useIsFavoriteEmoji(stateFromStores3, stateFromStores);
  const stateFromStores2 = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
  const setting = AnimateEmoji.useSetting();
  const r4 = emoji.id != null;
  let r66 = void 0;
  if (r4) {
    let animated = emoji.animated;
    if (animated == null) {
      animated = false;
    }
    if (animated) {
      animated = !stateFromStores2;
    }
    if (animated) {
      animated = setting;
    }
    r66 = AvatarUtils.getEmojiURL({
      id: emoji.id,
      animated,
      size: 96
    });
  }
  emojiURL = r66;
  const r26 = reaction.burst_count > 0 ? reaction.burst_count : reaction.count;
  callback = useCallback(() => {
    ActionSheetActionCreators.hideActionSheet();
  }, []);
  callback2 = useCallback((a0) => {
    let style;
    const r1 = {
      ...styles.starIcon
    };
    if (a0) {
      HermesBuiltin.copyDataProperties(r1, styles.starIconSelected);
      style = r1;
    } else {
      HermesBuiltin.copyDataProperties(r1, styles.starIconUnselected);
      style = r1;
    }
    return a0 ? <StarIcon style={style} /> : <StarOutlineIcon style={style} />;
  }, [styles]);
  const callback3 = useCallback(() => {
    callback();
    if (stateFromStores != null) {
      const content = function content() {
        return <Text style={{
          marginLeft: 8,
          marginTop: 2
        }} variant="text-md/bold">
          {isFavoriteEmoji ? intl.string(t.in1rga) : intl.string(t.mE2e8A)}
        </Text>;
      };
      if (isFavoriteEmoji) {
        unfavoriteEmoji(stateFromStores);
        ToastActionCreators.open({
          key: "EMOJI_UNFAVORITED",
          icon: () => callback2(false),
          content
        });
      } else {
        favoriteEmoji(stateFromStores);
        ToastActionCreators.open({
          key: "EMOJI_FAVORITED",
          icon: () => callback2(true),
          content
        });
      }
    }
  }, [callback, stateFromStores, isFavoriteEmoji, callback2]);
  const callback4 = useCallback(() => {
    if (emoji.id != null) {
      copy(emoji.id);
      presentCopiedToClipboard();
      callback();
    }
  }, [emoji.id, callback]);
  const callback5 = useCallback(() => {
    if (emojiURL != null) {
      copy(emojiURL);
      presentCopiedToClipboard();
      callback();
    }
  }, [emojiURL, callback]);
  const callback6 = useCallback(() => {
    removeEmojiReactions(channelId, messageId, emoji);
    callback();
  }, [channelId, messageId, emoji, callback]);
  let name = emoji.name;
  if (name == null) {
    name = "";
  }
  const r136 = [<View style={styles.header}>
    <View style={styles.reactionPill}>
      <Emoji src={emojiURL} name={name} textEmojiStyle={styles.emojiText} fastImageStyle={styles.emoji} />
      <Text variant="text-lg/bold" color="text-default" style={styles.reactionText}>{r26}</Text>
    </View>
    <Text variant="text-lg/semibold" color="text-default">
      {r3 ? `:${name}:` : name}
    </Text>
  </View>, ,];
  const r155 = [(r3 ? stateFromStores != null : r3) && <TableRow label={isFavoriteEmoji ? intl.string(t.Ay49KA) : intl.string(t.nNsr67)} onPress={callback3} />, (r34 ? r3 : r34) && <TableRow label={intl.string(t.Ap2oVy)} onPress={callback4} />, , ,];
  if (r34) {
    r34 = tidaWebformEnabled;
  }
  if (r34) {
    r34 = r3;
  }
  if (r34) {
    r34 = emojiURL != null;
  }
  if (r34) {
    r34 = <TableRow label={intl.string(t.cIoudn)} onPress={callback5} />;
  }
  r155[2] = r34;
  if (canRemoveReactions) {
    canRemoveReactions = <TableRow label={<Text variant="text-md/semibold" color="text-feedback-critical">
      {intl.string(t["zx/e4P"])}
    </Text>} onPress={callback6} />;
  }
  r155[3] = canRemoveReactions;
  r136[1] = <TableRowGroup hasIcons={false}>{r155}</TableRowGroup>;
  return <ActionSheet>{r136}</ActionSheet>;
};