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

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

import React, { useState } from 'react';
import styled from 'styled-components';
import { IconAnimatedArrow } from '../../../../../Common';
import { useClearAllFilters, useLocalLabels } from '@sentecacommerce-theme/lib';
export var FilterWrapper = (_ref) => {
  var {
    children,
    filterName,
    count,
    onMobileArrowClick,
    withMobileArrow,
    mobileIconDirection = 'right',
    withResetAllButton
  } = _ref;
  var clearAll = useClearAllFilters();
  var labels = useLocalLabels();
  var [value, setValue] = useState(0);
  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Header, {
    withMobileArrow: withMobileArrow,
    onClick: withMobileArrow ? onMobileArrowClick : undefined
  }, /*#__PURE__*/React.createElement(FilterName, null, /*#__PURE__*/React.createElement("span", null, filterName), " ", Boolean(count) && /*#__PURE__*/React.createElement(Count, null, count)), withMobileArrow && /*#__PURE__*/React.createElement(MobileModalArrow, null, /*#__PURE__*/React.createElement(IconAnimatedArrow, {
    direction: mobileIconDirection
  })), withResetAllButton && /*#__PURE__*/React.createElement(ClearAllButton, {
    onClick: clearAll
  }, labels.resetAll)), /*#__PURE__*/React.createElement(ChildrenWrapper, null, children));
};
var Header = styled.div.attrs(props => ({
  className: "d-flex align-items-center justify-content-between " + (props.withMobileArrow ? 'mb-0 mb-md-2' : 'mb-2')
}))(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 0 3rem;\n\n  @media (min-width: ", ") {\n    pointer-events: ", ";\n  }\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.breakpoints.md.min;
}, props => props.withMobileArrow ? 'none' : 'all');
var ClearAllButton = styled.span.attrs({
  className: 'd-block ml-auto',
  tabIndex: 0
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  color: ", ";\n"])), (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.hint;
});
var ChildrenWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  border-bottom: 0.1rem solid ", ";\n  padding: 0 3rem 3rem;\n"])), (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.palette.light;
});
var Container = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  border-bottom: 0.8rem solid #f5f5f5;\n  padding-top: 3rem;\n  background-color: ", ";\n"])), (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.palette.secondary;
});
var MobileModalArrow = styled.div.attrs({
  className: 'd-md-none px-2'
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose([""])));
var Count = styled.span.attrs({
  className: 'd-flex align-items-center justify-content-center ml-2'
})(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  width: 2.6rem;\n  height: 2rem;\n  font-size: 1.1rem;\n  color: ", ";\n  background-color: ", ";\n  border-radius: 4rem;\n"])), (_ref6) => {
  var {
    theme
  } = _ref6;
  return theme.palette.secondary;
}, (_ref7) => {
  var {
    theme
  } = _ref7;
  return theme.palette.primary;
});
var FilterName = styled.div.attrs({
  className: 'd-flex align-items-center justify-content-center'
})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  font-size: 1.6rem;\n  font-weight: bold;\n  text-transform: uppercase;\n"])));
//# sourceMappingURL=index.js.map