import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
import _extends from "@babel/runtime/helpers/esm/extends";
var _templateObject;
/* "use client" */

import { useRef } from 'react';
import styled from 'styled-components';
import { ClearIcon } from './ClearIcon';
import { SearchIcon } from './SearchIcon';
export default function SearchInput(_ref) {
  var searchString = _ref.searchString,
    setSearchString = _ref.setSearchString,
    setHighlightedItem = _ref.setHighlightedItem,
    eraseResults = _ref.eraseResults,
    autoFocus = _ref.autoFocus,
    onFocus = _ref.onFocus,
    onClear = _ref.onClear,
    placeholder = _ref.placeholder,
    _ref$showIcon = _ref.showIcon,
    showIcon = _ref$showIcon === void 0 ? true : _ref$showIcon,
    _ref$showClear = _ref.showClear,
    showClear = _ref$showClear === void 0 ? true : _ref$showClear,
    maxLength = _ref.maxLength;
  var ref = useRef(null);
  var manualFocus = true;
  var setFocus = function setFocus() {
    manualFocus = false;
    (ref === null || ref === void 0 ? void 0 : ref.current) && ref.current.focus();
    manualFocus = true;
  };
  var handleOnFocus = function handleOnFocus(event) {
    manualFocus && onFocus(event);
  };
  var maxLengthProperty = maxLength ? {
    maxLength: maxLength
  } : {};
  return /*#__PURE__*/React.createElement(StyledSearchInput, null, /*#__PURE__*/React.createElement(SearchIcon, {
    showIcon: showIcon
  }), /*#__PURE__*/React.createElement("input", _extends({
    type: "text",
    ref: ref,
    spellCheck: false,
    value: searchString,
    onChange: setSearchString,
    onFocus: handleOnFocus,
    placeholder: placeholder,
    autoFocus: autoFocus,
    onBlur: function onBlur() {
      return eraseResults();
    },
    onKeyDown: function onKeyDown(event) {
      return setHighlightedItem({
        event: event
      });
    },
    "data-test": "search-input"
  }, maxLengthProperty)), /*#__PURE__*/React.createElement(ClearIcon, {
    showClear: showClear,
    setSearchString: setSearchString,
    searchString: searchString,
    onClear: onClear,
    setFocus: setFocus
  }));
}
var StyledSearchInput = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-height: ", ";\n  width: 100%;\n\n  display: flex;\n  align-items: center;\n\n  > input {\n    width: 100%;\n\n    padding: 0 0 0 13px;\n\n    border: none;\n    outline: none;\n\n    background-color: rgba(0, 0, 0, 0);\n    font-size: inherit;\n    font-family: inherit;\n\n    color: ", ";\n\n    ::placeholder {\n      color: ", ";\n      opacity: 1;\n\n      :-ms-input-placeholder {\n        color: ", ";\n      }\n\n      ::-ms-input-placeholder {\n        color: ", ";\n      }\n    }\n  }\n"])), function (props) {
  return props.theme.height;
}, function (props) {
  return props.theme.color;
}, function (props) {
  return props.theme.placeholderColor;
}, function (props) {
  return props.theme.placeholderColor;
}, function (props) {
  return props.theme.placeholderColor;
});