discord-decomp/modules/emoji_picker/native/components/EmojiPickerActionSheet.tsx

// Metro module 9338 (f9339).
import { useState, useRef, useCallback, useMemo } from "react";
import { View } from "react-native";
import UserStore from "../../../../stores/UserStore";
import { EmojiPickerSource } from "./EmojiPickerListConstants";
import { EXPRESSION_FOOTER_HEIGHT } from "../../../../Constants";
import { EmojiIntention } from "../../../emojis/EmojiConstants";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { ReactionTypes } from "../../../messages/MessageReactionsTypes";
import { useSharedValue } from "../../../reanimated/ReanimatedRexport";
import { useEmojiCategories, getSearchPlaceholder } from "../../EmojiPickerUtils";
import useSafeAreaInsetsKeyboardAware_native from "../../../safe_area/useSafeAreaInsetsKeyboardAware.native";
import useSafeAreaInsets_native from "../../../safe_area/useSafeAreaInsets.native";
import { isAndroid, isIOS } from "../../../../utils/PlatformUtils";
import useAnalyticsLocations, { AnalyticsLocationProvider } from "../../../app_analytics/useAnalyticsLocations";
import AnalyticsLocation from "../../../app_analytics/AnalyticsLocation";
import useEmojiPickerSearchState from "./useEmojiPickerSearchState";
import ActionSheetActionCreators from "../../../action_sheet/native/ActionSheetActionCreators";
import { EMOJI_PICKER_ACTION_SHEET_KEY } from "../openEmojiPickerActionSheet";
import { maybeShowDoubleTapReminderToast } from "../../../double_tap_to_react/native/DoubleTapReminderToast";
import { Text } from "../../../../design/components/Text/native/Text";
import { intl, t } from "../../../../intl/index.native";
import { SearchField } from "../../../../design/components/TextField/native/SearchField.native";
import BurstReactionToggle from "../../../reactions/native/BurstReactionToggle";
import { isPremium } from "../../../../utils/PremiumUtils";
import { triggerHapticFeedback } from "../../../haptics/HapticUtils.native";
import HapticFeedbackTypes from "../../../haptics/HapticFeedbackTypes";
import PortalKeyboardFooterIOS_ios from "../../../keyboard/native/PortalKeyboardFooterIOS.ios";
import { BottomSheet } from "../../../../design/components/Sheet/native/BottomSheet.native";
import { PortalHost } from "../../../../_bundle/Module4060";
import EmojiPickerList from "./EmojiPickerList";
import { openEmojiActionSheet } from "./openEmojiActionSheet";
import EmojiPickerCategories from "./categories/EmojiPickerCategories";
const portalHostName = "EmojiPickerActionSheet";
const useStyles = createStyles({
  header: {
    flexDirection: "column"
  },
  searchContainer: {
    display: "flex",
    flexDirection: "row",
    marginBottom: -Module712.space.PX_16
  },
  content: {
    paddingHorizontal: Module712.space.PX_8,
    backgroundColor: Module712.colors.MOBILE_EXPRESSION_PICKER_BACKGROUND_DEFAULT
  },
  background: {
    backgroundColor: Module712.colors.MOBILE_EXPRESSION_PICKER_BACKGROUND_DEFAULT
  },
  headerText: {
    flexDirection: "column",
    alignItems: "center",
    marginBottom: Module712.space.PX_16
  },
  headerSpacer: {
    marginTop: Module712.space.PX_8
  },
  burstReaction: {
    borderColor: Module712.colors.BACKGROUND_BRAND
  }
});
export default function EmojiPickerActionSheet(props) {
  let ref, ref2, memo;
  const { onClose, channel, guildId, onPressEmoji, pickerIntention, autoFocus = true, startExpanded = true, analyticsObject, messageId, source } = props;
  ref = void 0;
  ref2 = void 0;
  memo = void 0;
  const styles = useStyles();
  const [state, setState] = useState(ReactionTypes.NORMAL);
  const isActive = state === ReactionTypes.BURST;
  const ref3 = useRef(null);
  const sharedValue = useSharedValue(0);
  const emojiCategories = useEmojiCategories(pickerIntention, channel, guildId);
  let bottom2 = useSafeAreaInsetsKeyboardAware_native().insets.bottom;
  const bottom = useSafeAreaInsets_native().bottom;
  if (isAndroid()) {
    bottom2 = bottom;
  }
  const marginBottom = bottom2 + EXPRESSION_FOOTER_HEIGHT;
  const insetBottom = marginBottom + Module712.space.PX_16;
  const analyticsLocations = useAnalyticsLocations(AnalyticsLocation.EMOJI_PICKER).analyticsLocations;
  const emojiPickerSearchState = useEmojiPickerSearchState(channel, sharedValue, pickerIntention);
  const { handleTextChange, searchQueryRef, searchResults } = emojiPickerSearchState;
  const callback3 = useCallback(() => {
    if (onClose != null) {
      onClose();
    }
  }, [onClose]);
  const callback = useCallback((a0) => {
    if (onPressEmoji != null) {
      onPressEmoji(a0, isActive);
    }
    ActionSheetActionCreators.hideActionSheet(EMOJI_PICKER_ACTION_SHEET_KEY);
    if (!(pickerIntention !== EmojiIntention.REACTION || source === EmojiPickerSource.NOTIFICATION || isActive)) {
      maybeShowDoubleTapReminderToast(a0);
    }
  }, [onPressEmoji, isActive, pickerIntention, source]);
  const memo3 = useMemo(() => {
    const marginLeft = isActive ? 2 : 0;
    const marginRight = isActive ? 2 : 0;
    let paddingRight = 2;
    const paddingLeft = isActive ? 0 : 2;
    if (isActive) {
      paddingRight = 0;
    }
    return {
      marginLeft,
      marginRight,
      paddingLeft,
      paddingRight,
      paddingBottom: bottom
    };
  }, [isActive, bottom]);
  ref = useRef(null);
  ref2 = useRef(autoFocus);
  const callback2 = useCallback(() => {
    if (ref2.current) {
      const current = ref.current;
      if (current != null) {
        current.focus();
      }
      ref2.current = false;
    }
  }, []);
  const callback4 = useCallback(() => {
    const current = ref.current;
    if (current != null) {
      current.setText("");
    }
  }, []);
  memo = useMemo(() => pickerIntention === EmojiIntention.DEFAULT_REACT_EMOJI ? <View style={styles.headerText}>
    <Text variant="heading-lg/bold" color="mobile-text-heading-primary">
      {intl.string(t.wHTk2C)}
    </Text>
    <Text variant="text-sm/medium" color="text-muted">
      {intl.string(t.VrWSNn)}
    </Text>
  </View> : null, [pickerIntention, styles]);
  const memo2 = useMemo(() => <View style={styles.header}>
    {memo}
    <View style={[styles.searchContainer, memo === null ? styles.headerSpacer : null]}>
      <SearchField ref={ref} size="md" isRound onChange={handleTextChange} placeholder={getSearchPlaceholder(pickerIntention, isActive)} />
      {pickerIntention === EmojiIntention.REACTION && source !== EmojiPickerSource.NOTIFICATION && <BurstReactionToggle onPress={() => {
        if (isPremium(UserStore.getCurrentUser())) {
          triggerHapticFeedback(HapticFeedbackTypes.IMPACT_LIGHT);
          setState(isActive ? ReactionTypes.NORMAL : ReactionTypes.BURST);
          return void 0;
        }
        return ActionSheetActionCreators.openLazy(import("../../../messages/native/burst_reactions/SuperReactionUpsellActionSheet"), "SuperReactionUpsellActionSheet");
      }} isActive={isActive} />}
    </View>
  </View>, [styles, handleTextChange, isActive, pickerIntention, memo, source]);
  const borderGradient = isActive ? [styles.burstReaction.borderColor, Module712.unsafe_rawColors.TRANSPARENT] : [Module712.unsafe_rawColors.TRANSPARENT, Module712.unsafe_rawColors.TRANSPARENT];
  const sharedValue2 = useSharedValue(-1);
  const ref4 = useRef(null);
  const r152 = [isIOS() && <PortalKeyboardFooterIOS_ios portalHostName={portalHostName} animatedSheetIndex={sharedValue2} followSystemKeyboard />, <BottomSheet backgroundStyles={styles.background} ref={ref4} scrollable header={memo2} footer={isAndroid() ? <PortalHost name={portalHostName} /> : void 0} startExpanded={startExpanded} onDismiss={callback3} animatedIndex={sharedValue2} onExpand={callback2} borderGradient={borderGradient} contentStyles={[styles.content, {
    marginBottom
  }]}>
    <EmojiPickerList bottomSheetIndex={sharedValue2} onPressEmoji={callback} onLongPressEmoji={openEmojiActionSheet} emojiPickerListRef={ref3} categories={emojiCategories} categoryIndexActive={sharedValue} emojis={searchResults} emojiPickerIntention={pickerIntention} channel={channel} guildId={guildId} searchQueryRef={searchQueryRef} insetBottom={insetBottom} analyticsObject={analyticsObject} messageId={messageId} />
    <EmojiPickerCategories bottomSheetRef={ref4} bottomSheetIndex={sharedValue2} style={memo3} categories={emojiCategories} categoryIndexActive={sharedValue} emojiPickerListRef={ref3} portalHostName={portalHostName} renderAhead={isIOS() ? pickerIntention === EmojiIntention.STATUS ? "full" : void 0 : void 0} isSearching={searchResults != null} onClearSearch={callback4} />
  </BottomSheet>];
  return <AnalyticsLocationProvider value={analyticsLocations}>{r152}</AnalyticsLocationProvider>;
};