"use strict";

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

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

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

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

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

var _Common = require("../../../../../Common");

var _lib = require("@sentecacommerce-theme/lib");

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

var FilterWrapper = function FilterWrapper(_ref) {
  var children = _ref.children,
      filterName = _ref.filterName,
      count = _ref.count,
      onMobileArrowClick = _ref.onMobileArrowClick,
      withMobileArrow = _ref.withMobileArrow,
      _ref$mobileIconDirect = _ref.mobileIconDirection,
      mobileIconDirection = _ref$mobileIconDirect === void 0 ? 'right' : _ref$mobileIconDirect,
      withResetAllButton = _ref.withResetAllButton;
  var clearAll = (0, _lib.useClearAllFilters)();
  var labels = (0, _lib.useLocalLabels)();
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(Header, {
    withMobileArrow: withMobileArrow,
    onClick: withMobileArrow ? onMobileArrowClick : undefined
  }, /*#__PURE__*/_react["default"].createElement(FilterName, null, /*#__PURE__*/_react["default"].createElement("span", null, filterName), " ", Boolean(count) && /*#__PURE__*/_react["default"].createElement(Count, null, count)), withMobileArrow && /*#__PURE__*/_react["default"].createElement(MobileModalArrow, null, /*#__PURE__*/_react["default"].createElement(_Common.IconAnimatedArrow, {
    direction: mobileIconDirection
  })), withResetAllButton && /*#__PURE__*/_react["default"].createElement(ClearAllButton, {
    onClick: clearAll
  }, labels.resetAll)), /*#__PURE__*/_react["default"].createElement(ChildrenWrapper, null, children)));
};

exports.FilterWrapper = FilterWrapper;

var Header = _styledComponents["default"].div.attrs(function (props) {
  return {
    className: "d-flex align-items-center justify-content-between " + (props.withMobileArrow ? 'mb-0 mb-md-2' : 'mb-2')
  };
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n  padding: 0 3rem;\n\n  @media (min-width: ", ") {\n    pointer-events: ", ";\n  }\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.breakpoints.md.min;
}, function (props) {
  return props.withMobileArrow ? 'none' : 'all';
});

var ClearAllButton = _styledComponents["default"].span.attrs({
  className: 'd-block ml-auto',
  tabIndex: 0
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  cursor: pointer;\n  color: ", ";\n"])), function (_ref3) {
  var theme = _ref3.theme;
  return theme.palette.hint;
});

var ChildrenWrapper = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  border-bottom: 0.1rem solid ", ";\n  padding: 0 3rem 3rem;\n"])), function (_ref4) {
  var theme = _ref4.theme;
  return theme.palette.light;
});

var Container = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n  border-bottom: 0.8rem solid #f5f5f5;\n  padding-top: 3rem;\n  background-color: ", ";\n"])), function (_ref5) {
  var theme = _ref5.theme;
  return theme.palette.secondary;
});

var MobileModalArrow = _styledComponents["default"].div.attrs({
  className: 'd-md-none px-2'
})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Count = _styledComponents["default"].span.attrs({
  className: 'd-flex align-items-center justify-content-center ml-2'
})(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 2.6rem;\n  height: 2rem;\n  font-size: 1.1rem;\n  color: ", ";\n  background-color: ", ";\n  border-radius: 4rem;\n"])), function (_ref6) {
  var theme = _ref6.theme;
  return theme.palette.secondary;
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.palette.primary;
});

var FilterName = _styledComponents["default"].div.attrs({
  className: 'd-flex align-items-center justify-content-center'
})(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  font-size: 1.6rem;\n  font-weight: bold;\n  text-transform: uppercase;\n"])));
//# sourceMappingURL=index.js.map