// Metro module 15474 (f15475).
import { memo } from "react";
import { View } from "react-native";
import SearchQueryStore from "../../stores/SearchQueryStore";
import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
import AppFreezer from "../../../../panels/morphable/native/AppFreezer";
import { useStateFromStores } from "../../../../../_bundle/Module589";
import SearchTabsLayout from "../tabs/SearchTabsLayout";
import AutocompleteScreen from "./autocomplete/AutocompleteScreen";
let useStyles;
const SearchFreezeContainer = function SearchFreezeContainer(props) {
  const { visible, children, containerStyle } = props;
  const styles = useStyles();
  return <AppFreezer manualFreeze={!visible} placeholder={null}>
    <View style={[containerStyle, visible ? styles.visible : styles.hidden]} aria-hidden={!visible}>{children}</View>
  </AppFreezer>;
};
useStyles = createStyles({
  hidden: {
    opacity: 0
  },
  visible: {
    flex: 1
  }
});
const r35 = memo(function({ searchContext, containerStyle, width }) {
  const stateFromStores = useStateFromStores([SearchQueryStore], () => SearchQueryStore.isAutocompleteVisible(searchContext), [searchContext]);
  return <>
    <SearchFreezeContainer visible={!stateFromStores} containerStyle={containerStyle}>
      <SearchTabsLayout searchContext={searchContext} width={width} />
    </SearchFreezeContainer>
    <SearchFreezeContainer visible={stateFromStores} containerStyle={containerStyle}>
      <AutocompleteScreen searchContext={searchContext} />
    </SearchFreezeContainer>
  </>;
});
export default r35;