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

var _templateObject;

import React from 'react';
import styled from 'styled-components';
import { useListingConfig, useLocalLabels } from '@sentecacommerce-theme/lib';
import { Loader, AnimatedModal, Button } from '../../../Common';
import { Aggregates } from '../Aggregates';
import { MobileSort } from './Components';
import { ButtonsContainer } from '../Aggregates/Components';
export var FiltersModal = (_ref) => {
  var {
    data,
    onClose,
    isLoading,
    isFetching,
    totalResults,
    filtersCount,
    clearFilters
  } = _ref;
  var labels = useLocalLabels();
  var {
    defaultSortKey,
    sortOptions
  } = useListingConfig();
  return /*#__PURE__*/React.createElement(AnimatedModal, {
    isRoot: true,
    title: "Filters",
    onClose: onClose,
    isContentDisabled: isFetching,
    bottom: filtersCount ? (_ref2) => {
      var {
        closeModal
      } = _ref2;
      return /*#__PURE__*/React.createElement(ButtonsContainer, {
        noClear: true
      }, /*#__PURE__*/React.createElement(Button, {
        onClick: closeModal,
        fullWidth: true
      }, /*#__PURE__*/React.createElement("span", null, labels.showResults.replace(':results:', (totalResults == null ? void 0 : totalResults.toString()) || '0'))));
    } : undefined
  }, /*#__PURE__*/React.createElement(MobileSort, {
    sortOptions: sortOptions,
    defaultSortKey: defaultSortKey
  }), !data || isLoading ? /*#__PURE__*/React.createElement(LoaderContainer, null, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement(Aggregates, {
    data: data
  }));
};
var LoaderContainer = styled.div.attrs({
  className: 'd-flex align-items-center justify-content-center'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 100%;\n"])));
//# sourceMappingURL=index.js.map