"use strict";

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

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

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

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

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

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

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

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

var _templateObject, _templateObject2;

var FiltersButton = function FiltersButton(_ref) {
  var data = _ref.data,
      renderFilters = _ref.renderFilters;

  var _useState = (0, _react.useState)(false),
      isOpen = _useState[0],
      setIsOpen = _useState[1];

  var openFilters = function openFilters() {
    return setIsOpen(true);
  };

  var hideFilters = function hideFilters() {
    return setIsOpen(false);
  };

  var count = (0, _lib.useAllSelectedFilters)(data || []).length;
  var labels = (0, _lib.useLocalLabels)();
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Button, {
    onClick: openFilters
  }, /*#__PURE__*/_react["default"].createElement("span", {
    className: "d-block mr-2"
  }, labels.filters), /*#__PURE__*/_react["default"].createElement(_Common.IconFilters, {
    width: "1.6rem"
  }), Boolean(count) && /*#__PURE__*/_react["default"].createElement(Count, null, count)), isOpen && renderFilters(hideFilters));
};

exports.FiltersButton = FiltersButton;

var Button = _styledComponents["default"].button.attrs({
  className: 'd-flex align-items-center py-0 px-0 pl-md-2'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n"])));

var Count = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 1.6rem;\n  height: 1.6rem;\n  font-size: 0.9rem;\n  font-weight: bold;\n  text-align: center;\n  line-height: 1.6rem;\n  vertical-align: middle;\n  color: ", ";\n  background-color: ", ";\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  top: 0.6rem;\n  right: -0.6rem;\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.palette.secondary;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.palette.primary;
});
//# sourceMappingURL=index.js.map