// Metro module 15889 (f15890).
import { memo, useState, useRef, useCallback } from "react";
import { View } from "react-native";
import { setSearchQuery, useExpressionPickerStore } from "../../expression_picker/ExpressionPickerStore";
import RTCConnectionStore from "../../../stores/RTCConnectionStore";
import UserStore from "../../../stores/UserStore";
import { SOUND_ROW_HORIZONTAL_PADDING } from "./SoundboardStyleConstants";
import { EXPRESSION_FOOTER_HEIGHT } from "../../../Constants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { useSharedValue } from "../../reanimated/ReanimatedRexport";
import { useStateFromStores } from "../../../_bundle/defaultAreStatesEqual";
import useSoundGrid, { useSearchCategories } from "../useSoundGrid";
import { searchSounds } from "../searchSounds";
import useSafeAreaInsetsKeyboardAware_native from "../../safe_area/useSafeAreaInsetsKeyboardAware.native";
import useAnalyticsLocations, { AnalyticsLocationProvider } from "../../app_analytics/useAnalyticsLocations";
import AnalyticsLocation from "../../app_analytics/AnalyticsLocation";
import useTrackImpression from "../../app_analytics/useTrackImpression";
import { ImpressionTypes, ImpressionNames } from "../../../_bundle/Module503";
import { isIOS, isAndroid } from "../../../utils/PlatformUtils";
import PortalKeyboardFooterIOS_ios from "../../keyboard/native/PortalKeyboardFooterIOS.ios";
import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
import { PortalHost } from "../../../_bundle/Module4060";
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 { SoundboardSoundPickerList } from "./SoundboardSoundPickerList";
import PremiumSoundboardFeatureUpsell from "../../premium/roadblocks/native/views/PremiumSoundboardFeatureUpsell";
import SoundboardSoundPickerCategories from "./SoundboardSoundPickerCategories";
const useStyles = createStyles({
  title: {
    marginBottom: 8
  },
  container: {
    flex: 1,
    alignItems: "center"
  },
  header: {
    paddingHorizontal: SOUND_ROW_HORIZONTAL_PADDING,
    padding: Module712.space.PX_8,
    width: "100%"
  },
  body: {
    flex: 1,
    width: "100%"
  }
});
const r53 = memo(function SoundboardSoundPicker(props) {
  let availableSounds, setState;
  const { channel, analyticsSource } = props;
  availableSounds = void 0;
  setState = void 0;
  const styles = useStyles();
  const [categoryIndex, setCategoryIndex] = useState(0);
  const ref = useRef(null);
  const sharedValue2 = useSharedValue(0);
  const stateFromStores = useStateFromStores([UserStore], () => UserStore.getCurrentUser());
  const stateFromStores2 = useStateFromStores([RTCConnectionStore], () => RTCConnectionStore.getMediaSessionId());
  const soundGrid = useSoundGrid(channel, {
    filterOutEmptyCurrentGuild: true
  });
  const categories = soundGrid.categories;
  availableSounds = soundGrid.availableSounds;
  const expressionPickerStore = useExpressionPickerStore((a0) => a0.searchQuery);
  let state;
  [state, setState] = useState(searchSounds(expressionPickerStore, availableSounds, stateFromStores, channel));
  const searchCategories = useSearchCategories(categories, state, expressionPickerStore);
  const insets = useSafeAreaInsetsKeyboardAware_native({
    isKeyboardAwareOnAndroid: false
  }).insets;
  const analyticsLocations = useAnalyticsLocations(AnalyticsLocation.SOUNDBOARD_ACTION_SHEET).analyticsLocations;
  const callback = useCallback((a0) => {
    setSearchQuery(a0);
    setState(searchSounds(a0, availableSounds, stateFromStores, channel));
  }, [channel, stateFromStores, availableSounds]);
  useTrackImpression({
    type: ImpressionTypes.HALFSHEET,
    name: ImpressionNames.SOUNDBOARD_POPOUT,
    properties: {
      source: analyticsSource,
      guild_id: channel.guild_id,
      media_session_id: stateFromStores2
    }
  });
  const sharedValue3 = useSharedValue(-1);
  const sharedValue = useSharedValue(false);
  return <AnalyticsLocationProvider value={analyticsLocations}>
    {isIOS() && <PortalKeyboardFooterIOS_ios animatedSheetIndex={sharedValue3} portalHostName="soundboard-footer" followSystemKeyboard />}
    <BottomSheet animatedIndex={sharedValue3} scrollable startExpanded footer={isAndroid() ? <PortalHost name="soundboard-footer" /> : void 0}>
      <View style={styles.container}>
        <Text accessibilityRole="header" variant="heading-lg/bold" style={styles.title}>
          {intl.string(t.ABjMWI)}
        </Text>
        <View style={styles.header}>
          <SearchField size="md" placeholder={intl.string(t.sKt3xS)} onChange={callback} />
        </View>
        <View style={styles.body}>
          <SoundboardSoundPickerList listRef={ref} channel={channel} insetBottom={EXPRESSION_FOOTER_HEIGHT + insets.bottom + Module712.space.PX_16} scrollPosition={sharedValue2} setCategoryIndex={setCategoryIndex} categories={searchCategories} shouldShowPremiumUpsell={sharedValue} />
        </View>
        <PremiumSoundboardFeatureUpsell shouldShow={sharedValue} />
      </View>
      <SoundboardSoundPickerCategories guildId={channel.guild_id} listRef={ref} categories={categories} categoryIndex={categoryIndex} />
    </BottomSheet>
  </AnalyticsLocationProvider>;
});
export default r53;