"use strict";

exports.__esModule = true;
exports.ToolbarOverflowMenu = ToolbarOverflowMenu;
var _react = _interopRequireWildcard(require("react"));
var _designSystem = require("@wix/design-system");
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _react2 = require("@wix/bex-core/react");
var _layoutConfig = require("../TableGridSwitchButton/layoutConfig");
var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/CollectionToolbar/ToolbarOverflowMenu.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 ToolbarOverflowMenu({
  primaryItems,
  secondaryItems,
  layoutSwitchConfig
}) {
  const [shown, setShown] = (0, _react.useState)(false);
  const [activeView, setActiveView] = (0, _react.useState)('main');
  const triggerRef = (0, _react.useRef)(null);
  const focusTargetRef = (0, _react.useRef)(null);
  const {
    translate: t
  } = (0, _react2.useWixPatternsContainer)();
  const shouldFocusTriggerOnCloseRef = (0, _react.useRef)(false);
  const close = (0, _react.useCallback)(() => {
    setShown(false);
    setActiveView('main');
  }, []);
  const closeAndFocusTrigger = (0, _react.useCallback)(() => {
    shouldFocusTriggerOnCloseRef.current = true;
    close();
  }, [close]);
  (0, _react.useEffect)(() => {
    if (!shown && shouldFocusTriggerOnCloseRef.current) {
      shouldFocusTriggerOnCloseRef.current = false;
      setTimeout(() => {
        var _triggerRef$current;
        (_triggerRef$current = triggerRef.current) == null || _triggerRef$current.focus();
      });
    }
  }, [shown]);
  const hasItems = primaryItems.length > 0 || secondaryItems.length > 0 || !!layoutSwitchConfig;
  if (!hasItems) {
    return null;
  }
  return /*#__PURE__*/_react.default.createElement(_designSystem.Popover, {
    dataHook: "toolbar-overflow-menu",
    shown: shown,
    placement: "bottom",
    showArrow: true,
    flip: true,
    appendTo: "parent",
    onClickOutside: closeAndFocusTrigger,
    onEscPress: closeAndFocusTrigger,
    onTabOut: close,
    zIndex: 1101,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 100,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Popover.Element, {
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 112,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.IconButton, {
    ref: triggerRef,
    size: "small",
    skin: "inverted",
    dataHook: "toolbar-overflow-menu-trigger",
    "aria-label": t('cairo.moreActions'),
    onClick: () => {
      setShown(prev => {
        if (!prev) {
          focusTargetRef.current = 'first';
        }
        return !prev;
      });
    },
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 113,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.MoreSmall, {
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 128,
      columnNumber: 11
    }
  }))), /*#__PURE__*/_react.default.createElement(_designSystem.Popover.Content, {
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 131,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    dataHook: "toolbar-overflow-menu-content",
    direction: "vertical",
    minWidth: activeView === 'main' ? '300px' : '184px',
    paddingTop: "SP1",
    paddingBottom: "SP1",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 132,
      columnNumber: 9
    }
  }, activeView === 'main' ? /*#__PURE__*/_react.default.createElement(MainView, {
    primaryItems: primaryItems,
    secondaryItems: secondaryItems,
    layoutSwitchConfig: layoutSwitchConfig,
    onItemClick: closeAndFocusTrigger,
    onLayoutSwitchClick: () => setActiveView('layout'),
    focusTarget: focusTargetRef,
    t: t,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 140,
      columnNumber: 13
    }
  }) : /*#__PURE__*/_react.default.createElement(LayoutSwitchView, {
    config: layoutSwitchConfig,
    onBack: () => {
      focusTargetRef.current = 'layoutSwitch';
      setActiveView('main');
    },
    onSelect: closeAndFocusTrigger,
    t: t,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 150,
      columnNumber: 13
    }
  }))));
}
function MainView({
  primaryItems,
  secondaryItems,
  layoutSwitchConfig,
  onItemClick,
  onLayoutSwitchClick,
  focusTarget,
  t
}) {
  const firstItemRef = (0, _react.useRef)(null);
  const layoutSwitchRef = (0, _react.useRef)(null);
  (0, _react.useEffect)(() => {
    const target = focusTarget.current;
    focusTarget.current = null;
    if (target === 'first') {
      var _firstItemRef$current;
      (_firstItemRef$current = firstItemRef.current) == null || _firstItemRef$current.focus();
    } else if (target === 'layoutSwitch') {
      var _layoutSwitchRef$curr;
      (_layoutSwitchRef$curr = layoutSwitchRef.current) == null || _layoutSwitchRef$curr.focus();
    }
  });
  const isFirstItemPrimary = primaryItems.length > 0;
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, primaryItems.length > 0 && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    direction: "horizontal",
    gap: "SP2",
    padding: "SP2",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 202,
      columnNumber: 9
    }
  }, primaryItems.map((item, index) => /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    key: index,
    flex: 1,
    minWidth: 0,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 204,
      columnNumber: 13
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Thumbnail, {
    ref: index === 0 ? firstItemRef : undefined,
    size: "tiny",
    skin: "secondary",
    image: item.icon,
    onClick: () => {
      item.onClick();
      onItemClick();
    },
    dataHook: item.dataHook,
    title: /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
      size: "medium",
      weight: "thin",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 216,
        columnNumber: 19
      }
    }, item.text),
    width: "100%",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 205,
      columnNumber: 15
    }
  })))), layoutSwitchConfig && /*#__PURE__*/_react.default.createElement(_designSystem.ListItemAction, {
    ref: !isFirstItemPrimary ? r => {
      layoutSwitchRef.current = r;
      if (!firstItemRef.current) {
        firstItemRef.current = r;
      }
    } : layoutSwitchRef,
    size: "medium",
    dataHook: "overflow-layout-switch",
    prefixIcon: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.DataCollection, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 240,
        columnNumber: 23
      }
    }),
    title: t('cairo.table.layout.switchLayout'),
    onClick: () => {
      layoutSwitchConfig.viewTypeState.reportLayoutSwitch();
      onLayoutSwitchClick();
    },
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 227,
      columnNumber: 9
    }
  }), secondaryItems.map((item, index) => /*#__PURE__*/_react.default.createElement(_designSystem.ListItemAction, {
    key: index,
    ref: !isFirstItemPrimary && !layoutSwitchConfig && index === 0 ? firstItemRef : undefined,
    size: "medium",
    title: item.text,
    onClick: () => {
      item.onClick();
      onItemClick();
    },
    prefixIcon: item.prefixIcon,
    dataHook: item.dataHook,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 249,
      columnNumber: 9
    }
  })));
}
function LayoutSwitchView({
  config,
  onBack,
  onSelect,
  t
}) {
  const {
    viewTypeState
  } = config;
  const activeOptionRef = (0, _react.useRef)(null);
  (0, _react.useEffect)(() => {
    var _activeOptionRef$curr;
    (_activeOptionRef$curr = activeOptionRef.current) == null || _activeOptionRef$curr.focus();
  }, []);
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    padding: "SP1 SP3",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 290,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.TextButton, {
    size: "small",
    dataHook: "overflow-layout-switch-back",
    prefixIcon: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.ChevronLeft, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 294,
        columnNumber: 23
      }
    }),
    onClick: onBack,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 291,
      columnNumber: 9
    }
  }, t('cairo.import.back'))), _layoutConfig.layoutOptions.map((option, index) => {
    const isActive = viewTypeState.viewType === option;
    return /*#__PURE__*/_react.default.createElement(_designSystem.ListItemAction, {
      key: option,
      ref: isActive ? activeOptionRef : undefined,
      size: "medium",
      dataHook: `overflow-layout-option-${option}`,
      prefixIcon: _layoutConfig.layoutConfig[option].icon,
      title: t(_layoutConfig.layoutConfig[option].translationKey),
      highlighted: isActive ? true : undefined,
      onClick: () => {
        viewTypeState.reportLayoutOptionClicked(option, index);
        if (!isActive) {
          viewTypeState.changeViewType(option);
        }
        onSelect();
      },
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 303,
        columnNumber: 11
      }
    });
  }));
}
//# sourceMappingURL=ToolbarOverflowMenu.js.map