"use strict";

exports.__esModule = true;
exports.MultiBulkActionToolbar = void 0;
var _designSystem = require("@wix/design-system");
var _react = _interopRequireWildcard(require("react"));
var _mobxReactLite = require("mobx-react-lite");
var _ToolbarCollectionContext = require("../ToolbarCollectionContext");
var _MultiBulkActionToolbarStCss = require("./MultiBulkActionToolbar.st.css.js");
var _ActionControl = require("../ActionControl");
var _react2 = require("@wix/bex-core/react");
var _MultiBulkActionToolbarState = require("./MultiBulkActionToolbarState");
var _useExtensionMenuItems = require("../../hooks/useExtensionMenuItems");
var _BulkActionContainer = require("./BulkActionContainer");
var _useIsMobile = require("../../hooks/useIsMobile");
var _useBulkActionMobileGroups = require("../../hooks/useBulkActionMobileGroups");
var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/MultiBulkActionToolbar/MultiBulkActionToolbar.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 _MultiBulkActionToolbar(props) {
  var _toolbarCollectionSta;
  const {
    primaryActionItems,
    secondaryActionItems,
    secondaryActionsPopoverMenuProps,
    containerId,
    containerProps
  } = props;
  const toolbarCollectionState = (0, _ToolbarCollectionContext.useToolbarCollectionContext)();
  const extensionMenuItems = (0, _useExtensionMenuItems.useExtensionMenuItems)({
    containerId,
    containerProps
  });
  const isMobile = (0, _useIsMobile.useIsMobile)();
  const [state] = (0, _react.useState)(() => new _MultiBulkActionToolbarState.MultiBulkActionToolbarState({
    extensionMenuItems,
    collection: toolbarCollectionState.collection
  }));
  (0, _react.useEffect)(() => {
    state.setActions({
      primaryActionItems,
      secondaryActionItems
    });
  }, [primaryActionItems, secondaryActionItems]);
  const {
    collection,
    hasToolbarTabs,
    featuredComponents,
    bulk
  } = toolbarCollectionState;
  const {
    maxSelection,
    total,
    selectedCountOrTotal,
    allSelected
  } = bulk;
  const {
    value: exportButton
  } = featuredComponents.exportButton;
  const TagsAssignButton = (_toolbarCollectionSta = toolbarCollectionState.tagsCollectionState) == null ? void 0 : _toolbarCollectionSta.components.AssignButton;
  const {
    translate: t
  } = (0, _react2.useWixPatternsContainer)();
  const withBi = (item, ctaIndex) => {
    return {
      ...item,
      onClick: () => {
        toolbarCollectionState.toolbarBIReporter.ctaClicked({
          itemId: bulk.selectedIds.join(','),
          location: 'multiBulkActionToolbar',
          ctaName: item.biName ?? '',
          ctaIndex,
          componentId: item.componentId,
          appId: item.appId,
          numCtas: state.primaryActionItems.length + state.secondaryActionItemsCount
        });
        item == null || item.onClick();
      }
    };
  };
  const mobileBulkActionGroups = (0, _useBulkActionMobileGroups.useBulkActionMobileGroups)({
    primaryActionItems: state.primaryActionItems,
    secondaryActionItems: state.secondaryActionItems,
    moreActionsLabel: t('cairo.moreActions')
  });
  const mobileBulkActionGroupsWithBi = mobileBulkActionGroups == null ? void 0 : mobileBulkActionGroups.map(group => group.map((item, itemIndex) => withBi(item, itemIndex + 1)));
  const bulkActionButtonsDesktop = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    alignSelf: "stretch",
    marginLeft: "SP4",
    marginRight: "SP2",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 127,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Divider, {
    direction: "vertical",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 128,
      columnNumber: 9
    }
  })), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    gap: "SP1",
    className: (0, _MultiBulkActionToolbarStCss.st)(_MultiBulkActionToolbarStCss.classes.root),
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 131,
      columnNumber: 7
    }
  }, TagsAssignButton && /*#__PURE__*/_react.default.createElement(_BulkActionContainer.BulkActionContainer, {
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 133,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement(TagsAssignButton, {
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 134,
      columnNumber: 13
    }
  })), exportButton && /*#__PURE__*/_react.default.createElement(_BulkActionContainer.BulkActionContainer, {
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 138,
      columnNumber: 11
    }
  }, /*#__PURE__*/(0, _react.cloneElement)(exportButton, {
    toolbarType: 'bulkActionToolbar'
  })), state.primaryActionItems.filter(x => !!x).map((actionItem, index) => {
    var _actionItem$subItems;
    return /*#__PURE__*/_react.default.createElement(_BulkActionContainer.BulkActionContainer, {
      key: index,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 147,
        columnNumber: 13
      }
    }, /*#__PURE__*/_react.default.createElement(_ActionControl.ActionControl, {
      priority: "secondary",
      size: "small",
      actionItem: {
        dataHook: 'bulk-action-button',
        ...actionItem,
        subItems: actionItem == null || (_actionItem$subItems = actionItem.subItems) == null ? void 0 : _actionItem$subItems.map(subItemsGroup => subItemsGroup == null ? void 0 : subItemsGroup.map((subItem, subIndex) => ({
          ...subItem,
          onClick: () => {
            toolbarCollectionState.toolbarBIReporter.ctaClicked({
              itemId: bulk.selectedIds.join(','),
              location: 'multiBulkActionToolbar',
              ctaName: subItem.biName ?? '',
              ctaIndex: subIndex + 1,
              // Missing BI requirements https://jira.wixpress.com/browse/CAIRO-600?focusedCommentId=9989131
              moreActionsIndex: subIndex + 1,
              componentId: subItem.componentId,
              appId: subItem.appId,
              numCtas: state.primaryActionItems.length + state.secondaryActionItemsCount
            });
            subItem.onClick == null || subItem.onClick();
          }
        }))),
        onClick: () => {
          toolbarCollectionState.toolbarBIReporter.ctaClicked({
            itemId: bulk.selectedIds.join(','),
            location: 'multiBulkActionToolbar',
            ctaName: actionItem.biName ?? '',
            ctaIndex: 1,
            // Missing BI requirements https://jira.wixpress.com/browse/CAIRO-600?focusedCommentId=9989131
            moreActionsIndex: 0,
            componentId: actionItem.componentId,
            appId: actionItem.appId,
            numCtas: state.primaryActionItems.length + state.secondaryActionItemsCount
          });
          actionItem.onClick == null || actionItem.onClick();
        }
      },
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 148,
        columnNumber: 15
      }
    }));
  }), state.secondaryActionItems.filter(secondaryActionItemsGroup => secondaryActionItemsGroup.length > 0).length > 0 && /*#__PURE__*/_react.default.createElement(_BulkActionContainer.BulkActionContainer, {
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 198,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement(_ActionControl.ActionPopover, {
    priority: "secondary",
    size: "small",
    actionItem: {
      dataHook: 'more-actions',
      biName: 'more-actions',
      subItems: (() => {
        let index = 0;
        return state.secondaryActionItems.map(subItemGroup => subItemGroup.map(subItem => {
          const subItemIndex = index;
          index++;
          const _subItem = {
            ...subItem,
            onClick: () => {
              toolbarCollectionState.toolbarBIReporter.ctaClicked({
                itemId: bulk.selectedIds.join(','),
                location: 'multiBulkActionToolbar',
                ctaName: subItem.biName ?? '',
                ctaIndex: subItemIndex + 3,
                moreActionsIndex: subItemIndex + 1,
                componentId: subItem.componentId,
                appId: subItem.appId,
                numCtas: state.primaryActionItems.length + state.secondaryActionItemsCount
              });
              subItem.onClick == null || subItem.onClick();
            }
          };
          return _subItem;
        }));
      })(),
      popoverMenuProps: secondaryActionsPopoverMenuProps,
      label: t('cairo.moreActions')
    },
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 199,
      columnNumber: 13
    }
  }))));
  const bulkActionButtonsMobile = /*#__PURE__*/_react.default.createElement(_ActionControl.ActionPopover, {
    priority: "secondary",
    size: "small",
    actionItem: {
      dataHook: 'all-actions-mobile',
      biName: 'more-actions',
      subItems: mobileBulkActionGroupsWithBi,
      popoverMenuProps: {
        fixed: false,
        minWidth: 'max-content',
        ...secondaryActionsPopoverMenuProps
      },
      label: t('cairo.table.mobile.more.button')
    },
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 245,
      columnNumber: 5
    }
  });
  return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    minHeight: "60px",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 263,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.TableToolbar, {
    removeVerticalPadding: hasToolbarTabs,
    dataHook: "bulk-action-toolbar",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 264,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.TableToolbar.ItemGroup, {
    position: "start",
    className: (0, _MultiBulkActionToolbarStCss.st)(_MultiBulkActionToolbarStCss.classes.root),
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 268,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    direction: "horizontal",
    className: (0, _MultiBulkActionToolbarStCss.st)(_MultiBulkActionToolbarStCss.classes.leftGroupWrapper),
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 269,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.TableToolbar.Item, {
    className: (0, _MultiBulkActionToolbarStCss.st)(_MultiBulkActionToolbarStCss.classes.selectedCountItem),
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 270,
      columnNumber: 13
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
    ellipsis: true,
    size: "small",
    weight: "thin",
    dataHook: "selected-count",
    className: (0, _MultiBulkActionToolbarStCss.st)(_MultiBulkActionToolbarStCss.classes.selectedCountText),
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 271,
      columnNumber: 15
    }
  }, maxSelection !== undefined ? t('cairo.bulkActions.max.selection', {
    max: maxSelection,
    total: selectedCountOrTotal
  }) : collection.result.supportTotal && collection.result.totalStatus === 'success' ? t('cairo.bulkSelectedWithTotal', {
    num: selectedCountOrTotal,
    total
  }) : allSelected ? '' : t('cairo.bulkSelected', {
    num: selectedCountOrTotal
  }))), collection.result.supportTotal && /*#__PURE__*/_react.default.createElement(_designSystem.TableToolbar.Item, {
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 298,
      columnNumber: 15
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.TextButton, {
    dataHook: "select-all",
    size: "small",
    onClick: () => bulk.toggleSelectAll({
      location: 'TableToolbar CTA'
    }),
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 299,
      columnNumber: 17
    }
  }, bulk.hasClickableRows ? t('cairo.selectAll') : t('cairo.deselectAll'))), !isMobile && bulkActionButtonsDesktop)), isMobile && /*#__PURE__*/_react.default.createElement(_designSystem.TableToolbar.ItemGroup, {
    position: "end",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 318,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.TableToolbar.Item, {
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 319,
      columnNumber: 13
    }
  }, bulkActionButtonsMobile))));
}
const MultiBulkActionToolbar = exports.MultiBulkActionToolbar = (0, _mobxReactLite.observer)(_MultiBulkActionToolbar);
//# sourceMappingURL=MultiBulkActionToolbar.js.map