"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.FiltersPanel = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _designSystem = require("@wix/design-system");
var _react = _interopRequireWildcard(require("react"));
var _mobxReactLite = require("mobx-react-lite");
var _useBuildAccordionItems = require("../../hooks/useBuildAccordionItems");
var _FiltersPanelFooter = require("./FiltersPanelFooter");
var _FilterRenderingContext = require("../FilterRenderingContext");
var _FiltersPanelState = require("./FiltersPanelState");
var _FiltersPanelSearch = require("./FiltersPanelSearch");
var _FiltersPanelSearchNoResults = require("./FiltersPanelSearchNoResults");
var _react2 = require("@wix/bex-core/react");
var _useRafRender = require("../../hooks/useRafRender");
var _PatternsSidePanel = require("../SidePanel/PatternsSidePanel");
var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/FiltersPanel/FiltersPanel.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const FILTER_SEARCH_THRESHOLD = 7;
function _FiltersPanel(props) {
  const {
    state,
    children,
    ...rest
  } = props;
  const {
    toolbar,
    totalInlineFilters: {
      value: totalInlineFilters
    }
  } = state;
  const entered = (0, _useRafRender.useRafRender)();
  const {
    translate: t
  } = (0, _react2.useWixPatternsContainer)();
  const [filtersPanelState] = (0, _react.useState)(() => new _FiltersPanelState.FiltersPanelState({
    toolbar
  }));
  const showSearch = state.panelFilterElements.length > FILTER_SEARCH_THRESHOLD;
  const accordionItems = (0, _useBuildAccordionItems.useBuildAccordionItems)(state, showSearch ? filtersPanelState.searchValue : '');
  const hasActiveSearch = showSearch && filtersPanelState.searchValue.trim().length > 0;
  const noResults = hasActiveSearch && accordionItems.length === 0;
  const [filterRenderingContext] = (0, _react.useState)(() => ({
    location: 'panel'
  }));
  const [wsrDefaults] = (0, _react.useState)(() => ({
    input: {
      size: 'small'
    },
    button: {
      size: 'small'
    }
  }));
  if (!entered) {
    return null;
  }
  let child = /*#__PURE__*/_react.default.createElement(_PatternsSidePanel.PatternsSidePanel, (0, _extends2.default)({
    dataHook: "filters-side-panel",
    onClose: filtersPanelState.onCloseButtonClick,
    width: "100%",
    closeButtonProps: {
      ariaLabel: t('cairo.filtersPanel.header.closeButton.ariaLabel')
    }
  }, rest, {
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 79,
      columnNumber: 5
    }
  }), /*#__PURE__*/_react.default.createElement(_designSystem.SidePanel.Header, {
    title: state.panelTitle.value ?? (totalInlineFilters != null ? t('cairo.filtersPanel.header', {
      num: totalInlineFilters
    }) : undefined),
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 88,
      columnNumber: 7
    }
  }, showSearch && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    padding: "0 SP2 SP2 SP2",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 99,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement(_FiltersPanelSearch.FiltersPanelSearch, {
    state: filtersPanelState,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 100,
      columnNumber: 13
    }
  }))), /*#__PURE__*/_react.default.createElement("div", {
    "data-hook": "filters-panel-scroll-container",
    style: {
      overflowY: 'auto'
    },
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 105,
      columnNumber: 7
    }
  }, noResults ? /*#__PURE__*/_react.default.createElement(_FiltersPanelSearchNoResults.FiltersPanelSearchNoResults, {
    state: filtersPanelState,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 110,
      columnNumber: 11
    }
  }) : /*#__PURE__*/_react.default.createElement(_designSystem.Accordion, {
    dataHook: "filters-panel-accordion",
    skin: "light",
    hideShadow: true,
    multiple: true,
    items: accordionItems,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 112,
      columnNumber: 11
    }
  })), /*#__PURE__*/_react.default.createElement(_designSystem.SidePanel.Footer, {
    noPadding: true,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 121,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(_FiltersPanelFooter.FiltersPanelFooter, {
    state: toolbar,
    onClearButtonClicked: state.onClearButtonClicked,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 122,
      columnNumber: 9
    }
  })), children);
  child = /*#__PURE__*/_react.default.createElement(_FilterRenderingContext.FilterRenderingContextProvider, {
    value: filterRenderingContext,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 132,
      columnNumber: 5
    }
  }, child);
  child = /*#__PURE__*/_react.default.createElement(_designSystem.WixStyleReactDefaultsOverrideProvider, {
    value: wsrDefaults,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 138,
      columnNumber: 5
    }
  }, child);
  return child;
}
const FiltersPanel = exports.FiltersPanel = (0, _mobxReactLite.observer)(_FiltersPanel);
//# sourceMappingURL=FiltersPanel.js.map