import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";

var _templateObject, _templateObject2;

import React, { useState } from 'react';
import { useAllSelectedFilters, useLocalLabels } from '@sentecacommerce-theme/lib';
import styled from 'styled-components';
import { IconFilters } from '../../../Common';
export var FiltersButton = (_ref) => {
  var {
    data,
    renderFilters
  } = _ref;
  var [isOpen, setIsOpen] = useState(false);

  var openFilters = () => setIsOpen(true);

  var hideFilters = () => setIsOpen(false);

  var count = useAllSelectedFilters(data || []).length;
  var labels = useLocalLabels();
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
    onClick: openFilters
  }, /*#__PURE__*/React.createElement("span", {
    className: "d-block mr-2"
  }, labels.filters), /*#__PURE__*/React.createElement(IconFilters, {
    width: "1.6rem"
  }), Boolean(count) && /*#__PURE__*/React.createElement(Count, null, count)), isOpen && renderFilters(hideFilters));
};
var Button = styled.button.attrs({
  className: 'd-flex align-items-center py-0 px-0 pl-md-2'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
var Count = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\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"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.secondary;
}, (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.primary;
});
//# sourceMappingURL=index.js.map