"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.SidebarNext = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
var _ToggleButton = require("./components/ToggleButton");
var _SidebarNextContext = require("./SidebarNextContext");
var _SidebarNextSt = require("./SidebarNext.st.css.js");
var _constants = require("./constants");
var _SidebarSkeleton = _interopRequireDefault(require("./components/SidebarSkeleton"));
var _utils = require("./utils");
var _useMemoizedIdentity = require("./hooks/useMemoizedIdentity");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/SidebarNext/SidebarNextNext.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(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 (var _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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var DEFAULT_SKIN = _constants.sidebarSkins.dark;
var DEFAULT_WIDTH = 228;
var MINIMIZED_WIDTH = 54;
var SidebarNext = exports.SidebarNext = /*#__PURE__*/(0, _react.memo)(_ref => {
  var {
    skin = DEFAULT_SKIN,
    width: orgWidth = DEFAULT_WIDTH,
    isLoading = true,
    dataHook,
    className,
    ariaLabel,
    selectedKey,
    header,
    footer,
    hidden = false,
    minimized = false,
    enableMinimizeToggle,
    minimizeToggleTooltip,
    onMinimizeToggleClick,
    zIndex,
    next,
    children
  } = _ref;
  var [width, setWidth] = (0, _react.useState)(minimized ? MINIMIZED_WIDTH : orgWidth);
  var [contentWidth, setContentWidth] = (0, _react.useState)(minimized ? MINIMIZED_WIDTH : orgWidth);
  var scrollAreaRef = (0, _react.useRef)(null);
  var structure = (0, _useMemoizedIdentity.useMemoizedIdentity)((0, _utils.extractItemNodes)(children));
  var widthForCalc = typeof width === 'number' ? "".concat(width, "px") : width;
  var hiddenMarginLeft = "calc(-1 * ".concat(widthForCalc, ")");
  var {
    selectedPath,
    expandTrigger,
    isExpanded,
    setExpanded
  } = useSidebarSelectionState(selectedKey, structure);
  var maxDepth = (0, _react.useMemo)(() => (0, _utils.getMaxDepth)(structure.items), [structure.items]);

  // Sidebar with maximum depth of 1 or 2 is styled differently (legacy mode)
  var legacy = maxDepth < 3 && !next;
  (0, _react.useEffect)(() => {
    var timer;
    if (minimized) {
      setWidth(MINIMIZED_WIDTH);
      timer = setTimeout(() => {
        setContentWidth(MINIMIZED_WIDTH);
      }, 500);
    } else {
      setWidth(orgWidth);
      setContentWidth(orgWidth);
    }
    return () => {
      if (timer) clearTimeout(timer);
    };
  }, [minimized, orgWidth]);
  var sidebarContextValue = (0, _useMemoizedIdentity.useMemoizedIdentity)({
    skin,
    legacy,
    hidden,
    minimized,
    inert: false,
    level: 1,
    parent: 'sidebar',
    scrollAreaRef,
    selectedPath,
    expandTrigger,
    isExpanded,
    setExpanded
  });
  return /*#__PURE__*/_react.default.createElement(_SidebarNextContext.SidebarNextContext.Provider, {
    value: sidebarContextValue,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 167,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _SidebarNextSt.st)(_SidebarNextSt.classes.root, {
      hidden
    }, className),
    style: _objectSpread({
      width,
      zIndex
    }, hidden ? {
      marginLeft: hiddenMarginLeft
    } : {}),
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 168,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement("section", {
    className: (0, _SidebarNextSt.st)(_SidebarNextSt.classes.section, {
      skin,
      hidden
    }),
    "aria-label": "Sidebar" // FIXME: translations?
    ,
    "data-hook": dataHook,
    "data-skin": skin,
    "data-hidden": hidden,
    "data-selected": selectedKey,
    "data-width": width,
    "data-minimized": minimized,
    "data-selected-key": selectedKey,
    "data-is-selected-expanded": isExpanded(selectedKey),
    "data-margin-left": hiddenMarginLeft,
    "data-next": next,
    style: {
      width
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 176,
      columnNumber: 11
    }
  }, enableMinimizeToggle && /*#__PURE__*/_react.default.createElement(_ToggleButton.ToggleButton, {
    minimized: minimized,
    minimizeToggleTooltip: minimizeToggleTooltip,
    onMinimizeToggleClick: onMinimizeToggleClick,
    skin: skin,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 192,
      columnNumber: 15
    }
  }), /*#__PURE__*/_react.default.createElement("header", {
    "data-hook": _constants.dataHooks.header,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 199,
      columnNumber: 13
    }
  }, header), /*#__PURE__*/_react.default.createElement("div", {
    className: _SidebarNextSt.classes.content,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 200,
      columnNumber: 13
    }
  }, /*#__PURE__*/_react.default.createElement("nav", {
    ref: scrollAreaRef,
    "data-hook": _constants.dataHooks.scrollArea,
    className: (0, _SidebarNextSt.st)(_SidebarNextSt.classes.scrollArea, {
      skin
    }),
    "aria-label": ariaLabel,
    style: {
      width: contentWidth
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 201,
      columnNumber: 15
    }
  }, isLoading ? /*#__PURE__*/_react.default.createElement("div", {
    style: {
      overflow: 'hidden'
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 209,
      columnNumber: 19
    }
  }, /*#__PURE__*/_react.default.createElement(_SidebarSkeleton.default, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 210,
      columnNumber: 21
    }
  })) : /*#__PURE__*/_react.default.createElement("ul", {
    className: _SidebarNextSt.classes.listItems,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 213,
      columnNumber: 19
    }
  }, children))), /*#__PURE__*/_react.default.createElement("footer", {
    "data-hook": _constants.dataHooks.footer,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 217,
      columnNumber: 13
    }
  }, footer))));
});
SidebarNext.displayName = 'SidebarNext';
var useSidebarSelectionState = (selectedKey, structure) => {
  var selectedItemPath = (0, _utils.getItemPath)(structure.keyToParentKey, selectedKey);
  var selectedMenuPath = (0, _utils.getMenuPath)(structure.keyToParentKey, selectedKey);
  var [expandedState, setExpandedState] = (0, _react.useState)(() => ({
    expandedPath: selectedMenuPath,
    userCollapsedKeys: {},
    trigger: 'select'
  }));
  var isExpanded = (0, _react.useCallback)(itemKey => {
    if (itemKey === undefined) {
      return false;
    }
    var withinExpandedPath = expandedState.expandedPath.includes(itemKey);
    var collapsedByUser = expandedState.userCollapsedKeys[itemKey];
    return withinExpandedPath && !collapsedByUser;
  }, [expandedState.expandedPath, expandedState.userCollapsedKeys]);

  // We only allow toggling menus that are within the selected path. Menus
  // outside of the selected path can only be expanded by changing `selectedKey`
  // prop. This replicates previous two-level sidebar behavior.
  var setExpanded = (0, _react.useCallback)((itemKey, expanded) => {
    setExpandedState(prev => {
      if (!prev.expandedPath.includes(itemKey)) {
        return prev;
      }
      return _objectSpread(_objectSpread({}, prev), {}, {
        userCollapsedKeys: _objectSpread(_objectSpread({}, prev.userCollapsedKeys), {}, {
          [itemKey]: !expanded
        }),
        trigger: 'click'
      });
    });
  }, []);

  // Handle `selectedKey` change
  (0, _react.useEffect)(() => {
    if (!(0, _isEqual.default)(expandedState.expandedPath, selectedMenuPath)) {
      setExpandedState(prev => ({
        expandedPath: selectedMenuPath,
        userCollapsedKeys: (0, _utils.pick)(prev.userCollapsedKeys, selectedMenuPath),
        trigger: 'select'
      }));
    }
  }, [expandedState.expandedPath, selectedMenuPath]);
  return {
    selectedPath: selectedItemPath,
    expandTrigger: expandedState.trigger,
    isExpanded,
    setExpanded
  };
};
SidebarNext.displayName = 'SidebarNext';

// FIXME: prop types on memoized component

// SidebarNext.propTypes = {
//   /** The dataHook of the Sidebar */
//   dataHook: PropTypes.string,

//   /** The classes of the Sidebar */
//   className: PropTypes.string,

//   /**  Sidebar menu children */
//   children: PropTypes.node,

//   /** Sets the skin of the Sidebar */
//   skin: PropTypes.oneOf(['dark', 'light', 'neutral']),

//   /**  Renders header element */
//   header: PropTypes.node,

//   /**  Renders footer element */
//   footer: PropTypes.node,

//   /**  Controls if the sidebar is shown or hidden, using an animation to switch between the two */
//   hidden: PropTypes.bool,

//   /**  The selected item key */
//   selectedKey: PropTypes.string,

//   /**  Control whether the sidebar displays a loading animation, true by default */
//   isLoading: PropTypes.bool,

//   /** Define a string that labels the current element in case where a text label is not visible on the screen */
//   ariaLabel: PropTypes.string,

//   /**  Defines the width */
//   width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

//   /**  Enables minimized mode */
//   minimized: PropTypes.bool,

//   /**  Enables toggle button */
//   enableMinimizeToggle: PropTypes.bool,

//   /**  Defines the tooltip content of minimization toggle. */
//   minimizeToggleTooltip: PropTypes.string,

//   /**  Defines a callback function which is called every time a minimize toggle button is clicked. */
//   onMinimizeToggleClick: PropTypes.func,
// };
//# sourceMappingURL=SidebarNextNext.js.map