"use strict";

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

exports.__esModule = true;
exports.SearchBar = void 0;

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

var _react = _interopRequireDefault(require("react"));

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

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

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;

var SearchBar = function SearchBar(_ref) {
  var handleSearchBox = _ref.handleSearchBox,
      onChange = _ref.onChange,
      onKeyDown = _ref.onKeyDown,
      inputRef = _ref.inputRef,
      value = _ref.value,
      onClearResult = _ref.onClearResult,
      completionTerm = _ref.completionTerm,
      isSearchBoxOpen = _ref.isSearchBoxOpen,
      onSearchSubmit = _ref.onSearchSubmit;
  return /*#__PURE__*/_react["default"].createElement(Container, {
    className: "py-2 px-3"
  }, /*#__PURE__*/_react["default"].createElement(Wrapper, {
    className: "pt-2"
  }, /*#__PURE__*/_react["default"].createElement(Inner, null, /*#__PURE__*/_react["default"].createElement(SearchInputContainer, {
    onFocus: function onFocus() {
      return handleSearchBox(true);
    }
  }, /*#__PURE__*/_react["default"].createElement(SearchInput, {
    autoComplete: "off",
    ref: inputRef,
    className: "py-2 px-5",
    placeholder: "Search",
    type: "text",
    id: "navbar-search-input",
    onChange: onChange,
    onKeyDown: onKeyDown
  }), /*#__PURE__*/_react["default"].createElement(LabelWrapper, {
    htmlFor: "navbar-search-input",
    className: "p-2",
    onClick: onSearchSubmit
  }, /*#__PURE__*/_react["default"].createElement(_Icons.MagnifyingGlass, null)), value && /*#__PURE__*/_react["default"].createElement(Value, {
    onClick: function onClick() {
      return handleSearchBox(true);
    }
  }, /*#__PURE__*/_react["default"].createElement("span", null, value), isSearchBoxOpen && /*#__PURE__*/_react["default"].createElement("span", null, completionTerm.replace(value.toLowerCase(), ''))), value && /*#__PURE__*/_react["default"].createElement(IconClearTextBtn, {
    onClick: onClearResult
  }, /*#__PURE__*/_react["default"].createElement(_Icons.IconClearText, {
    className: "icon-clear-text"
  }))))));
};

exports.SearchBar = SearchBar;

var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  height: 6rem;\n  width: 100%;\n  overflow: hidden;\n  background: var(--menu-background);\n\n  @media only screen and (min-width: ", ") {\n    transition: background 10ms, height 0.15s, width 0.15s;\n    display: block;\n  }\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.breakpoints.lg.min;
});

var Wrapper = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  @media only screen and (min-width: ", ") {\n    max-width: 1920px;\n    margin: auto;\n  }\n\n  [data-is-active='true'] & {\n    position: absolute;\n    left: 0;\n    right: 0;\n    width: calc(100% - 3.2rem);\n    margin: 0 auto;\n  }\n"])), function (_ref3) {
  var theme = _ref3.theme;
  return theme.breakpoints.xl.min;
});

var Inner = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  display: flex;\n  position: relative;\n  padding: 0 14.4rem;\n  @media (max-width: ", ") {\n    [data-is-active='false'] & {\n      display: none;\n    }\n  }\n\n  @media only screen and (min-width: ", ") {\n    justify-content: flex-end;\n  }\n"])), function (_ref4) {
  var theme = _ref4.theme;
  return theme.breakpoints.md.max;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.breakpoints.lg.min;
});

var Value = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: absolute;\n  font-size: 1.6rem;\n  line-height: 1.5;\n  left: 4.6rem;\n\n  top: 0.65rem;\n  margin-left: 0.2rem;\n\n  z-index: 15;\n\n  color: rgba(0, 0, 0, 0);\n\n  & > span:last-of-type {\n    opacity: 0.3;\n    color: ", ";\n  }\n"])), function (_ref6) {
  var theme = _ref6.theme;
  return theme.palette.hint;
});

var SearchInputContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  flex-grow: 1;\n  display: block;\n  position: relative;\n  float: right;\n  margin: 0 7.4rem 0 1.2rem;\n\n  width: 0;\n  transition: background 0.15s, color 0.35s 0.5s;\n\n  @media only screen and (min-width: ", ") {\n    width: 18rem;\n    position: absolute;\n    z-index: 1;\n    top: -6px;\n    right: 0;\n    margin: 0;\n    display: flex;\n    flex-grow: 0;\n    align-items: flex-end;\n    flex-direction: column;\n    transition: width 0.25s, transform 0.35s;\n    transform: translateX(0);\n  }\n\n  [data-is-active='true'] & {\n    position: absolute;\n    z-index: 1;\n    top: -6px;\n    right: 0;\n    margin: 0;\n    transition: width 0.25s ease, transform 0.25s ease;\n    transform: translateX(0);\n    display: flex;\n    flex-grow: 0;\n    align-items: flex-end;\n    flex-direction: column;\n\n    width: calc(100% - 4em);\n    right: 2rem;\n\n    @media (min-width: ", ") {\n      position: relative;\n      margin: auto 0;\n      width: 65.6rem;\n      float: none;\n      transform: translateX(0) translateX(-50vw) translateX(488px);\n      right: -0.05rem;\n    }\n\n    @media (min-width: 2000px) {\n      transform: translateX(-50%) translateX(-25%);\n    }\n  }\n"])), function (_ref7) {
  var theme = _ref7.theme;
  return theme.breakpoints.lg.min;
}, function (_ref8) {
  var theme = _ref8.theme;
  return theme.breakpoints.lg.min;
});

var SearchInput = _styledComponents["default"].input(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  background: transparent;\n  visibility: hidden;\n  color: transparent;\n  border-radius: 0.8rem;\n  padding-right: 5.6rem;\n  height: 4rem;\n  width: 4rem;\n  cursor: pointer;\n  font-weight: 500;\n  line-height: 1.5;\n  border: none;\n  outline: none;\n  font-size: 1.6rem;\n\n  z-index: 10;\n\n  @media only screen and (min-width: ", ") {\n    visibility: visible;\n    width: 100%;\n    background: ", ";\n    color: inherit;\n    cursor: text;\n  }\n\n  [data-is-active='true'] & {\n    visibility: visible;\n    width: 100%;\n    background: ", ";\n    color: inherit;\n    cursor: text;\n\n    caret-color: ", ";\n    color: ", ";\n  }\n\n  ::placeholder {\n    color: ", ";\n  }\n"])), function (_ref9) {
  var theme = _ref9.theme;
  return theme.breakpoints.lg.min;
}, function (_ref10) {
  var theme = _ref10.theme;
  return theme.palette.whiteSmoke;
}, function (_ref11) {
  var theme = _ref11.theme;
  return theme.palette.whiteSmoke;
}, function (_ref12) {
  var theme = _ref12.theme;
  return theme.palette.primary;
}, function (_ref13) {
  var theme = _ref13.theme;
  return theme.palette.primary;
}, function (_ref14) {
  var theme = _ref14.theme;
  return theme.palette.grey;
});

var LabelWrapper = _styledComponents["default"].label(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: absolute;\n  top: 0;\n  left: 2px;\n  display: flex;\n  align-items: center;\n  border-radius: 10rem;\n  background: transparent;\n  outline: 0;\n  border: none;\n\n  z-index: 15;\n\n  visibility: hidden;\n\n  [data-is-active='true'] & {\n    visibility: visible;\n  }\n\n  width: 4rem;\n\n  @media (min-width: ", ") {\n    visibility: visible;\n  }\n\n  top: 1px;\n  right: 0;\n"])), function (_ref15) {
  var theme = _ref15.theme;
  return theme.breakpoints.lg.min;
});

var IconClearTextBtn = _styledComponents["default"].a(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: absolute;\n  display: flex;\n  align-items: center;\n\n  z-index: 15;\n\n  top: 0;\n  bottom: 0;\n  right: 2rem;\n  cursor: pointer;\n\n  & .icon-clear-text {\n    width: 2.4rem;\n    height: 2.4rem;\n  }\n"])));
//# sourceMappingURL=index.js.map