import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import PropTypes from 'prop-types';
import * as React from 'react';
import styled from 'styled-components';
import { FasSearch } from '../../Atoms/Icons';
import { Input } from '../../Atoms/Inputs';
import injectE2E from '../../Tools/injectE2E';
import { fontSize, prop, theme } from '../../Tools/interpolation';
var Wrapper =
/*#__PURE__*/
styled.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"], prop('width'), theme('searchBarBackgroundColor'), theme('searchBarShadowColor'));
var IconContainer =
/*#__PURE__*/
styled.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__*/
styled(FasSearch).withConfig({
  componentId: "sc-19cmubo-2"
})(["\n  fill: ", ";\n\n  &:hover {\n    fill: ", ";\n  }\n"], theme('searchBarIconColor'), theme('searchBarIconColor'));
var SearchInput =
/*#__PURE__*/
styled(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__*/
styled.div.attrs(injectE2E).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"], theme('fontPrimary'), fontSize('xl'), theme('searchBarSubmitColor'), theme('searchBarSubmitBackgroundColor'), 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 = _objectWithoutProperties(_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, _extends({
    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.node,
  e2e: PropTypes.string,
  onChange: PropTypes.func,
  onClick: PropTypes.func,
  renderSubmit: PropTypes.func,
  value: PropTypes.any,
  width: PropTypes.string
} : {};
SearchBar.defaultProps = {
  e2e: 'defaultSearchBar',
  renderSubmit: GoLabel,
  width: '100%'
};
export default SearchBar;