discord-decomp/modules/gif_picker/native/GIFPicker.tsx

// Metro module 9595 (f9596).
import * as Module19 from "react";
import { useEffect, useState, useCallback, useMemo, useRef } from "react";
import { View } from "react-native";
import GIFPickerViewStore from "../../../stores/views/GIFPickerViewStore";
import { AnalyticEvents, ChatInputComponentViewedTypes, GIFPickerResultTypes, GIF_FETCH_LIMIT_IOS, TooltipNames } from "../../../Constants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import { initializeSearch, resetSearch, search, fetchTrendingSearchTerms, fetchSuggestions, trackSelectGIF, fetchTrendingGIFs } from "../../../actions/GIFPickerActionCreators";
import AnalyticsUtils from "../../../utils/AnalyticsUtils";
import useIsWindowLarge from "../../screen/native/useIsWindowLarge";
import { GIF_PICKER_GUTTER_SPACING, useFavoriteGIFsMobile } from "./GIFPickerUtils";
import { debounce } from "../../../_bundle/Module12";
import { filterFavoriteGIFsByQuery } from "../GifPickerUtils";
import { useStateFromStoresObject } from "../../../_bundle/Module589";
import TooltipActionCreators from "../../tooltip/TooltipActionCreators";
import GIFPickerSearchSuggestions from "./GIFPickerSearchSuggestions";
import GIFPickerHeader from "./GIFPickerHeader";
import GIFPickerNoResults from "./GIFPickerNoResults";
import GIFPickerResultsList from "./GIFPickerResultsList";
import GIFPickerCategoriesPage from "./GIFPickerCategoriesPage";
const useStyles = createStyles({
  container: {
    flex: 1
  }
});
const r41 = Module19.memo(function GIFPicker(props) {
  let c17326_6, state, setState, ref, setState2, ref2, ref3, setState3, state2, setState4, state3, setState5, memo, favorites, memo2, resultItems, resultQuery, callback;
  const { bottomSheetRef, channelId, guildId, hideFavorites, initialQuery, inActionSheet = true, contentHorizontalPadding, selectedGifSrc, keyboardDismissMode, onPressGIF } = props;
  c17326_6 = void 0;
  state = void 0;
  setState = void 0;
  ref = void 0;
  setState2 = void 0;
  ref2 = void 0;
  ref3 = void 0;
  setState3 = void 0;
  state2 = void 0;
  setState4 = void 0;
  state3 = void 0;
  setState5 = void 0;
  memo = void 0;
  favorites = void 0;
  memo2 = void 0;
  resultItems = void 0;
  resultQuery = void 0;
  callback = void 0;
  const styles = useStyles();
  useEffect(() => {
    initializeSearch();
    resetSearch();
    if (channelId != null) {
      AnalyticsUtils.track(AnalyticEvents.CHAT_INPUT_COMPONENT_VIEWED, {
        type: ChatInputComponentViewedTypes.GIF,
        channel_id: channelId,
        guild_id: guildId
      });
    }
  }, [channelId, guildId]);
  const isWindowLarge = useIsWindowLarge();
  c17326_6 = isWindowLarge;
  [state, setState] = useState(0);
  const callback2 = useCallback((a0) => {
    setState(a0.nativeEvent.layout.width);
  }, []);
  const memo3 = useMemo(() => {
    const columns = c17326_6 ? 3 : 2;
    const r6 = Math;
    let r12 = contentHorizontalPadding;
    if (contentHorizontalPadding == null) {
      r12 = 0;
    }
    return {
      columns,
      columnWidth: r6.max(0, (state - 2 * r12 + GIF_PICKER_GUTTER_SPACING) / columns - GIF_PICKER_GUTTER_SPACING)
    };
  }, [isWindowLarge, state, contentHorizontalPadding]);
  const { columns, columnWidth } = memo3;
  ref = useRef(null);
  let state4;
  [state4, setState2] = useState(false);
  ref2 = useRef("");
  ref3 = useRef(false);
  let loading;
  [loading, setState3] = useState(false);
  [state2, setState4] = useState(GIFPickerResultTypes.SEARCH);
  [state3, setState5] = useState("");
  const callback3 = useCallback(() => {
    setState2(false);
    setState4(GIFPickerResultTypes.SEARCH);
    setState5("");
    resetSearch();
    const current = ref.current;
    if (current != null) {
      current.blur();
    }
  }, [ref]);
  memo = useMemo(() => debounce(search, 200), []);
  const favoriteGIFsMobile = useFavoriteGIFsMobile();
  favorites = favoriteGIFsMobile.favorites;
  const favoritesCategory = favoriteGIFsMobile.favoritesCategory;
  memo2 = useMemo(() => filterFavoriteGIFsByQuery(favorites, state3), [favorites, state3]);
  const stateFromStoresObject = useStateFromStoresObject([GIFPickerViewStore], () => ({
    resultItems: state2 !== GIFPickerResultTypes.FAVORITES ? GIFPickerViewStore.getResultItems() : memo2,
    resultQuery: GIFPickerViewStore.getResultQuery()
  }));
  resultItems = stateFromStoresObject.resultItems;
  resultQuery = stateFromStoresObject.resultQuery;
  callback = useCallback(function(a0, r6 = true) {
    if (ref2.current !== a0) {
      ref2.current = a0;
      setState4(GIFPickerResultTypes.SEARCH);
      const r3 = a0.trim().length > 0;
      setState3(!!r3 && resultQuery !== a0);
      setState2(r3);
      (r6 ? memo : search)(a0, a0 !== "" ? GIFPickerResultTypes.SEARCH : null, !r6, GIF_FETCH_LIMIT_IOS);
      if (!r6) {
        const current = ref.current;
        if (current != null) {
          current.setText(a0);
        }
      }
    }
  }, [memo, ref, resultQuery]);
  useEffect(() => {
    if (!ref3.current && initialQuery != null && initialQuery.trim().length > 0) {
      ref3.current = true;
      callback(initialQuery, false);
    }
  }, [callback, initialQuery]);
  useEffect(() => {
    TooltipActionCreators.acknowledgeTooltip(TooltipNames.GIF_PICKER_TOOLTIP);
    fetchTrendingSearchTerms();
  }, []);
  useEffect(() => {
    if (resultQuery !== "") {
      fetchSuggestions(resultQuery);
    }
    const current = ref.current;
    setState3(resultQuery !== (current == null ? void 0 : current.getText()));
  }, [resultQuery, ref]);
  const memo4 = useMemo(() => <GIFPickerSearchSuggestions onClickSuggestion={(event) => callback(event, false)} />, [callback]);
  const callback4 = useCallback((a0, a1) => {
    trackSelectGIF({
      type: GIFPickerResultTypes.SEARCH,
      index: a1,
      offset: 0,
      limit: GIF_FETCH_LIMIT_IOS,
      results: resultItems.length,
      totalResults: resultItems.length,
      query: resultQuery,
      gifId: a0.id
    });
    onPressGIF(a0);
  }, [onPressGIF, resultItems.length, resultQuery]);
  const callback5 = useCallback((a0, a1) => {
    if (a0 === GIFPickerResultTypes.TRENDING_GIFS) {
      setState2(false);
      setState4(a0);
      fetchTrendingGIFs(GIF_FETCH_LIMIT_IOS);
    } else if (a0 === GIFPickerResultTypes.FAVORITES) {
      setState2(false);
      setState4(a0);
    } else {
      callback(a1, false);
    }
    const current = bottomSheetRef.current;
    if (current != null) {
      current.expandActionSheet();
    }
  }, [bottomSheetRef, callback]);
  if (loading) {
    loading = state2 !== GIFPickerResultTypes.FAVORITES;
  }
  return <View onLayout={callback2} style={[styles.container, contentHorizontalPadding != null ? {
    paddingHorizontal: contentHorizontalPadding
  } : null]}>
    <GIFPickerHeader categoryType={state2} columnWidth={columnWidth} onQueryClear={callback3} onQueryChange={callback} onFavoritesQueryChange={setState5} searchInputRef={ref} />
    {!(resultItems.length > 0) && (!state4 && !(state3.length > 0)) ? <GIFPickerCategoriesPage columns={columns} onSelectCategory={callback5} favoritesCategory={hideFavorites !== true ? favoritesCategory : void 0} inActionSheet={inActionSheet} /> : resultItems.length === 0 && !loading ? <GIFPickerNoResults categoryType={state2} inActionSheet={inActionSheet} /> : <GIFPickerResultsList columns={columns} columnWidth={columnWidth} loading={loading} inActionSheet={inActionSheet} resultItems={resultItems} onPressGIF={callback4} selectedGifSrc={selectedGifSrc} keyboardDismissMode={keyboardDismissMode} ListFooterComponent={memo4} />}
  </View>;
});
export default r41;