"use strict";

import React, { useState, useEffect, useRef } from 'react';
import styled, { css } from 'styled-components/native';
import { TextInput, TouchableOpacity } from 'react-native';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const shouldForwardProp = prop => prop !== 'animated' && prop !== 'expanded' && prop !== 'direction';
const SearchInputWrapper = styled.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 && css`
      justify-content: ${expanded ? 'flex-start' : 'center'};
      transition: width 0.7s ease-in-out;
    `};
`;
const SearchIcon = styled(TouchableOpacity)`
  padding: 0;
  margin-right: 8px;
  align-items: center;
  justify-content: center;
  color: #999;
`;
const StyledInput = styled(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 && css`
      transition: opacity 0.7s ease-in-out;
    `}
`;
const SearchInput = ({
  icon,
  animated = false,
  direction = 'left',
  placeholder,
  ...props
}) => {
  const [isExpanded, setIsExpanded] = useState(false);
  const [isTyping, setIsTyping] = useState(false);
  const inputRef = useRef(null);
  const handleFocus = () => {
    setIsExpanded(true);
  };
  const handleBlur = () => {
    if (!isTyping) {
      setIsExpanded(false);
    }
  };
  const handleInput = text => {
    setIsTyping(!!text);
  };
  useEffect(() => {
    if (isExpanded && animated) {
      const timeout = setTimeout(() => {
        inputRef.current?.focus();
      }, 250);
      return () => clearTimeout(timeout);
    }
  }, [isExpanded, animated]);
  return /*#__PURE__*/_jsxs(SearchInputWrapper, {
    animated: animated,
    direction: direction,
    expanded: isExpanded,
    onTouchStart: handleFocus,
    children: [icon && /*#__PURE__*/_jsx(SearchIcon, {
      animated: animated,
      expanded: isExpanded,
      onPress: () => inputRef.current?.focus(),
      children: icon
    }), /*#__PURE__*/_jsx(StyledInput, {
      ref: inputRef,
      onBlur: handleBlur,
      animated: animated,
      expanded: isExpanded,
      onChangeText: handleInput,
      placeholder: placeholder,
      placeholderTextColor: "#999",
      ...props
    })]
  });
};
export { SearchInput };
//# sourceMappingURL=Search.js.map