'use strict';

var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var React = require('react');
var classnames = require('classnames');
var neetoCist = require('@bigbinary/neeto-cist');
var useLocalStorage = require('@bigbinary/neeto-commons-frontend/react-utils/useLocalStorage');
var utils = require('@bigbinary/neeto-commons-frontend/utils');
var Button = require('@bigbinary/neetoui/Button');
var Typography = require('@bigbinary/neetoui/Typography');
var ramda = require('ramda');
var reactI18next = require('react-i18next');
var reactRouterDom = require('react-router-dom');
var Chevron = require('./Chevron-brQURuT5.js');
var initializers = require('@bigbinary/neeto-commons-frontend/initializers');
var Neeto = require('@bigbinary/neeto-icons/typeface-logos/Neeto');
var AppIcons = require('@bigbinary/neeto-icons/typeface-logos');
var jsxRuntime = require('react/jsx-runtime');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
var Right = require('@bigbinary/neeto-icons/Right');
var Tag = require('@bigbinary/neetoui/Tag');
var Plus = require('@bigbinary/neeto-icons/Plus');
var Dropdown = require('@bigbinary/neetoui/Dropdown');
var MenuHorizontal = require('@bigbinary/neeto-icons/MenuHorizontal');
var useKeyboardShortcutsPaneState = require('./useKeyboardShortcutsPaneState-YnXpWOcs.js');
require('@bigbinary/neeto-commons-frontend/react-utils');
require('@bigbinary/neeto-commons-frontend/utils/general');
require('@bigbinary/neeto-icons/Home');
require('@bigbinary/neeto-filters-frontend/Segments');
require('@bigbinary/neeto-commons-frontend/react-utils/useRegisterNavigationCheckpoint');
require('./inject-css-B6qYtOJe.js');
require('zustand/shallow');
require('@bigbinary/neeto-commons-frontend/react-utils/withImmutableActions');
require('zustand');

function _interopNamespaceDefault(e) {
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n.default = e;
  return Object.freeze(n);
}

var AppIcons__namespace = /*#__PURE__*/_interopNamespaceDefault(AppIcons);

var Header = function Header(_ref) {
  var _ProductTypefaceLogos;
  var customLogo = _ref.customLogo,
    clearSettingsNav = _ref.clearSettingsNav;
  var productName = initializers.globalProps.appName.substr(5);
  var normalizedName = (productName || "").trim().toLowerCase();
  var specialCase = Chevron.SPECIAL_APP_NAMES[normalizedName];
  var logoName = specialCase ? "Neeto".concat(specialCase) : "Neeto".concat(neetoCist.capitalize(normalizedName));
  var ProductTypefaceLogo = (_ProductTypefaceLogos = AppIcons__namespace[logoName]) !== null && _ProductTypefaceLogos !== void 0 ? _ProductTypefaceLogos : Neeto;
  var LogoComponent = customLogo !== null && customLogo !== void 0 ? customLogo : ProductTypefaceLogo;
  var isOnboarded = initializers.globalProps.user.isOnboarded !== false;
  return /*#__PURE__*/jsxRuntime.jsx("div", {
    className: "neeto-molecules-sidebar__header neeto-molecules-sidebar__no-shrinkable",
    "data-testid": "sidebar-info",
    children: /*#__PURE__*/jsxRuntime.jsx(reactRouterDom.Link, {
      to: Chevron.DEFAULT_HOME_PATH,
      className: classnames("neeto-molecules-sidebar__logo neeto-ui-w-full", {
        "cursor-pointer": isOnboarded
      }, {
        "pointer-events-none": !isOnboarded
      }),
      onClick: clearSettingsNav,
      children: /*#__PURE__*/jsxRuntime.jsx(LogoComponent, {
        className: classnames({
          "neeto-molecules-sidebar__logo": !customLogo
        })
      })
    })
  });
};
var Header$1 = /*#__PURE__*/React.memo(Header);

var AddDropdown = function AddDropdown(_ref) {
  var addActions = _ref.addActions;
  return /*#__PURE__*/jsxRuntime.jsx(Dropdown, {
    closeOnSelect: true,
    position: "bottom-end",
    customTarget: function customTarget() {
      return /*#__PURE__*/jsxRuntime.jsx("span", {
        className: "neeto-molecules-sidebar__link-icon neeto-molecules-sidebar__link-icon--caret",
        "data-testid": "add-dropdown-trigger",
        onClick: function onClick(e) {
          e.preventDefault();
          e.stopPropagation();
        },
        children: /*#__PURE__*/jsxRuntime.jsx(Plus, {
          size: 16
        })
      });
    },
    children: /*#__PURE__*/jsxRuntime.jsx(Dropdown.Menu, {
      children: addActions.map(function (action) {
        return /*#__PURE__*/jsxRuntime.jsx(Dropdown.MenuItem.Button, {
          onClick: function onClick(e) {
            var _action$onClick;
            e.preventDefault();
            (_action$onClick = action.onClick) === null || _action$onClick === void 0 || _action$onClick.call(action, e);
          },
          children: action.label
        }, action.key);
      })
    })
  });
};

function ownKeys$3(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$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var PinIcon = function PinIcon(_ref) {
  var size = _ref.size,
    otherProps = _ref.otherProps;
  return /*#__PURE__*/jsxRuntime.jsx("svg", _objectSpread$3(_objectSpread$3({
    fill: "currentColor",
    height: size,
    viewBox: "0 -960 960 960",
    width: size,
    xmlns: "http://www.w3.org/2000/svg"
  }, otherProps), {}, {
    children: /*#__PURE__*/jsxRuntime.jsx("path", {
      d: "m640-480 80 80v80H520v240l-40 40-40-40v-240H240v-80l80-80v-280h-40v-80h400v80h-40zm-286 80h252l-46-46v-314H400v314zm126 0"
    })
  }));
};

function ownKeys$2(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$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var UnpinIcon = function UnpinIcon(_ref) {
  var size = _ref.size,
    otherProps = _ref.otherProps;
  return /*#__PURE__*/jsxRuntime.jsx("svg", _objectSpread$2(_objectSpread$2({
    fill: "currentColor",
    height: size,
    viewBox: "0 -960 960 960",
    width: size,
    xmlns: "http://www.w3.org/2000/svg"
  }, otherProps), {}, {
    children: /*#__PURE__*/jsxRuntime.jsx("path", {
      d: "m640-480 80 80v80H520v240l-40 40-40-40v-240H240v-80l80-80v-280h-40v-80h400v80h-40z"
    })
  }));
};

var _excluded$1 = ["label", "icon", "key", "to", "onClick", "tag"];
function ownKeys$1(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$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var MoreDropdown = function MoreDropdown(_ref) {
  var moreNavLinks = _ref.moreNavLinks,
    isNavLinkPinned = _ref.isNavLinkPinned,
    handleTogglePin = _ref.handleTogglePin;
  var _useTranslation = reactI18next.useTranslation(),
    t = _useTranslation.t;
  var location = reactRouterDom.useLocation();
  var _useState = React.useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    isOpen = _useState2[0],
    setIsOpen = _useState2[1];
  return /*#__PURE__*/jsxRuntime.jsx(Dropdown, {
    isOpen: isOpen,
    closeOnSelect: true,
    appendTo: function appendTo() {
      return document.body;
    },
    position: "right",
    strategy: "fixed",
    zIndex: 99999,
    customTarget: function customTarget() {
      return /*#__PURE__*/jsxRuntime.jsxs("div", {
        "data-testid": "more-nav-links-dropdown-button",
        className: classnames("neeto-ui-flex neeto-ui-items-center neeto-ui-no-underline neeto-ui-select-none neeto-molecules-sidebar__link neeto-ui-w-full neeto-ui-cursor-pointer", {
          "neeto-molecules-sidebar__link--hover-active": isOpen
        }),
        onClick: function onClick() {
          return setIsOpen(!isOpen);
        },
        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
          className: "neeto-molecules-sidebar__link-icon",
          children: /*#__PURE__*/jsxRuntime.jsx(MenuHorizontal, {})
        }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
          className: "neeto-molecules-sidebar__link-label",
          component: "span",
          style: "body2",
          children: t("neetoMolecules.sidebar.more")
        })]
      });
    },
    onClickOutside: function onClickOutside() {
      return setIsOpen(false);
    },
    onClose: function onClose() {
      return setIsOpen(false);
    },
    children: /*#__PURE__*/jsxRuntime.jsx(Dropdown.Menu, {
      className: "p-0",
      "data-testid": "more-nav-links-dropdown-menu",
      position: "right",
      strategy: "fixed",
      children: moreNavLinks.filter(Chevron.filterByPermissions).map(function (navLink, index) {
        var label = navLink.label,
          icon = navLink.icon,
          navLinkKey = navLink.key,
          to = navLink.to,
          onClick = navLink.onClick,
          tag = navLink.tag,
          otherProps = _objectWithoutProperties(navLink, _excluded$1);
        var IconSVG = icon;
        var isPinned = isNavLinkPinned(navLink);
        var url = new URL(to, window.location.href);
        var isActive = function isActive() {
          return ramda.is(Function, otherProps.isActive) ? otherProps.isActive() : location.pathname.startsWith(url.pathname);
        };
        return /*#__PURE__*/jsxRuntime.jsx(Dropdown.MenuItem, {
          "data-testid": label,
          children: /*#__PURE__*/jsxRuntime.jsxs(Chevron.CheckPointNavLinks, {
            onClick: onClick,
            to: to,
            className: classnames("flex cursor-pointer items-center justify-between gap-2 px-2 py-1", {
              "neeto-ui-bg-accent-100 font-semibold": isActive()
            }),
            children: [/*#__PURE__*/jsxRuntime.jsxs("span", {
              className: "flex min-w-0 flex-grow items-center gap-2",
              children: [icon && /*#__PURE__*/jsxRuntime.jsx(IconSVG, {
                className: "flex-shrink-0",
                size: 20
              }), /*#__PURE__*/jsxRuntime.jsxs(Typography, {
                className: "flex min-w-0 flex-grow items-center gap-2",
                component: "span",
                style: "body2",
                children: [label, tag && /*#__PURE__*/jsxRuntime.jsx(Tag, _objectSpread$1({}, tag))]
              })]
            }), /*#__PURE__*/jsxRuntime.jsx(Button, {
              className: "flex-shrink-0",
              "data-testid": "pin-button",
              size: "small",
              style: "text",
              icon: isPinned ? function () {
                return /*#__PURE__*/jsxRuntime.jsx(UnpinIcon, {
                  otherProps: {},
                  size: 16
                });
              } : function () {
                return /*#__PURE__*/jsxRuntime.jsx(PinIcon, {
                  otherProps: {},
                  size: 16
                });
              },
              tooltipProps: {
                content: isPinned ? t("neetoMolecules.sidebar.unpin") : t("neetoMolecules.sidebar.pin"),
                position: "right"
              },
              onClick: function onClick(event) {
                return handleTogglePin(navLink, event);
              }
            })]
          })
        }, navLinkKey || index);
      })
    })
  });
};

var _excluded = ["label", "to", "icon", "items", "isConfigureNavLink", "isCountsLoading", "count", "component", "onClick", "addActions", "tag"];
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), true).forEach(function (r) { _defineProperty(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 renderCount = function renderCount(count) {
  return count > 999 ? "999+" : count;
};
var Links = function Links(_ref) {
  var navLinks = _ref.navLinks,
    moreNavLinks = _ref.moreNavLinks,
    isCountsLoadingDeprecated = _ref.isCountsLoading,
    setSelectedNavLinkRoute = _ref.setSelectedNavLinkRoute;
  var location = reactRouterDom.useLocation();
  var _useState = React.useState([]),
    _useState2 = _slicedToArray(_useState, 2),
    expandedNavLinkKeys = _useState2[0],
    setExpandedNavLinkKeys = _useState2[1];
  var _useLocalStorage = useLocalStorage(Chevron.PINNED_MORE_NAV_LINKS_KEY, []),
    _useLocalStorage2 = _slicedToArray(_useLocalStorage, 2),
    pinnedNavLinks = _useLocalStorage2[0],
    setPinnedNavLinks = _useLocalStorage2[1];
  var handleNavLinkClick = function handleNavLinkClick(_ref2) {
    var event = _ref2.event,
      isActive = _ref2.isActive,
      navLink = _ref2.navLink;
    var isExpandable = neetoCist.isPresent(navLink.items) || neetoCist.isPresent(navLink.component);
    if (!isExpandable) {
      setExpandedNavLinkKeys([]);
      return;
    }
    if (navLink.isConfigureNavLink && neetoCist.isNotEmpty(navLink.items)) {
      setSelectedNavLinkRoute(navLink.to);
    }
    var navLinkKey = navLink.key || navLink.to;
    if (isActive()) {
      var isExpanded = expandedNavLinkKeys.includes(navLinkKey);
      setExpandedNavLinkKeys(isExpanded ? [] : [navLinkKey]);
      navLink.resetPath !== true && event.preventDefault();
      return;
    }
    setExpandedNavLinkKeys([navLinkKey]);
  };
  var handleTogglePin = function handleTogglePin(navLink, event) {
    event.preventDefault();
    event.stopPropagation();
    var navLinkKey = navLink.key || navLink.to;
    var isPinned = pinnedNavLinks.includes(navLinkKey);
    if (isPinned) {
      setPinnedNavLinks(pinnedNavLinks.filter(neetoCist.isNot(navLinkKey)));
    } else {
      setPinnedNavLinks([].concat(_toConsumableArray(pinnedNavLinks), [navLinkKey]));
    }
  };
  var isNavLinkPinned = function isNavLinkPinned(navLink) {
    if (!navLink) return false;
    var navLinkKey = navLink.key || navLink.to;
    return pinnedNavLinks.includes(navLinkKey);
  };
  var pinnedItems = moreNavLinks ? moreNavLinks.filter(isNavLinkPinned) : [];
  var activeMoreNavLink = moreNavLinks ? moreNavLinks.find(function (navLink) {
    return navLink && (location.pathname + location.search).startsWith(navLink.to);
  }) : null;
  var additionalItems = _toConsumableArray(pinnedItems);
  if (activeMoreNavLink && !isNavLinkPinned(activeMoreNavLink)) {
    additionalItems.push(activeMoreNavLink);
  }
  var combinedNavLinks = [].concat(_toConsumableArray(navLinks), _toConsumableArray(additionalItems));
  return /*#__PURE__*/jsxRuntime.jsxs("div", {
    className: "neeto-molecules-sidebar__links neeto-molecules-sidebar__no-shrinkable",
    children: [combinedNavLinks.filter(Chevron.filterByPermissions).map(function (navLink, index) {
      var label = navLink.label,
        to = navLink.to,
        icon = navLink.icon,
        items = navLink.items,
        isConfigureNavLink = navLink.isConfigureNavLink,
        _navLink$isCountsLoad = navLink.isCountsLoading,
        isCountsLoading = _navLink$isCountsLoad === void 0 ? false : _navLink$isCountsLoad,
        _navLink$count = navLink.count,
        count = _navLink$count === void 0 ? null : _navLink$count,
        Component = navLink.component,
        _onClick = navLink.onClick,
        _navLink$addActions = navLink.addActions,
        addActions = _navLink$addActions === void 0 ? [] : _navLink$addActions,
        tag = navLink.tag,
        otherProps = _objectWithoutProperties(navLink, _excluded);
      var IconSVG = icon;
      var url = new URL(to, window.location.href);
      var isActive = function isActive() {
        return ramda.is(Function, otherProps.isActive) ? otherProps.isActive() : location.pathname.startsWith(url.pathname);
      };
      var isExpandable = items || Component;
      var navLinkKey = navLink.key || navLink.to;
      var isMenuExpanded = expandedNavLinkKeys.includes(navLinkKey) && !isCountsLoadingDeprecated;
      var handleCaretClick = function handleCaretClick(event) {
        event.preventDefault();
        event.stopPropagation();
        setExpandedNavLinkKeys(function (keys) {
          return keys.includes(navLinkKey) ? keys.filter(neetoCist.isNot(navLinkKey)) : ramda.append(navLinkKey, keys);
        });
      };
      return /*#__PURE__*/jsxRuntime.jsxs(React.Fragment, {
        children: [/*#__PURE__*/jsxRuntime.jsxs(Chevron.CheckPointNavLinks, _objectSpread(_objectSpread({
          activeClassName: "active",
          className: "neeto-ui-flex neeto-ui-items-center neeto-ui-no-underline neeto-ui-select-none neeto-molecules-sidebar__link",
          "data-testid": "navlink-".concat(neetoCist.hyphenate(label)),
          onClick: function onClick(event) {
            handleNavLinkClick({
              event: event,
              isActive: isActive,
              navLink: navLink
            });
            _onClick === null || _onClick === void 0 || _onClick(event);
          }
        }, _objectSpread({
          isActive: isActive,
          to: to
        }, otherProps)), {}, {
          children: [icon && /*#__PURE__*/jsxRuntime.jsxs("span", {
            className: "neeto-molecules-sidebar__link-icon",
            "data-testid": label,
            children: [/*#__PURE__*/jsxRuntime.jsx(IconSVG, {}), neetoCist.isPresent(count) && !isCountsLoading && /*#__PURE__*/jsxRuntime.jsx("span", {
              className: "neeto-molecules-sidebar__link-unread-count",
              children: renderCount(count)
            })]
          }), /*#__PURE__*/jsxRuntime.jsxs(Typography, {
            className: "neeto-molecules-sidebar__link-label neeto-ui-flex-grow flex items-center gap-2",
            component: "span",
            style: "body2",
            children: [label, tag && /*#__PURE__*/jsxRuntime.jsx(Tag, _objectSpread({}, tag))]
          }), neetoCist.isNotEmpty(addActions) && /*#__PURE__*/jsxRuntime.jsx(AddDropdown, {
            addActions: addActions
          }), isExpandable && !isConfigureNavLink && /*#__PURE__*/jsxRuntime.jsx("span", {
            className: classnames("neeto-molecules-sidebar__link-icon neeto-molecules-sidebar__link-icon--caret", {
              "neeto-molecules-sidebar__link-icon--rotate": isMenuExpanded
            }),
            onClick: handleCaretClick,
            children: /*#__PURE__*/jsxRuntime.jsx(Right, {
              size: 16
            })
          })]
        })), isExpandable && !isConfigureNavLink && isMenuExpanded && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
          children: [items && /*#__PURE__*/jsxRuntime.jsx(Chevron._Items, _objectSpread({}, _objectSpread({
            isCountsLoading: isCountsLoading,
            items: items
          }, otherProps))), Component && /*#__PURE__*/jsxRuntime.jsx(Component, {
            navLink: navLink
          })]
        })]
      }, navLink.key || index);
    }), neetoCist.isNotEmpty(moreNavLinks) && /*#__PURE__*/jsxRuntime.jsx(MoreDropdown, {
      handleTogglePin: handleTogglePin,
      isNavLinkPinned: isNavLinkPinned,
      moreNavLinks: moreNavLinks
    })]
  });
};

var Sidebar = function Sidebar(_ref) {
  var navLinks = _ref.navLinks,
    _ref$moreNavLinks = _ref.moreNavLinks,
    moreNavLinks = _ref$moreNavLinks === void 0 ? [] : _ref$moreNavLinks,
    customLogo = _ref.customLogo,
    _ref$isCountsLoading = _ref.isCountsLoading,
    isCountsLoading = _ref$isCountsLoading === void 0 ? false : _ref$isCountsLoading,
    _ref$showWorkspaceNam = _ref.showWorkspaceName,
    showWorkspaceName = _ref$showWorkspaceNam === void 0 ? false : _ref$showWorkspaceNam,
    _ref$isExpandable = _ref.isExpandable,
    isExpandable = _ref$isExpandable === void 0 ? true : _ref$isExpandable;
  var _useKeyboardShortcuts = useKeyboardShortcutsPaneState.useKeyboardShortcutsPaneState(),
    _useKeyboardShortcuts2 = _slicedToArray(_useKeyboardShortcuts, 1),
    isKeyboardShortcutsPaneOpen = _useKeyboardShortcuts2[0];
  var _useState = React.useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    isSidebarPaneOpen = _useState2[0],
    setIsSidebarPaneOpen = _useState2[1];
  var _useLocalStorage = useLocalStorage(Chevron.SELECTED_NAV_LINK_ROUTE_STORAGE_KEY, null),
    _useLocalStorage2 = _slicedToArray(_useLocalStorage, 2),
    selectedNavLinkRoute = _useLocalStorage2[0],
    setSelectedNavLinkRoute = _useLocalStorage2[1];
  var _useLocalStorage3 = useLocalStorage(Chevron.getSidebarStateLocalStorageKey(), false),
    _useLocalStorage4 = _slicedToArray(_useLocalStorage3, 2),
    isSidebarCollapsed = _useLocalStorage4[0],
    setIsSidebarCollapsed = _useLocalStorage4[1];
  var _useLocalStorage5 = useLocalStorage(Chevron.SIDEBAR_WIDTH_KEY, "".concat(Chevron.DEFAULT_SIDEBAR_WIDTH, "px")),
    _useLocalStorage6 = _slicedToArray(_useLocalStorage5, 2),
    sidebarWidth = _useLocalStorage6[0],
    setSidebarWidth = _useLocalStorage6[1];
  var sidebarRef = React.useRef(null);
  var isMouseDownRef = React.useRef(false);
  var startXRef = React.useRef(null);
  var startWidthRef = React.useRef(null);
  var location = reactRouterDom.useLocation();
  var history = reactRouterDom.useHistory();
  var _useTranslation = reactI18next.useTranslation(),
    t = _useTranslation.t;
  var isLargerScreen = function isLargerScreen() {
    return window.innerWidth > 768;
  };
  var isSidebarClosed = isLargerScreen() ? isSidebarCollapsed : ramda.not(isSidebarPaneOpen);
  React.useEffect(function () {
    if (isKeyboardShortcutsPaneOpen) {
      setIsSidebarPaneOpen(false);
      setIsSidebarCollapsed(true);
    } else if (!isKeyboardShortcutsPaneOpen && isLargerScreen()) {
      setIsSidebarPaneOpen(true);
      setIsSidebarCollapsed(false);
    }
  }, [isKeyboardShortcutsPaneOpen]);
  React.useEffect(function () {
    if (!neetoCist.isPresent(navLinks)) return;
    var currentLink = ramda.findLast(function (_ref2) {
      var to = _ref2.to,
        isActive = _ref2.isActive;
      var url = new URL(to, window.location.href);
      return ramda.is(Function, isActive) ? isActive() : location.pathname.includes(url.pathname);
    })(navLinks);
    if (neetoCist.isPresent(currentLink)) {
      setSelectedNavLinkRoute(currentLink.isConfigureNavLink ? currentLink.to : null);
    }
  }, []);
  React.useEffect(function () {
    var handleResize = function handleResize() {
      if (isLargerScreen()) return;
      setIsSidebarPaneOpen(false);
      setIsSidebarCollapsed(true);
    };
    window.addEventListener("resize", handleResize);
    return function () {
      return window.removeEventListener("resize", handleResize);
    };
  }, []);
  React.useEffect(function () {
    if (!isExpandable) return undefined;
    var handle = document.querySelector(".neeto-molecules-sidebar__resize-handle");
    if (!handle) return undefined;
    var onMouseDown = function onMouseDown(e) {
      var _sidebarRef$current;
      isMouseDownRef.current = true;
      startXRef.current = e.clientX;
      startWidthRef.current = ((_sidebarRef$current = sidebarRef.current) === null || _sidebarRef$current === void 0 ? void 0 : _sidebarRef$current.getBoundingClientRect().width) || Chevron.DEFAULT_SIDEBAR_WIDTH;
      Chevron.enableDraggingStyles();
    };
    var onMouseMove = function onMouseMove(e) {
      if (!isMouseDownRef.current) return;
      var dx = e.clientX - startXRef.current;
      var newWidth = startWidthRef.current + dx;
      newWidth = Math.max(Chevron.MIN_SIDEBAR_WIDTH, Math.min(newWidth, Chevron.MAX_SIDEBAR_WIDTH));
      setSidebarWidth("".concat(newWidth, "px"));
    };
    var onMouseUp = function onMouseUp() {
      if (!isMouseDownRef.current) return;
      isMouseDownRef.current = false;
      Chevron.disableDraggingStyles();
    };
    handle.addEventListener("mousedown", onMouseDown);
    document.addEventListener("mousemove", onMouseMove);
    document.addEventListener("mouseup", onMouseUp);
    return function () {
      handle.removeEventListener("mousedown", onMouseDown);
      document.removeEventListener("mousemove", onMouseMove);
      document.removeEventListener("mouseup", onMouseUp);
    };
  }, [isExpandable]);
  React.useEffect(function () {
    document.documentElement.style.setProperty("--neeto-molecules-sidebar-width", "".concat(parseInt(sidebarWidth) / 16, "rem"));
  }, [sidebarWidth]);
  var handleGoBack = function handleGoBack(event) {
    event.preventDefault();
    setSelectedNavLinkRoute(null);
    var configureNavLink = Chevron.getActiveConfigurePageLink({
      navLinks: navLinks,
      location: location
    });
    if (configureNavLink !== null && configureNavLink !== void 0 && configureNavLink.to) {
      history.push(utils.buildUrl(configureNavLink.to));
    }
  };
  var activeLink = React.useMemo(function () {
    return navLinks.find(function (link) {
      if (ramda.is(Function, link.isActive)) return link.isActive();
      var url = new URL(link.to, window.location.href);
      return location.pathname.startsWith(url.pathname);
    });
  }, [location.pathname, navLinks]);
  var isSelectedNavLinkVisible = selectedNavLinkRoute && (activeLink === null || activeLink === void 0 ? void 0 : activeLink.to) === selectedNavLinkRoute && neetoCist.isNotEmpty(navLinks);
  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
      "data-testid": "sidebar-container",
      ref: sidebarRef,
      style: {
        width: isSidebarCollapsed ? "0" : sidebarWidth
      },
      className: classnames("neeto-molecules-sidebar__wrapper", {
        "neeto-molecules-sidebar__wrapper--collapsed": isLargerScreen() ? isSidebarCollapsed : ramda.not(isSidebarPaneOpen)
      }),
      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
        className: "neeto-molecules-sidebar__backdrop",
        onClick: function onClick() {
          setIsSidebarPaneOpen(false);
          setSelectedNavLinkRoute(null);
        }
      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
        "data-testid": "sidebar-wrapper",
        className: classnames("neeto-molecules-sidebar neeto-ui-flex neeto-ui-flex-col neeto-ui-flex-shrink-0 neeto-ui-overflow-y-auto neeto-ui-overflow-x-hidden", {
          "neeto-molecules-sidebar--focus-mode": neetoCist.isPresent(selectedNavLinkRoute)
        }),
        children: [/*#__PURE__*/jsxRuntime.jsx(Header$1, {
          customLogo: customLogo,
          clearSettingsNav: function clearSettingsNav() {
            return setSelectedNavLinkRoute(null);
          }
        }), showWorkspaceName && /*#__PURE__*/jsxRuntime.jsxs("div", {
          className: "neeto-ui-bg-gray-100 neeto-molecules-sidebar__workspace-info",
          children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
            className: "neeto-ui-mb-1",
            style: "h5",
            weight: "semibold",
            children: t("neetoMolecules.sidebar.myWorkspace")
          }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
            className: "neeto-ui-truncate",
            style: "body2",
            children: globalProps.organization.name
          })]
        }), isSelectedNavLinkVisible ? /*#__PURE__*/jsxRuntime.jsx(Chevron.SelectedLink, {
          handleGoBack: handleGoBack,
          navLink: activeLink
        }) : /*#__PURE__*/jsxRuntime.jsx(Links, {
          isCountsLoading: isCountsLoading,
          moreNavLinks: moreNavLinks,
          navLinks: navLinks,
          setSelectedNavLinkRoute: setSelectedNavLinkRoute
        })]
      }), /*#__PURE__*/jsxRuntime.jsx(Button, {
        className: "neeto-molecules-sidebar__toggler",
        "data-testid": "neeto-molecules-sidebar-toggler",
        icon: function icon() {
          return /*#__PURE__*/jsxRuntime.jsx(Chevron.Chevron, {});
        },
        style: isLargerScreen() ? "text" : "secondary",
        tooltipProps: {
          content: isSidebarClosed ? t("neetoMolecules.sidebar.showMenu") : t("neetoMolecules.sidebar.hideMenu"),
          position: "bottom",
          touch: ["hold", 500]
        },
        onClick: function onClick() {
          setIsSidebarCollapsed(!isSidebarCollapsed);
          setIsSidebarPaneOpen(ramda.not);
        }
      })]
    }), isExpandable && /*#__PURE__*/jsxRuntime.jsx("div", {
      className: "neeto-molecules-sidebar__resize-handle"
    })]
  });
};

module.exports = Sidebar;
//# sourceMappingURL=Sidebar.js.map
