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

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

import React from 'react';
import { IconClose, ScrollView, Typography } from '../../../../../Common';
import styled, { css } from 'styled-components';
import { formatAsCurrency, getTermsAggregationLabel, useAllSelectedFilters, useClearAllFilters, useConfigState, useLocalLabels } from '@sentecacommerce-theme/lib';
import { FilterWrapper } from '../FilterWrapper';
export var SelectedFilters = (_ref) => {
  var {
    isInModal = false,
    data
  } = _ref;
  var clearAll = useClearAllFilters();
  var labels = useLocalLabels();
  var selectedFilters = useAllSelectedFilters(data);
  var config = useConfigState();
  var labelGettersMap = {
    terms: getTermsAggregationLabel,
    ranges: filter => {
      if (filter.data.from === '*') {
        return "\u043F\u043E\u0434 " + filter.data.to / 100 + "\u043B\u0432";
      }

      if (filter.data.to === '*') {
        return "\u043D\u0430\u0434 " + filter.data.from / 100 + "\u043B\u0432";
      }

      return filter.data.from / 100 + "\u043B\u0432 - " + filter.data.to / 100 + "\u043B\u0432";
    },
    stats: filter => {
      var from = formatAsCurrency({
        currency: 'BGN',
        // We need useInterfaceConfig, pls
        locale: config.price.locale,
        price: +filter.data.valueFrom / 100
      });
      var to = formatAsCurrency({
        currency: 'BGN',
        // We need useInterfaceConfig, pls
        locale: config.price.locale,
        price: +filter.data.valueTo / 100
      });
      return filter.data.label + ": " + from.displayValue + " - " + to.displayValue;
    }
  };
  if (!selectedFilters.length) return null;
  var Items = /*#__PURE__*/React.createElement(ScrollView, {
    maxHeight: "none",
    maxWidth: "100%",
    overflowDirection: "x"
  }, /*#__PURE__*/React.createElement(Container, null, selectedFilters.map((item, i) => {
    var _labelGettersMap;

    var label = ((_labelGettersMap = labelGettersMap[item.aggregationType || '']) == null ? void 0 : _labelGettersMap.call(labelGettersMap, item)) || null;
    return /*#__PURE__*/React.createElement(Wrapper, {
      key: "Item__" + (label || i)
    }, /*#__PURE__*/React.createElement(Text, {
      onClick: item.onClick
    }, /*#__PURE__*/React.createElement("span", null, label || 'N/A'), /*#__PURE__*/React.createElement(IconClose, {
      className: "ml-2 p-1"
    })));
  }), !isInModal && selectedFilters.length > 1 && /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Text, {
    isClearAll: true,
    onClick: clearAll
  }, /*#__PURE__*/React.createElement("span", null, labels.clearAllFilters)))));

  if (isInModal) {
    return /*#__PURE__*/React.createElement(FilterWrapper, {
      withResetAllButton: true,
      filterName: "Filtered by"
    }, Items);
  }

  return Items;
};
var Container = styled.div.attrs({
  className: 'd-flex flex-lg-wrap'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  max-width: calc(100% + 1.6rem);\n  margin-left: -0.8rem;\n  margin-bottom: -1.6rem;\n\n  @media (min-width: ", ") {\n    margin-left: -0.4rem;\n    margin-bottom: -0.8rem;\n  }\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.breakpoints.lg.min;
});
var Wrapper = styled.div.attrs({
  className: 'mb-3 px-2 px-lg-1 mb-lg-2'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  &:last-of-type {\n    padding-right: 0 !important;\n  }\n"])));
var Text = styled(Typography).attrs({
  as: 'span',
  variant: 7,
  color: 'primary',
  className: 'd-flex align-items-center px-3',
  tabIndex: 0
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  white-space: nowrap;\n  line-height: 3rem;\n  color: ", ";\n  opacity: 0.6;\n\n  & > svg {\n    width: 1.8rem;\n    opacity: 0.8;\n    background: ", ";\n    border-radius: 50%;\n    color: ", ";\n  }\n\n  &:hover {\n    opacity: 1;\n  }\n\n  ", "\n"])), (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.primary;
}, (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.palette.hint;
}, (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.palette.secondary;
}, props => !props.isClearAll ? css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n          border: 0.1rem solid ", ";\n        "])), (_ref6) => {
  var {
    theme
  } = _ref6;
  return theme.palette.primary;
}) : "\n          font-size: 1.4rem;\n      ");
//# sourceMappingURL=index.js.map