"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.CollectionToolbar = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _mobxReactLite = require("mobx-react-lite");
var _designSystem = require("@wix/design-system");
var _CollectionContext = require("../CollectionContext");
var _assertComponentType = require("../assertComponentType");
var _ToolbarItemBox = require("../ToolbarItemBox");
var _CollectionToolbarStCss = require("./CollectionToolbar.st.css.js");
var _InitialLoadingConditional = require("../InitialLoadingConditional");
var _useCollectionToolbarSyncedProps = require("./useCollectionToolbarSyncedProps");
var _useIsCollectionToolbarExists = require("./useIsCollectionToolbarExists");
var _CollectionToolbarActionsToolbarItemsGroup = require("./CollectionToolbarActionsToolbarItemsGroup");
var _CollectionToolbarActionsGroupResponsiveLayout = require("./CollectionToolbarActionsGroupResponsiveLayout");
var _MoreActions = require("../MoreActions");
var _CollectionToolbarSkeletonItem = require("./CollectionToolbarSkeletonItem");
var _useIsMobile = require("../../hooks/useIsMobile");
var _isValidElement = require("../isValidElement");
var _CollectionSearch = require("../CollectionSearch");
var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/CollectionToolbar/CollectionToolbar.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 _CollectionToolbar(props) {
  var _state$tagsCollection, _state$collectionData, _state$container$expe, _state$container$inte;
  const {
    state,
    search = true,
    title,
    tabs,
    customColumns,
    multiLevelSorting,
    views,
    dataHook,
    filters: filtersProp,
    tableGridSwitchButton,
    exportButton,
    dragAndDropReorderModeToolbar,
    primaryActionButton,
    secondaryActions,
    moreActions
  } = props;
  const isMobile = (0, _useIsMobile.useIsMobile)();
  const hasOtherToolbarFeatures = (0, _useIsCollectionToolbarExists.useIsCollectionToolbarExists)(props, {
    excludeSearch: true,
    isMobile
  });
  const searchIsExpandable = isMobile ? hasOtherToolbarFeatures : undefined;
  (0, _assertComponentType.assertComponentType)(primaryActionButton, 'PrimaryActionButton', 'PrimaryActionButton');
  const {
    collection,
    featuredComponents,
    toolbar: {
      responsive
    },
    container: {
      isPanelLayout
    }
  } = state;
  const addDataHookToMoreActions = () => {
    return /*#__PURE__*/_react.default.createElement(_MoreActions.MoreActions, (0, _extends2.default)({
      dataHook: "toolbar-more-actions"
    }, moreActions.props, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 104,
        columnNumber: 7
      }
    }));
  };
  const searchElement = isPanelLayout ? undefined : (0, _isValidElement.isValidElement)(search) ? (/*#__PURE__*/(0, _react.cloneElement)(search, {
    expandable: searchIsExpandable ?? search.props.expandable
  })) : search ? /*#__PURE__*/_react.default.createElement(_CollectionSearch.CollectionSearch, {
    size: "small",
    expandable: searchIsExpandable,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 115,
      columnNumber: 5
    }
  }) : search;
  const MoreFiltersButton = featuredComponents.moreFiltersButton.value;
  const viewsToolbarItem = isPanelLayout ? undefined : views && /*#__PURE__*/_react.default.createElement(_ToolbarItemBox.ToolbarItemBox, {
    dataHook: "collection-table-toolbar-views-item",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 126,
      columnNumber: 9
    }
  }, views);
  const CollectionToolbarFilters = ((_state$tagsCollection = state.tagsCollectionState) == null ? void 0 : _state$tagsCollection.components.CollectionToolbarFilters) || ((_state$collectionData = state.collectionDataExtension) == null ? void 0 : _state$collectionData.components.CollectionToolbarFilters);
  const filtersElement = (0, _react.useMemo)(() => {
    var _state$collectionData2, _state$tagsCollection2;
    if (!state.container.initTask.status.isSuccess) {
      return;
    }
    if (isMobile) {
      return undefined;
    }
    if (filtersProp) {
      return filtersProp;
    }
    const featureFilters = [...(((_state$collectionData2 = state.collectionDataExtension) == null ? void 0 : _state$collectionData2.buildCustomFieldFilters()) || []), (_state$tagsCollection2 = state.tagsCollectionState) == null ? void 0 : _state$tagsCollection2.buildTagsFilterWrapper()].filter(Boolean);
    return filtersProp ?? (CollectionToolbarFilters && /*#__PURE__*/_react.default.createElement(CollectionToolbarFilters, {
      inline: 0,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 155,
        columnNumber: 9
      }
    }, featureFilters));
  }, [filtersProp, isMobile, state.container.initTask.status]);
  let left;
  if (tabs) {
    left = /*#__PURE__*/_react.default.createElement(_ToolbarItemBox.ToolbarItemBox, {
      removeStartPadding: true,
      expandable: true,
      layout: "button",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 166,
        columnNumber: 7
      }
    }, tabs);
  } else if (title && !isMobile) {
    left = title;
  }
  (0, _useCollectionToolbarSyncedProps.useCollectionToolbarSyncedProps)({
    left,
    filtersElement,
    viewsToolbarItem,
    state
  });

  /* checking if something is rendered in the .left TableToolbar.ItemGroup (not empty) */
  const [rendersStart, setRendersStart] = (0, _react.useState)();
  (0, _react.useEffect)(() => {
    var _state$toolbarFilters, _state$toolbarFilters2, _state$toolbarFilters3;
    setRendersStart(!!left || !!viewsToolbarItem || ((_state$toolbarFilters = state.toolbarFiltersState) == null ? void 0 : _state$toolbarFilters.totalInlineFilters.value) !== undefined && ((_state$toolbarFilters2 = state.toolbarFiltersState) == null ? void 0 : _state$toolbarFilters2.totalInlineFilters.value) !== null && ((_state$toolbarFilters3 = state.toolbarFiltersState) == null ? void 0 : _state$toolbarFilters3.totalInlineFilters.value) > 0);
  }, [left, viewsToolbarItem, state.toolbarFiltersStateInitialized]);
  const shouldAddDivider = tableGridSwitchButton && (searchElement || MoreFiltersButton);
  const analyticsCustomColumnsDiscoverability = (_state$container$expe = state.container.experiments) == null ? void 0 : _state$container$expe.get('specs.analytics.CustomColumnsWithLabelAndNewIcon');
  const showCustomColumnsOnTheLeft = analyticsCustomColumnsDiscoverability === 'b' || analyticsCustomColumnsDiscoverability === 'c';
  const immidiatelyInteractWithToolbarsEnabled = (_state$container$inte = state.container.internalExperiments) == null ? void 0 : _state$container$inte.enabled('specs.cairo.ImmidiatelyInteractWithToolbars');
  const CollectionToolbarActionsGroup = isMobile || responsive.responsiveDisabled ? _CollectionToolbarActionsToolbarItemsGroup.CollectionToolbarActionsToolbarItemsGroup : _CollectionToolbarActionsGroupResponsiveLayout.CollectionToolbarActionsGroupResponsiveLayout;
  const toolbarElement = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_designSystem.TableToolbar.ItemGroup, {
    position: "start",
    className: (0, _CollectionToolbarStCss.st)(_CollectionToolbarStCss.classes.left, {
      expandable: !!tabs
    }),
    dataHook: "collection-table-toolbar-filters",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 218,
      columnNumber: 7
    }
  }, left ?? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, viewsToolbarItem && /*#__PURE__*/_react.default.createElement(_InitialLoadingConditional.InitialLoadingConditional, {
    state: state,
    loadingElement: /*#__PURE__*/_react.default.createElement(_CollectionToolbarSkeletonItem.CollectionToolbarSkeletonItem, {
      dataHook: "toolbar-views-skeleton",
      width: "100px",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 229,
        columnNumber: 19
      }
    }),
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 226,
      columnNumber: 15
    }
  }, viewsToolbarItem), !viewsToolbarItem ? filtersElement : undefined)), /*#__PURE__*/_react.default.createElement(_designSystem.TableToolbar.ItemGroup, {
    position: isMobile ? undefined : 'end',
    className: (0, _CollectionToolbarStCss.st)(_CollectionToolbarStCss.classes.right, {}, ...[rendersStart ? undefined : _CollectionToolbarStCss.classes.fullWidth]),
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 243,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(CollectionToolbarActionsGroup, {
    state: state,
    viewsToolbarItem: viewsToolbarItem,
    filtersElement: filtersElement,
    MoreFiltersButton: MoreFiltersButton,
    multiLevelSorting: multiLevelSorting,
    customColumns: isMobile || isPanelLayout ? undefined : customColumns,
    exportButton: exportButton,
    search: searchElement,
    showCustomColumnsOnTheLeft: showCustomColumnsOnTheLeft,
    left: left,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 251,
      columnNumber: 9
    }
  }), primaryActionButton && /*#__PURE__*/_react.default.createElement(_designSystem.TableToolbar.Item, {
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 265,
      columnNumber: 11
    }
  }, primaryActionButton), moreActions && /*#__PURE__*/_react.default.createElement(_designSystem.TableToolbar.Item, {
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 268,
      columnNumber: 11
    }
  }, addDataHookToMoreActions()), secondaryActions && /*#__PURE__*/_react.default.createElement(_designSystem.TableToolbar.Item, {
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 271,
      columnNumber: 11
    }
  }, secondaryActions), shouldAddDivider && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    alignSelf: "stretch",
    paddingLeft: "SP2",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 274,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Divider, {
    direction: "vertical",
    dataHook: "collection-table--grid-switch--divider",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 275,
      columnNumber: 13
    }
  })), tableGridSwitchButton && /*#__PURE__*/_react.default.createElement(_designSystem.TableToolbar.Item, {
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 282,
      columnNumber: 11
    }
  }, tableGridSwitchButton)));
  const toolbarWithSkeleton = /*#__PURE__*/_react.default.createElement(_InitialLoadingConditional.InitialLoadingConditional, {
    state: state,
    loadingElement: /*#__PURE__*/_react.default.createElement(_CollectionToolbarSkeletonItem.CollectionToolbarSkeletonItem, {
      dataHook: "toolbar-skeleton",
      width: "100px",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 292,
        columnNumber: 9
      }
    }),
    hideLoadingElement: immidiatelyInteractWithToolbarsEnabled,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 289,
      columnNumber: 5
    }
  }, toolbarElement);
  return /*#__PURE__*/_react.default.createElement(_CollectionContext.CollectionProvider, {
    value: collection,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 304,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    direction: "vertical",
    dataHook: dataHook,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 305,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    minHeight: isPanelLayout ? '48px' : title != null && title.props.subtitle ? '78px' : '60px',
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 306,
      columnNumber: 9
    }
  }, state.isReorderModeToolbarVisible ? dragAndDropReorderModeToolbar : /*#__PURE__*/_react.default.createElement(_designSystem.TableToolbar, {
    removeVerticalPadding: true,
    className: (0, _CollectionToolbarStCss.st)(_CollectionToolbarStCss.classes.root, {
      views: !responsive.responsiveDisabled,
      mobile: isMobile
    }),
    dataHook: "collection-table-toolbar",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 314,
      columnNumber: 13
    }
  }, toolbarWithSkeleton))));
}
const CollectionToolbar = exports.CollectionToolbar = (0, _mobxReactLite.observer)(_CollectionToolbar);
//# sourceMappingURL=CollectionToolbar.js.map