"use strict";

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