// Metro module 9594 (f9595).
import { memo, useEffect, useRef, useCallback } from "react";
import { View, StyleSheet } from "react-native";
import { AnalyticEvents, ChatInputComponentViewedTypes, VerticalGradient } from "../../../../Constants";
import { EmojiIntention } from "../../../emojis/EmojiConstants";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import AnalyticsUtils from "../../../../utils/AnalyticsUtils";
import { useSharedValue } from "../../../reanimated/ReanimatedRexport";
import { useEmojiCategories } from "../../EmojiPickerUtils";
import useAnalyticsLocations, { AnalyticsLocationProvider } from "../../../app_analytics/useAnalyticsLocations";
import AnalyticsLocation from "../../../app_analytics/AnalyticsLocation";
import useEmojiPickerSearchState from "./useEmojiPickerSearchState";
import useExpressionPickerInsets from "../../../expression_picker/native/useExpressionPickerInsets";
import { SearchField } from "../../../../design/components/TextField/native/SearchField.native";
import { intl, t } from "../../../../intl/index.native";
import EmojiPickerList from "./EmojiPickerList";
import { openEmojiActionSheet } from "./openEmojiActionSheet";
import Module4611 from "../../../../_bundle/Module4611";
import { hexOpacityToRgba } from "../../../../utils/ColorUtils";
import EmojiPickerCategories from "./categories/EmojiPickerCategories";
const useStyles = createStyles({
  container: {
    flex: 1
  },
  list: {
    overflow: "hidden",
    flex: 1
  },
  header: {
    flexDirection: "row",
    paddingTop: Module712.space.PX_8,
    paddingBottom: 1,
    gap: Module712.space.PX_12
  },
  headerGradientColor: {
    color: Module712.colors.MOBILE_EXPRESSION_PICKER_BACKGROUND_DEFAULT
  },
  headerGradient: {
    ...StyleSheet.absoluteFillObject,
    height: Module712.space.PX_8 + 1,
    bottom: void 0,
    top: -1
  }
});
const r66 = memo(function EmojiPicker(props) {
  let ref, handleTextChange;
  const { bottomSheetRef, bottomSheetIndex, channel, onPressEmoji, onBackspace, inPortalKeyboard } = props;
  ref = void 0;
  handleTextChange = void 0;
  const styles = useStyles();
  useEffect(() => {
    AnalyticsUtils.track(AnalyticEvents.CHAT_INPUT_COMPONENT_VIEWED, {
      type: ChatInputComponentViewedTypes.EMOJI,
      channel_id: channel.id,
      guild_id: channel.guild_id
    });
  }, [channel.id, channel.guild_id]);
  const sharedValue = useSharedValue(0);
  const emojiCategories = useEmojiCategories(EmojiIntention.CHAT, channel);
  const ref2 = useRef(null);
  ref = useRef(null);
  const analyticsLocations = useAnalyticsLocations(AnalyticsLocation.EMOJI_PICKER).analyticsLocations;
  const emojiPickerSearchState = useEmojiPickerSearchState(channel, sharedValue, EmojiIntention.CHAT);
  handleTextChange = emojiPickerSearchState.handleTextChange;
  const { searchQueryRef, searchResults } = emojiPickerSearchState;
  const callback2 = useCallback(() => {
    AnalyticsUtils.track(AnalyticEvents.CHAT_INPUT_COMPONENT_VIEWED, {
      type: ChatInputComponentViewedTypes.EMOJI_SEARCH,
      channel_id: channel.id,
      guild_id: channel.guild_id
    });
  }, [channel]);
  const callback = useCallback(() => {
    const current = ref.current;
    if (current != null) {
      current.setText("");
    }
    handleTextChange("");
  }, [handleTextChange]);
  const expressionPickerInsets = useExpressionPickerInsets({
    hasCategories: true
  });
  const { safeAreaStyle, safeAreaBottomKeyboardAware } = expressionPickerInsets;
  return <AnalyticsLocationProvider value={analyticsLocations}>
    <View style={styles.container}>
      <View style={styles.header}>
        <SearchField ref={ref} size="md" placeholder={intl.string(t.KgK5qg)} onChange={handleTextChange} onFocus={callback2} isRound />
      </View>
      <View style={styles.list}>
        <EmojiPickerList bottomSheetIndex={bottomSheetIndex} emojiPickerListRef={ref2} categories={emojiCategories} categoryIndexActive={sharedValue} emojis={searchResults} onPressEmoji={onPressEmoji} onLongPressEmoji={openEmojiActionSheet} channel={channel} emojiPickerIntention={EmojiIntention.CHAT} insetBottom={safeAreaBottomKeyboardAware} inPortalKeyboard={inPortalKeyboard} searchQueryRef={searchQueryRef} />
        <Module4611 style={styles.headerGradient} start={VerticalGradient.START} end={VerticalGradient.END} colors={[hexOpacityToRgba(styles.headerGradientColor.color, 100), hexOpacityToRgba(styles.headerGradientColor.color, 0)]} />
      </View>
      <EmojiPickerCategories bottomSheetRef={bottomSheetRef} bottomSheetIndex={bottomSheetIndex} style={safeAreaStyle} emojiPickerListRef={ref2} categories={emojiCategories} categoryIndexActive={sharedValue} onBackspace={onBackspace} inPortalKeyboard={inPortalKeyboard} isSearching={searchResults != null} onClearSearch={callback} />
    </View>
  </AnalyticsLocationProvider>;
});
export default r66;