import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { useState, useEffect } from 'react';
import classnames from 'classnames';
import Button from '@bigbinary/neetoui/Button';
import { not } from 'ramda';
import { useTranslation } from 'react-i18next';
import { useHistory } from 'react-router-dom';
import { S as SelectedLink, C as Chevron } from './Chevron-Dp-3nhLf.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import '@babel/runtime/helpers/defineProperty';
import '@babel/runtime/helpers/objectWithoutProperties';
import '@bigbinary/neeto-commons-frontend/react-utils';
import '@bigbinary/neeto-commons-frontend/utils/general';
import '@bigbinary/neeto-icons/Home';
import '@bigbinary/neetoui/Typography';
import '@bigbinary/neeto-cist';
import '@bigbinary/neeto-filters-frontend/Segments';
import '@bigbinary/neetoui/Tag';
import '@bigbinary/neeto-commons-frontend/react-utils/useRegisterNavigationCheckpoint';
import './inject-css-C2dztUxs.js';

var ConfigurePageSidebar = function ConfigurePageSidebar(_ref) {
  var label = _ref.label,
    items = _ref.navLinks,
    configurePageRoute = _ref.configurePageRoute;
  var history = useHistory();
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    isSidebarPaneOpen = _useState2[0],
    setIsSidebarPaneOpen = _useState2[1];
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    isSidebarCollapsed = _useState4[0],
    setIsSidebarCollapsed = _useState4[1];
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  var isLargerScreen = function isLargerScreen() {
    return window.innerWidth > 768;
  };
  var isSidebarClosed = isLargerScreen() ? isSidebarCollapsed : not(isSidebarPaneOpen);
  useEffect(function () {
    var handleResize = function handleResize() {
      if (isLargerScreen()) return;
      setIsSidebarPaneOpen(false);
      setIsSidebarCollapsed(true);
    };
    window.addEventListener("resize", handleResize);
    return function () {
      return window.removeEventListener("resize", handleResize);
    };
  }, []);
  var handleConfigureLinkClick = function handleConfigureLinkClick() {
    history.push(configurePageRoute);
  };
  return /*#__PURE__*/jsxs("div", {
    "data-testid": "configure-page-sidebar-container",
    className: classnames("neeto-molecules-sidebar__wrapper neeto-molecules-sidebar__wrapper__configure-page", {
      "neeto-molecules-sidebar__wrapper--collapsed": isLargerScreen() ? isSidebarCollapsed : not(isSidebarPaneOpen)
    }),
    children: [/*#__PURE__*/jsx("div", {
      className: "neeto-molecules-sidebar__backdrop",
      onClick: function onClick() {
        setIsSidebarPaneOpen(false);
      }
    }), /*#__PURE__*/jsx("div", {
      className: "neeto-molecules-sidebar neeto-molecules-sidebar__configure-page 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",
      "data-testid": "configure-page-sidebar",
      children: /*#__PURE__*/jsx(SelectedLink, {
        isConfigureSidebar: true,
        handleGoBack: handleConfigureLinkClick,
        navLink: {
          label: label,
          items: items
        }
      })
    }), /*#__PURE__*/jsx(Button, {
      className: "neeto-molecules-sidebar__toggler",
      "data-testid": "configure-page-neeto-molecules-sidebar-toggler",
      icon: function icon() {
        return /*#__PURE__*/jsx(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(not);
      }
    })]
  });
};

export { ConfigurePageSidebar as default };
//# sourceMappingURL=ConfigurePageSidebar.js.map
