"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var React = _interopRequireWildcard(require("react"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _Icons = require("../../Atoms/Icons");

var _Inputs = require("../../Atoms/Inputs");

var _injectE2E = _interopRequireDefault(require("../../Tools/injectE2E"));

var _interpolation = require("../../Tools/interpolation");

var Wrapper =
/*#__PURE__*/
_styledComponents.default.div.withConfig({
  componentId: "sc-19cmubo-0"
})(["\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  width: ", ";\n  background-color: ", ";\n  box-shadow: 0 2px 8px 1px ", ";\n  border-radius: 0.125rem;\n"], (0, _interpolation.prop)('width'), (0, _interpolation.theme)('searchBarBackgroundColor'), (0, _interpolation.theme)('searchBarShadowColor'));

var IconContainer =
/*#__PURE__*/
_styledComponents.default.div.withConfig({
  componentId: "sc-19cmubo-1"
})(["\n  position: absolute;\n  top: 50%;\n  left: 1rem;\n  margin-top: -10px;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  background-color: inherit;\n  border-color: transparent;\n"]);

var SearchIcon =
/*#__PURE__*/
(0, _styledComponents.default)(_Icons.FasSearch).withConfig({
  componentId: "sc-19cmubo-2"
})(["\n  fill: ", ";\n\n  &:hover {\n    fill: ", ";\n  }\n"], (0, _interpolation.theme)('searchBarIconColor'), (0, _interpolation.theme)('searchBarIconColor'));
var SearchInput =
/*#__PURE__*/
(0, _styledComponents.default)(_Inputs.Input).withConfig({
  componentId: "sc-19cmubo-3"
})(["\n  & > input {\n    height: 3.5rem;\n    padding-left: 3rem;\n    background-color: inherit;\n    border-color: transparent;\n\n    &:focus,\n    &:active {\n      box-shadow: none !important;\n    }\n  }\n"]);

var GoContainer =
/*#__PURE__*/
_styledComponents.default.div.attrs(_injectE2E.default).withConfig({
  componentId: "sc-19cmubo-4"
})(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  width: auto;\n  min-width: 4rem;\n  height: 3.5rem;\n  padding: 1rem;\n  box-sizing: border-box;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 600;\n  color: ", ";\n  background-color: ", ";\n  border-top-right-radius: 0.125rem;\n  border-bottom-right-radius: 0.125rem;\n  white-space: nowrap;\n\n  &:hover {\n    background-color: ", ";\n    cursor: pointer;\n  }\n"], (0, _interpolation.theme)('fontPrimary'), (0, _interpolation.fontSize)('xl'), (0, _interpolation.theme)('searchBarSubmitColor'), (0, _interpolation.theme)('searchBarSubmitBackgroundColor'), (0, _interpolation.theme)('searchBarSubmitHoverBackgroundColor'));

var GoLabel = function GoLabel() {
  return React.createElement(React.Fragment, null, "Go");
};

var SearchBar = function SearchBar(_ref) {
  var children = _ref.children,
      e2e = _ref.e2e,
      renderSubmit = _ref.renderSubmit,
      width = _ref.width,
      onChange = _ref.onChange,
      onClick = _ref.onClick,
      rest = (0, _objectWithoutProperties2.default)(_ref, ["children", "e2e", "renderSubmit", "width", "onChange", "onClick"]);
  var Submit = renderSubmit;
  return React.createElement(Wrapper, {
    width: width
  }, React.createElement(IconContainer, null, React.createElement(SearchIcon, {
    selectable: false,
    size: "20px"
  })), React.createElement(SearchInput, (0, _extends2.default)({
    e2e: "".concat(e2e || '', ".Input"),
    onChange: onChange
  }, rest)), React.createElement(GoContainer, {
    e2e: "".concat(e2e || '', ".Button"),
    onClick: onClick
  }, React.createElement(Submit, null)));
};

SearchBar.propTypes = process.env.NODE_ENV !== "production" ? {
  children: _propTypes.default.node,
  e2e: _propTypes.default.string,
  onChange: _propTypes.default.func,
  onClick: _propTypes.default.func,
  renderSubmit: _propTypes.default.func,
  value: _propTypes.default.any,
  width: _propTypes.default.string
} : {};
SearchBar.defaultProps = {
  e2e: 'defaultSearchBar',
  renderSubmit: GoLabel,
  width: '100%'
};
var _default = SearchBar;
exports.default = _default;