/* toggle-button.tsx generated by @compiled/babel-plugin v0.38.1 */
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SideNavToggleButton = void 0;
require("./toggle-button.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _bindEventListener = require("bind-event-listener");
var _sidebarCollapse = _interopRequireDefault(require("@atlaskit/icon/core/sidebar-collapse"));
var _sidebarExpand = _interopRequireDefault(require("@atlaskit/icon/core/sidebar-expand"));
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _migration = require("../../top-nav-items/themed/migration");
var _isSideNavShortcutEnabledContext = require("./is-side-nav-shortcut-enabled-context");
var _sideNavToggleTooltipKeyboardShortcut = require("./side-nav-toggle-tooltip-keyboard-shortcut");
var _toggleButtonContext = require("./toggle-button-context");
var _useSideNavVisibility2 = require("./use-side-nav-visibility");
var _useToggleSideNav = require("./use-toggle-side-nav");
var _visibilityContext = require("./visibility-context");
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 toggleButtonTooltipOptions = {
  // We're disabling pointer events on the tooltip to prevent it from blocking mouse events, so that the side nav flyout stays open
  // when moving the mouse from the top bar to the side nav.
  ignoreTooltipPointerEvents: true
};

// For duplicate "mouseenter" issue when changing icons (see below)
var silentIconStyles = null;

/**
 * __SideNavToggleButton__
 *
 * Button for toggling the side nav. It should be used in the top bar.
 */
var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleButton(_ref) {
  var _ref$defaultCollapsed = _ref.defaultCollapsed,
    defaultCollapsed = _ref$defaultCollapsed === void 0 ? false : _ref$defaultCollapsed,
    expandLabel = _ref.expandLabel,
    collapseLabel = _ref.collapseLabel,
    testId = _ref.testId,
    interactionName = _ref.interactionName,
    onClick = _ref.onClick;
  var _useSideNavVisibility = (0, _useSideNavVisibility2.useSideNavVisibility)({
      defaultCollapsed: defaultCollapsed
    }),
    isSideNavExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop,
    isSideNavExpandedOnMobile = _useSideNavVisibility.isExpandedOnMobile;
  var sideNavState = (0, _react.useContext)(_visibilityContext.SideNavVisibilityState);

  // When default state is provided to `Root` the state in context will already be
  // initialized in SSR
  var _useState = (0, _react.useState)(sideNavState === null ? !defaultCollapsed : isSideNavExpandedOnDesktop),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    isSideNavExpanded = _useState2[0],
    setIsSideNavExpanded = _useState2[1];
  var ref = (0, _react.useContext)(_toggleButtonContext.SideNavToggleButtonAttachRef);
  var elementRef = (0, _react.useRef)(null);

  /**
   * Attempts to address HOT-121458 by ensuring that the toggle button element
   * in context is always up to date.
   *
   * My theory is that something to do with SSR, hydration and suspense was causing the
   * underlying HTML element to change but without causing the toggle button to remount.
   *
   * This meant the effect calling `ref()` did not re-run, and the value in context became stale.
   */
  var _useState3 = (0, _react.useState)(null),
    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
    element = _useState4[0],
    setElement = _useState4[1];
  (0, _react.useEffect)(function () {
    if ((0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_toggle_ref_fix')) {
      ref(element);
    }
  }, [element, ref]);
  (0, _react.useEffect)(function () {
    if (!(0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_toggle_ref_fix')) {
      ref(elementRef.current);
    }
  }, [elementRef, ref]);
  (0, _react.useEffect)(function () {
    var _window$matchMedia = window.matchMedia('(min-width: 64rem)'),
      matches = _window$matchMedia.matches;
    setIsSideNavExpanded(matches ? isSideNavExpandedOnDesktop : isSideNavExpandedOnMobile);
  }, [isSideNavExpandedOnDesktop, isSideNavExpandedOnMobile]);
  (0, _react.useEffect)(function () {
    // When screen size changes, ensure we use the correct visibility state
    var mediaQueryList = window.matchMedia('(min-width: 64rem)');
    return (0, _bindEventListener.bind)(mediaQueryList, {
      type: 'change',
      listener: function listener() {
        setIsSideNavExpanded(mediaQueryList.matches ? isSideNavExpandedOnDesktop : isSideNavExpandedOnMobile);
      }
    });
  }, [isSideNavExpandedOnDesktop, isSideNavExpandedOnMobile]);
  var toggleVisibility = (0, _useToggleSideNav.useToggleSideNav)({
    trigger: 'toggle-button'
  });
  var handleClick = (0, _react.useCallback)(function (event, analyticsEvent) {
    onClick === null || onClick === void 0 || onClick(event, analyticsEvent, {
      isSideNavVisible: isSideNavExpanded
    });
    toggleVisibility();
  }, [onClick, toggleVisibility, isSideNavExpanded]);

  /**
   * ## Behaviour
   * It is intentional that collapse icon will be used while the flyout is open.
   * The icon is tied to the expanded / collapse state, and not the flyout state.
   *
   * ## Why a function?
   * Unfortunately, changing the icon inside an <IconButton> when the user is over
   * the button will cause the svg element to be replaced, which can trigger a
   * "mouseenter" event. This is problematic when the user is already over the button,
   * as it can result in a "mouseenter" event after the user manually entered the button.
   *
   * `icon` accepts a function for the `icon` prop (ie a render prop), so we don't need to
   * memoize it, or pull it out into a new function
   */
  var icon = function icon(props) {
    return /*#__PURE__*/_react.default.createElement("span", {
      className: (0, _runtime.ax)(["_1e0c1bgi _lcxvglyw"])
    }, isSideNavExpanded ? /*#__PURE__*/_react.default.createElement(_sidebarCollapse.default, props) : /*#__PURE__*/_react.default.createElement(_sidebarExpand.default, props));
  };
  var isShortcutEnabled = (0, _isSideNavShortcutEnabledContext.useIsSideNavShortcutEnabled)();
  var tooltipProps = (0, _react.useMemo)(function () {
    if ((0, _platformFeatureFlags.fg)('navx-full-height-sidebar')) {
      return _objectSpread(_objectSpread({}, toggleButtonTooltipOptions), {}, {
        shortcut: isShortcutEnabled ? _sideNavToggleTooltipKeyboardShortcut.sideNavToggleTooltipKeyboardShortcut : undefined
      });
    }
    return toggleButtonTooltipOptions;
  }, [isShortcutEnabled]);
  return /*#__PURE__*/_react.default.createElement(_migration.IconButton, {
    appearance: "subtle",
    label: isSideNavExpanded ? collapseLabel : expandLabel,
    icon: icon,
    onClick: handleClick,
    testId: testId,
    isTooltipDisabled: false,
    interactionName: interactionName,
    ref: (0, _platformFeatureFlags.fg)('platform_dst_nav4_side_nav_toggle_ref_fix') ? setElement : elementRef,
    tooltip: tooltipProps
  });
};