import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
//  strict
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 { prop, theme } from '../../Tools/interpolation';
var Wrapper =
/*#__PURE__*/
styled.div.withConfig({
  componentId: "t29ya6-0"
})(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  width: ", ";\n  border-bottom: 1px solid ", ";\n  background-color: ", ";\n"], prop('width'), theme('searchBarUnderlinedBorderColor'), theme('searchBarUnderlinedBackgroundColor'));
var SearchInput =
/*#__PURE__*/
styled(Input).withConfig({
  componentId: "t29ya6-1"
})(["\n  & > input {\n    background-color: inherit;\n    border-color: transparent;\n\n    &:focus,\n    &:active {\n      box-shadow: none !important;\n    }\n  }\n"]);
var IconContainer =
/*#__PURE__*/
styled.div.attrs(injectE2E).withConfig({
  componentId: "t29ya6-2"
})(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  width: 60px;\n  height: 40px;\n"]);

var SearchBarUnderlined = function SearchBarUnderlined(_ref) {
  var children = _ref.children,
      e2e = _ref.e2e,
      onClick = _ref.onClick,
      width = _ref.width,
      rest = _objectWithoutProperties(_ref, ["children", "e2e", "onClick", "width"]);

  return React.createElement(Wrapper, {
    width: width
  }, React.createElement(SearchInput, _extends({
    e2e: "".concat(e2e || '', ".Input")
  }, rest)), React.createElement(IconContainer, {
    e2e: "".concat(e2e || '', ".Button"),
    onClick: onClick
  }, React.createElement(FasSearch, {
    selectable: true,
    size: "20px"
  })));
};

SearchBarUnderlined.propTypes = process.env.NODE_ENV !== "production" ? {
  children: PropTypes.node,
  e2e: PropTypes.string,
  onChange: PropTypes.func,
  onClick: PropTypes.func,
  value: PropTypes.any,
  width: PropTypes.string
} : {};
SearchBarUnderlined.defaultProps = {
  e2e: 'defaultSearchBarUnderlined',
  width: '100%'
};
export default SearchBarUnderlined;