"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SideNavToggleButton = exports.SIDE_NAV_TOGGLE_ICON_SIZE = exports.SIDE_NAV_TOGGLE_ICON_HALF_SIZE = void 0;
var _Button2 = _interopRequireDefault(require("@mui/material/Button"));
var _styled = _interopRequireDefault(require("@emotion/styled"));
var _react = require("react");
var _i18n = require("../../i18n.generated/i18n.cjs");
var _ChevronRight = require("../../icons.generated/ChevronRight.cjs");
var _MuiPropsContext = require("../../MuiPropsContext.cjs");
var _OdysseyDesignTokensContext = require("../../OdysseyDesignTokensContext.cjs");
var _Tooltip = require("../../Tooltip.cjs");
var _uiShellSharedConstants = require("../uiShellSharedConstants.cjs");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/*!
 * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
 * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
 *
 * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *
 * See the License for the specific language governing permissions and limitations under the License.
 */

const SIDE_NAV_TOGGLE_ICON_SIZE = exports.SIDE_NAV_TOGGLE_ICON_SIZE = 24;
const SIDE_NAV_TOGGLE_ICON_HALF_SIZE = exports.SIDE_NAV_TOGGLE_ICON_HALF_SIZE = SIDE_NAV_TOGGLE_ICON_SIZE / 2;
const StyledToggleButton = (0, _styled.default)(_Button2.default, {
  shouldForwardProp: prop => prop !== "clickAreaPadding" && prop !== "odysseyDesignTokens"
})(({
  clickAreaPadding,
  odysseyDesignTokens
}) => ({
  border: 0,
  height: `${SIDE_NAV_TOGGLE_ICON_SIZE}px`,
  left: `-${clickAreaPadding * 2}px`,
  padding: 0,
  position: "relative",
  width: `calc(${SIDE_NAV_TOGGLE_ICON_SIZE}px + (${clickAreaPadding}px * 2))`,
  zIndex: _uiShellSharedConstants.UI_SHELL_OVERLAY_Z_INDEX,
  "&&": {
    backgroundColor: "transparent",
    borderColor: "transparent",
    boxShadow: "none",
    color: odysseyDesignTokens.PalettePrimaryText
  },
  "&:focus-visible": {
    outline: "none"
  },
  "&:hover, &:focus-visible": {
    color: odysseyDesignTokens.HueNeutralWhite
  },
  "&::before": {
    backgroundColor: odysseyDesignTokens.HueNeutralWhite,
    borderColor: "transparent",
    borderRadius: "50%",
    boxShadow: odysseyDesignTokens.ShadowScale1,
    color: odysseyDesignTokens.PalettePrimaryText,
    content: "''",
    height: `${SIDE_NAV_TOGGLE_ICON_SIZE}px`,
    left: `${clickAreaPadding * 2}px`,
    position: "absolute",
    top: 0,
    width: `${SIDE_NAV_TOGGLE_ICON_SIZE}px`
  },
  "&:hover::before, &:focus-visible::before": {
    backgroundColor: odysseyDesignTokens.PalettePrimaryText
  }
}));
const StyledChevronRightIcon = (0, _styled.default)(_ChevronRight.ChevronRightIcon, {
  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isSideNavCollapsed"
})(({
  isSideNavCollapsed,
  odysseyDesignTokens
}) => ({
  fontSize: "125%",
  left: isSideNavCollapsed ? undefined : "4px",
  position: "absolute",
  right: isSideNavCollapsed ? "4px" : undefined,
  top: "3px",
  transform: isSideNavCollapsed ? "rotate(0deg)" : "rotate(-180deg)",
  transitionDuration: odysseyDesignTokens.TransitionDurationMain,
  transitionProperty: "transform",
  transitionTimingFunction: "ease-in-out"
}));
const defaultLocalButton = typeof window === "undefined" ? null : document.createElement("button");
const SideNavToggleButton = ({
  ariaControls,
  clickAreaPadding = 0,
  id,
  isSideNavCollapsed,
  onClick,
  onHighlight,
  tabIndex
}) => {
  const odysseyDesignTokens = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
  const {
    t
  } = (0, _i18n.useTranslation)();
  const buttonRef = (0, _react.useRef)(defaultLocalButton);
  (0, _react.useEffect)(() => {
    const setHighlighted = () => {
      onHighlight?.(true);
    };
    const setUnhighlighted = () => {
      onHighlight?.(false);
    };
    const setFocusHighlighted = () => {
      onHighlight?.(Boolean(buttonRef.current?.matches(":focus-visible")));
    };
    buttonRef.current?.addEventListener("mouseenter", setHighlighted);
    buttonRef.current?.addEventListener("mouseleave", setUnhighlighted);
    buttonRef.current?.addEventListener("focus", setFocusHighlighted, true);
    buttonRef.current?.addEventListener("blur", setFocusHighlighted, true);
    setUnhighlighted();
    return () => {
      buttonRef.current?.removeEventListener("mouseenter", setHighlighted);
      buttonRef.current?.removeEventListener("mouseleave", setUnhighlighted);
      buttonRef.current?.removeEventListener("focus", setFocusHighlighted, true);
      buttonRef.current?.removeEventListener("blur", setFocusHighlighted, true);
    };
  }, [onHighlight]);
  const toggleLabel = (0, _react.useMemo)(() => isSideNavCollapsed ? t("sidenav.toggle.expand") : t("sidenav.toggle.collapse"), [isSideNavCollapsed, t]);
  const renderButton = (0, _react.useCallback)(muiProps => {
    return (0, _jsxRuntime.jsx)(StyledToggleButton, {
      ...muiProps,
      "aria-controls": ariaControls,
      "aria-expanded": !isSideNavCollapsed,
      "aria-label": toggleLabel,
      clickAreaPadding: clickAreaPadding,
      "data-se": "sidenav-toggle-button",
      "data-sidenav-toggle": true,
      id: id,
      odysseyDesignTokens: odysseyDesignTokens,
      onClick: onClick,
      ref: element => {
        if (element) {
          buttonRef.current = element;
          muiProps.ref?.(element);
        }
      },
      tabIndex: tabIndex,
      variant: "floating",
      children: (0, _jsxRuntime.jsx)(StyledChevronRightIcon, {
        isSideNavCollapsed: isSideNavCollapsed,
        odysseyDesignTokens: odysseyDesignTokens
      })
    });
  }, [ariaControls, clickAreaPadding, id, isSideNavCollapsed, odysseyDesignTokens, onClick, tabIndex, toggleLabel]);
  return (0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
    ariaType: "description",
    placement: "right",
    text: toggleLabel,
    children: (0, _jsxRuntime.jsx)(_MuiPropsContext.MuiPropsContext.Consumer, {
      children: renderButton
    })
  });
};
const MemoizedSideNavToggleButton = exports.SideNavToggleButton = (0, _react.memo)(SideNavToggleButton);
MemoizedSideNavToggleButton.displayName = "SideNavToggleButton";
//# sourceMappingURL=SideNavToggleButton.cjs.map