import { Image, Text, TextInput, TouchableOpacity, View } from 'react-native';
import { memo, useCallback, useState } from 'react';
import { useStyles } from './styles';
import { useNavigation } from '@react-navigation/native';
import { useUiKitConfig, useConfigImageUri } from '../../../../hooks';
import { ComponentID, ElementID, PageID, TabName } from '../../../../enums';
const AmityTopSearchBarComponent = ({
  setSearchValue,
  searchType
}) => {
  const styles = useStyles();
  const navigation = useNavigation();
  const [inputValue, setInputValue] = useState('');
  const searchIcon = useConfigImageUri({
    configPath: {
      page: PageID.social_global_search_page,
      component: ComponentID.top_search_bar,
      element: ElementID.search_icon
    },
    configKey: 'image'
  });
  const clearIcon = useConfigImageUri({
    configPath: {
      page: PageID.social_global_search_page,
      component: ComponentID.top_search_bar,
      element: ElementID.clear_button
    },
    configKey: 'icon'
  });
  const cancelText = useUiKitConfig({
    keys: ['text'],
    page: PageID.social_global_search_page,
    component: ComponentID.top_search_bar,
    element: ElementID.cancel_button
  });
  const onPressClear = useCallback(() => {
    setSearchValue('');
    setInputValue('');
  }, [setSearchValue]);
  const onPressCancel = useCallback(() => {
    navigation.goBack();
  }, [navigation]);
  const onChangeText = useCallback(text => {
    setSearchValue(text);
    setInputValue(text);
  }, [setSearchValue]);
  return /*#__PURE__*/React.createElement(View, {
    style: styles.headerWrap
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.inputWrap
  }, /*#__PURE__*/React.createElement(Image, {
    source: searchIcon,
    style: styles.searchIcon,
    testID: "top_search_bar/search_icon",
    accessibilityLabel: "top_search_bar/search_icon"
  }), /*#__PURE__*/React.createElement(TextInput, {
    value: inputValue,
    style: styles.input,
    onChangeText: onChangeText,
    placeholder: searchType === TabName.MyCommunities ? 'Search my community' : 'Search community and user',
    placeholderTextColor: "grey"
  }), (inputValue === null || inputValue === void 0 ? void 0 : inputValue.length) > 0 && /*#__PURE__*/React.createElement(TouchableOpacity, {
    onPress: onPressClear,
    testID: "top_search_bar/clear_button",
    accessibilityLabel: "top_search_bar/clear_button"
  }, /*#__PURE__*/React.createElement(Image, {
    source: clearIcon,
    width: 20,
    height: 20
  }))), /*#__PURE__*/React.createElement(TouchableOpacity, {
    onPress: onPressCancel,
    testID: "top_search_bar/cancel_button",
    accessibilityLabel: "top_search_bar/cancel_button"
  }, /*#__PURE__*/React.createElement(Text, {
    style: styles.cancelBtn
  }, cancelText[0])));
};
export default /*#__PURE__*/memo(AmityTopSearchBarComponent);
//# sourceMappingURL=TopSearchBar.js.map