"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SearchInput = void 0;
var _react = _interopRequireWildcard(require("react"));
var _native = _interopRequireWildcard(require("styled-components/native"));
var _reactNative = require("react-native");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const shouldForwardProp = prop => prop !== 'animated' && prop !== 'expanded' && prop !== 'direction';
const SearchInputWrapper = _native.default.View.withConfig({
  shouldForwardProp
})`
  position: relative;
  flex-direction: row;
  align-items: center;
  background-color: #fff;
  border-radius: 16px;
  height: 44px;
  padding: 0 12px;
  margin: 0 0 12px 0;
  flex: 1;
  ${({
  animated,
  expanded
}) => animated && (0, _native.css)`
      justify-content: ${expanded ? 'flex-start' : 'center'};
      transition: width 0.7s ease-in-out;
    `};
`;
const SearchIcon = (0, _native.default)(_reactNative.TouchableOpacity)`
  padding: 0;
  margin-right: 8px;
  align-items: center;
  justify-content: center;
  color: #999;
`;
const StyledInput = (0, _native.default)(_reactNative.TextInput)`
  background-color: transparent;
  border: none;
  flex: 1;
  font-size: 16px;
  color: #000;
  opacity: ${({
  animated,
  expanded
}) => animated && !expanded ? 0 : 1};
  display: ${({
  animated,
  expanded
}) => animated && !expanded ? 'none' : 'flex'};
  ${({
  animated
}) => animated && (0, _native.css)`
      transition: opacity 0.7s ease-in-out;
    `}
`;
const SearchInput = ({
  icon,
  animated = false,
  direction = 'left',
  placeholder,
  ...props
}) => {
  const [isExpanded, setIsExpanded] = (0, _react.useState)(false);
  const [isTyping, setIsTyping] = (0, _react.useState)(false);
  const inputRef = (0, _react.useRef)(null);
  const handleFocus = () => {
    setIsExpanded(true);
  };
  const handleBlur = () => {
    if (!isTyping) {
      setIsExpanded(false);
    }
  };
  const handleInput = text => {
    setIsTyping(!!text);
  };
  (0, _react.useEffect)(() => {
    if (isExpanded && animated) {
      const timeout = setTimeout(() => {
        inputRef.current?.focus();
      }, 250);
      return () => clearTimeout(timeout);
    }
  }, [isExpanded, animated]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(SearchInputWrapper, {
    animated: animated,
    direction: direction,
    expanded: isExpanded,
    onTouchStart: handleFocus,
    children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(SearchIcon, {
      animated: animated,
      expanded: isExpanded,
      onPress: () => inputRef.current?.focus(),
      children: icon
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledInput, {
      ref: inputRef,
      onBlur: handleBlur,
      animated: animated,
      expanded: isExpanded,
      onChangeText: handleInput,
      placeholder: placeholder,
      placeholderTextColor: "#999",
      ...props
    })]
  });
};
exports.SearchInput = SearchInput;
//# sourceMappingURL=Search.js.map