// Metro module 9606 (f9607).
import { useRef, useState, useEffect, useCallback, memo } from "react";
import { View } from "react-native";
import { GIFPickerResultTypes } from "../../../Constants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { GIF_PICKER_GUTTER_SPACING } from "./GIFPickerUtils";
import { InputHeights } from "../../../design/components/Input/native/InputTypes.native";
import ReanimatedRexport, { useSharedValue, useAnimatedStyle } from "../../reanimated/ReanimatedRexport";
import { withTiming } from "../../../design/animation/reanimated/timing/timing";
import { timingFast } from "../../../design/animation/reanimated/timing/timingPresets";
import { IconButton } from "../../../design/components/Button/native/IconButton.native";
import Module8295 from "../../../_bundle/Module8295";
import { intl, t } from "../../../intl/index.native";
import { SearchField } from "../../../design/components/TextField/native/SearchField.native";
import { getSearchPlaceholder } from "../GifPickerUtils";
import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
import { ChevronLargeLeftIcon } from "../../../design/components/Icon/native/redesign/generated/ChevronLargeLeftIcon";
import { Text } from "../../../design/components/Text/native/Text";
let useStyles, __initData, __initData2;
const FavoritesSearch = function FavoritesSearch(props) {
  const { columnWidth, onQueryChange } = props;
  const styles = useStyles();
  const ref = useRef(null);
  const [state, setState] = useState(false);
  const sharedValue = useSharedValue(0);
  useEffect(() => {
    sharedValue.set(withTiming(state ? 1 : 0, timingFast));
    if (state) {
      const current = ref.current;
      if (current != null) {
        current.focus();
      }
    }
  }, [state, sharedValue]);
  const S = () => ({
    opacity: 1 - sharedValue.get()
  });
  S.__closure = {
    progress: sharedValue
  };
  S.__workletHash = 11452628946352;
  S.__initData = __initData;
  const animatedStyle = useAnimatedStyle(S);
  const v = () => ({
    width: sharedValue.get() * columnWidth,
    opacity: sharedValue.get()
  });
  v.__closure = {
    progress: sharedValue,
    columnWidth
  };
  v.__workletHash = 12592656871997;
  v.__initData = __initData2;
  const animatedStyle2 = useAnimatedStyle(v);
  const callback = useCallback(() => setState(true), []);
  const callback2 = useCallback(() => {
    const current = ref.current;
    if ((current == null ? void 0 : current.getText()) === "") {
      setState(false);
    }
  }, []);
  return <>
    {[<ReanimatedRexport.View style={animatedStyle} pointerEvents={state ? "none" : "auto"} accessibilityElementsHidden={state} importantForAccessibility={state ? "no-hide-descendants" : "auto"}>
      <IconButton variant="icon-only" size="md" icon={Module8295} accessibilityLabel={intl.string(t["+Kakw+"])} onPress={callback} />
    </ReanimatedRexport.View>, <ReanimatedRexport.View style={[styles.favoritesSearch, animatedStyle2]} pointerEvents={state ? "auto" : "none"} accessibilityElementsHidden={!state} importantForAccessibility={state ? "auto" : "no-hide-descendants"}>
      <SearchField ref={ref} size="md" onChange={onQueryChange} onClear={() => onQueryChange == null ? void 0 : onQueryChange("")} onBlur={callback2} placeholder={intl.string(t["+Kakw+"])} />
    </ReanimatedRexport.View>]}
  </>;
};
useStyles = createStyles({
  container: {
    paddingVertical: Module712.space.PX_8
  },
  headerContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
    gap: GIF_PICKER_GUTTER_SPACING
  },
  header: {
    borderWidth: 1,
    borderColor: "transparent",
    paddingHorizontal: Module712.space.PX_8,
    height: InputHeights.MD,
    flexDirection: "row",
    alignItems: "center",
    gap: Module712.space.PX_8
  },
  favoritesSearch: {
    position: "absolute",
    top: 0,
    end: 0,
    overflow: "hidden"
  }
});
__initData = {
  code: "function GIFPickerHeaderTsx1(){const{progress}=this.__closure;return{opacity:1-progress.get()};}"
};
__initData2 = {
  code: "function GIFPickerHeaderTsx2(){const{progress,columnWidth}=this.__closure;return{width:progress.get()*columnWidth,opacity:progress.get()};}"
};
const r61 = memo(function GIFPickerHeader(props) {
  const { categoryType, columnWidth: columnWidth2, onQueryClear, onQueryChange: onQueryChange2, onFavoritesQueryChange, searchInputRef } = props;
  const styles = useStyles();
  const searchPlaceholder = getSearchPlaceholder();
  return <View style={styles.container}>
    {categoryType === GIFPickerResultTypes.SEARCH ? <SearchField size="md" onChange={onQueryChange2} placeholder={searchPlaceholder} onClear={onQueryClear} ref={searchInputRef} isRound /> : <View style={styles.headerContainer}>
      <PressableOpacity style={styles.header} accessibilityRole="button" onPress={onQueryClear} accessibilityLabel={intl.formatToPlainString(t.UTypEu, {
        destination: intl.string(t.ffgJrs)
      })}>
        <ChevronLargeLeftIcon color={Module712.colors.INTERACTIVE_TEXT_ACTIVE} size="sm" />
        <Text variant="text-sm/semibold" color="text-default" maxFontSizeMultiplier={2}>
          {categoryType === GIFPickerResultTypes.TRENDING_GIFS ? intl.string(t.TsWCdW) : categoryType === GIFPickerResultTypes.FAVORITES ? intl.string(t.k8fFjp) : intl.string(t["5h0QOP"])}
        </Text>
      </PressableOpacity>
      {categoryType === GIFPickerResultTypes.FAVORITES && <FavoritesSearch columnWidth={columnWidth2} onQueryChange={onFavoritesQueryChange} />}
    </View>}
  </View>;
});
export default r61;