"use strict";

exports.__esModule = true;
exports.CollectionToolbarFilters = void 0;
var _react = _interopRequireWildcard(require("react"));
var _useFiltersLayout = require("./useFiltersLayout");
var _ToolbarCollectionContext = require("../ToolbarCollectionContext");
var _AppliedFiltersTagList = require("../AppliedFiltersTagList");
var _mobxReactLite = require("mobx-react-lite");
var _ToolbarItemBox = require("../ToolbarItemBox");
var _AppliedFiltersTagListState = require("../AppliedFiltersTagList/AppliedFiltersTagListState");
var _CollectionToolbarFiltersState = require("./CollectionToolbarFiltersState");
var _CollectionFilter = require("../CollectionFilter");
var _FiltersPanelSidePanelEntry = require("./FiltersPanelSidePanelEntry");
var _MoreFiltersCTA = require("../MoreFiltersCTA");
var _react2 = require("@wix/bex-core/react");
var _useFiltersSyncProps = require("./useFiltersSyncProps");
var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/CollectionToolbarFilters/CollectionToolbarFilters.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); }
function _CollectionToolbarFilters(props) {
  const {
    children,
    inline = 2,
    maxInlineFilters,
    maxInlineLabels,
    panelTitle,
    onPanelClearButtonClicked,
    onSearchAppliedFilterTagRemove,
    onSubToolbarClearButtonClicked,
    hideAppliedFiltersTagList,
    useNewFilters
  } = props;
  const childrenArr = (0, _useFiltersSyncProps.useFiltersSyncProps)(children);
  const state = (0, _ToolbarCollectionContext.useToolbarCollectionContext)();
  const [toolbarFiltersState] = (0, _react.useState)(() => {
    state.toolbarFiltersState ?? (state.toolbarFiltersState = new _CollectionToolbarFiltersState.CollectionToolbarFiltersState({
      toolbar: state
    }));
    state.setToolbarFiltersStateInitialized(true);
    return state.toolbarFiltersState;
  });
  (0, _react.useEffect)(() => {
    state.panels.registerSidePanel('filters', _FiltersPanelSidePanelEntry.FiltersPanelSidePanelEntry);
  }, []);
  (0, _react.useEffect)(() => {
    toolbarFiltersState.onClearButtonClicked = onPanelClearButtonClicked;
  }, [onPanelClearButtonClicked]);
  const forceShowSidePanel = (0, _react.useMemo)(() => !!childrenArr.slice(0, inline).find(filter => {
    return filter.type.displayName && ['DateRangeFilter', 'MultiSelectCollectionFilter', 'RadioGroupFilter', 'MultiInlineCheckboxFilter'].includes(filter.type.displayName);
  }), [childrenArr]);
  const {
    viewsProps,
    collection
  } = state;
  const customInlineElements = viewsProps ? 1 : 0;
  const {
    showFiltersPanelButton,
    totalInlineFilters,
    showLabels
  } = (0, _useFiltersLayout.useFiltersLayout)({
    useNewFilters,
    filters: childrenArr.length,
    totalFilters: childrenArr.length + customInlineElements,
    inline,
    maxInlineFilters,
    maxInlineLabels,
    customInlineElements,
    forceShowSidePanel
  });
  (0, _react.useEffect)(() => {
    toolbarFiltersState.panelTitle.set(panelTitle);
  }, [panelTitle]);
  (0, _react.useEffect)(() => {
    toolbarFiltersState.totalInlineFilters.set(totalInlineFilters);
  }, [totalInlineFilters]);
  (0, _react.useEffect)(() => {
    toolbarFiltersState.filterElements.set(childrenArr);
  }, [childrenArr]);
  const container = (0, _react2.useWixPatternsContainer)();
  const {
    filters
  } = collection;
  const filtersProps = (0, _react.useMemo)(() => {
    // share essential filter props globally
    return [...childrenArr.map(({
      props: filterChildProps,
      type
    }) => {
      const {
        filter,
        onAppliedFilterTagRemove,
        renderToolbarTag,
        toolbarTagProps,
        accordionItemProps
      } = filterChildProps;
      return {
        filter,
        onAppliedFilterTagRemove,
        toolbarTagProps,
        accordionItemProps,
        renderToolbarTag: renderToolbarTag ?? (type.renderPresetToolbarTag == null ? void 0 : type.renderPresetToolbarTag(container, {
          filterProps: filterChildProps
        }))
      };
    }), {
      filter: filters.search,
      onAppliedFilterTagRemove: onSearchAppliedFilterTagRemove
    }];
  }, childrenArr.map(({
    props: {
      filter
    }
  }) => filter));
  (0, _react.useEffect)(() => {
    state.setFilterTagsPropsIfChanged(filtersProps);
    return () => {
      state.setFilterTagsPropsIfChanged(null);
    };
  }, [filtersProps]);
  (0, _react.useEffect)(() => {
    if (showFiltersPanelButton) {
      state.featuredComponents.moreFiltersButton.set(() => /*#__PURE__*/_react.default.createElement(_MoreFiltersCTA.MoreFiltersCTA, {
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 178,
          columnNumber: 60
        }
      }));
      return () => {
        state.featuredComponents.moreFiltersButton.set(null);
      };
    }
    state.featuredComponents.moreFiltersButton.set(null);
    return;
  }, [showFiltersPanelButton]);
  const [tagListState] = (0, _react.useState)(() => new _AppliedFiltersTagListState.AppliedFiltersTagListState({
    table: state
  }));
  (0, _react.useEffect)(() => {
    const disposers = [tagListState.init()];
    if (hideAppliedFiltersTagList) {
      state.featuredComponents.appliedFiltersTagList.set(null);
    } else {
      state.featuredComponents.appliedFiltersTagList.set({
        state: tagListState,
        component: () => /*#__PURE__*/_react.default.createElement(_AppliedFiltersTagList.AppliedFiltersTagList, {
          state: tagListState,
          onClearButtonClicked: onSubToolbarClearButtonClicked,
          __self: this,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 206,
            columnNumber: 11
          }
        })
      });
    }
    return () => {
      disposers.forEach(d => d());
      state.featuredComponents.appliedFiltersTagList.set(null);
    };
  }, [hideAppliedFiltersTagList]);
  return (
    /*#__PURE__*/
    // workaround to support bad enzyme version not detecting this as a valid fragment component
    // https://wix.slack.com/archives/C02K83200PL/p1671962461443749
    _react.default.createElement(_react.Fragment, {
      key: "toolbar-items",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 223,
        columnNumber: 5
      }
    }, childrenArr.slice(0, totalInlineFilters).map((element, index) => {
      var _filterProps$toolbarI;
      const {
        props: filterProps
      } = element;
      return /*#__PURE__*/_react.default.createElement(_ToolbarItemBox.ToolbarItemBox, {
        key: index,
        layout: filterProps.layout,
        dataHook: `toolbar-item-filter-${index}`,
        label: showLabels && ((_filterProps$toolbarI = filterProps.toolbarItemProps) == null ? void 0 : _filterProps$toolbarI.label),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 228,
          columnNumber: 11
        }
      }, filterProps.filter ? /*#__PURE__*/_react.default.createElement(_CollectionFilter.CollectionFilter, {
        filter: filterProps.filter,
        state: toolbarFiltersState,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 235,
          columnNumber: 15
        }
      }, element) : element);
    }))
  );
}
const CollectionToolbarFilters = exports.CollectionToolbarFilters = (0, _mobxReactLite.observer)(_CollectionToolbarFilters);
//# sourceMappingURL=CollectionToolbarFilters.js.map