"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getNavItemContentStyles = exports.getBaseNavItemContentStyles = exports.StyledSideNavListItem = exports.SideNavItemContent = void 0;
var _Link2 = _interopRequireDefault(require("@mui/material/Link"));
var _styled = _interopRequireDefault(require("@emotion/styled"));
var _react = require("react");
var _index = require("../../icons.generated/index.cjs");
var _OdysseyDesignTokensContext = require("../../OdysseyDesignTokensContext.cjs");
var _UiShellProvider = require("../../ui-shell/UiShellProvider.cjs");
var _SideNavItemContentContext = require("./SideNavItemContentContext.cjs");
var _SideNavItemLinkContent = require("./SideNavItemLinkContent.cjs");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/*!
 * Copyright (c) 2024-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 StyledSideNavListItem = exports.StyledSideNavListItem = (0, _styled.default)("li", {
  shouldForwardProp: prop => prop !== "isSelected" && prop !== "odysseyDesignTokens" && prop !== "sideNavContrastColors"
})(({
  isSelected,
  odysseyDesignTokens,
  sideNavContrastColors
}) => ({
  display: "flex",
  alignItems: "center",
  backgroundColor: "unset",
  borderRadius: odysseyDesignTokens.BorderRadiusMain,
  transition: `backgroundColor ${odysseyDesignTokens.TransitionDurationMain}, color ${odysseyDesignTokens.TransitionDurationMain}`,
  ...(isSelected && {
    color: sideNavContrastColors?.fontColor ? `${sideNavContrastColors.fontColor}` : `${odysseyDesignTokens.TypographyColorAction}`,
    backgroundColor: sideNavContrastColors?.itemSelectedBackgroundColor || odysseyDesignTokens.HueBlue50
  })
}));
const scrollToNode = node => {
  if (node) {
    node?.scrollIntoView({
      behavior: "instant",
      block: "center",
      inline: "nearest"
    });
  }
};
const getBaseNavItemContentStyles = ({
  isDisabled,
  isSelected,
  odysseyDesignTokens,
  sideNavContrastColors,
  isActiveDropTarget
}) => ({
  display: "flex",
  alignItems: "center",
  width: "100%",
  textDecoration: "none",
  color: sideNavContrastColors?.fontColor ? `${sideNavContrastColors?.fontColor} !important` : `${odysseyDesignTokens.TypographyColorHeading} !important`,
  minHeight: "unset",
  paddingBlock: odysseyDesignTokens.Spacing3,
  paddingInlineEnd: odysseyDesignTokens.Spacing4,
  borderRadius: odysseyDesignTokens.BorderRadiusMain,
  transition: `backgroundColor ${odysseyDesignTokens.TransitionDurationMain}, color ${odysseyDesignTokens.TransitionDurationMain}`,
  cursor: "pointer",
  ...(isActiveDropTarget && {
    backgroundColor: sideNavContrastColors?.itemHoverBackgroundColor || odysseyDesignTokens.HueNeutral50
  }),
  "&:hover, li:has(> button:hover, > button:focus, > button:focus-visible) &": {
    textDecoration: "none",
    backgroundColor: sideNavContrastColors?.itemHoverBackgroundColor || odysseyDesignTokens.HueNeutral50,
    ...(isSelected && {
      backgroundColor: sideNavContrastColors?.itemSelectedBackgroundColor || odysseyDesignTokens.HueBlue50,
      color: sideNavContrastColors?.fontColor || odysseyDesignTokens.TypographyColorAction
    }),
    ...(isDisabled && {
      backgroundColor: "unset"
    })
  },
  ...(isSelected && {
    color: sideNavContrastColors?.fontColor ? `${sideNavContrastColors?.fontColor} !important` : `${odysseyDesignTokens.TypographyColorAction} !important`,
    fontWeight: odysseyDesignTokens.TypographyWeightBodyBold
  }),
  ...(isDisabled && {
    cursor: "default",
    color: `${odysseyDesignTokens.TypographyColorDisabled} !important`,
    ...(sideNavContrastColors?.itemDisabledFontColor && {
      color: `${sideNavContrastColors?.itemDisabledFontColor} !important`
    })
  }),
  "&:focus-visible": {
    outline: "none",
    boxShadow: `inset 0 0 0 2px ${sideNavContrastColors?.focusRingColor || odysseyDesignTokens.PalettePrimaryMain}`
  }
});
exports.getBaseNavItemContentStyles = getBaseNavItemContentStyles;
const getNavItemContentStyles = ({
  odysseyDesignTokens,
  contextValue,
  paddingInlineStart = odysseyDesignTokens.Spacing6
}) => ({
  paddingInlineStart: `calc(${odysseyDesignTokens.Spacing4} * ${contextValue.depth} + ${paddingInlineStart})`,
  ...(contextValue.depth === 1 && {
    paddingInlineStart: odysseyDesignTokens.Spacing4
  }),
  ...(contextValue.isCompact && {
    paddingBlock: odysseyDesignTokens.Spacing1
  })
});
exports.getNavItemContentStyles = getNavItemContentStyles;
const NavItemContentContainer = (0, _styled.default)("div", {
  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop != "contextValue" && prop !== "isDisabled" && prop !== "sideNavContrastColors" && prop !== "isSelected" && prop !== "isActiveDropTarget"
})(({
  isDisabled,
  isSelected,
  contextValue,
  odysseyDesignTokens,
  sideNavContrastColors,
  isActiveDropTarget
}) => ({
  ...getBaseNavItemContentStyles({
    isDisabled,
    isSelected,
    odysseyDesignTokens,
    sideNavContrastColors,
    isActiveDropTarget
  }),
  ...getNavItemContentStyles({
    odysseyDesignTokens,
    contextValue,
    paddingInlineStart: contextValue.absolutePaddingStart
  })
}));
const StyledNavItemLink = (0, _styled.default)(_Link2.default, {
  shouldForwardProp: prop => prop != "contextValue" && prop !== "isDisabled" && prop !== "isSelected" && prop !== "odysseyDesignTokens" && prop !== "sideNavContrastColors" && prop !== "isActiveDropTarget"
})(({
  isDisabled,
  isSelected,
  contextValue,
  odysseyDesignTokens,
  sideNavContrastColors,
  isActiveDropTarget
}) => ({
  ...getBaseNavItemContentStyles({
    isDisabled,
    isSelected,
    odysseyDesignTokens,
    sideNavContrastColors,
    isActiveDropTarget
  }),
  ...getNavItemContentStyles({
    odysseyDesignTokens,
    contextValue,
    paddingInlineStart: contextValue.absolutePaddingStart
  })
}));
const SideNavItemContent = ({
  count,
  id,
  label,
  href,
  target,
  startIcon,
  severity,
  statusLabel,
  endIcon,
  onClick,
  isDisabled,
  isSelected,
  scrollRef,
  onItemSelected,
  translate
}) => {
  const uiShellContext = (0, _UiShellProvider.useUiShellContext)();
  const sidenavItemContentContext = (0, _SideNavItemContentContext.useSideNavItemContent)();
  const contextValue = (0, _react.useMemo)(() => sidenavItemContentContext, [sidenavItemContentContext]);
  const odysseyDesignTokens = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
  const [isActiveDropTarget, setIsActiveDropTarget] = (0, _react.useState)(false);
  const localScrollRef = (0, _react.useRef)(null);
  (0, _react.useImperativeHandle)(scrollRef, () => {
    return {
      scrollIntoView: () => {
        scrollToNode(localScrollRef.current);
      }
    };
  }, []);
  const itemClickHandler = (0, _react.useCallback)(event => {
    onItemSelected?.(id);
    onClick?.(event);
  }, [id, onClick, onItemSelected]);
  const sideNavItemContentKeyHandler = (0, _react.useCallback)(event => {
    if (event?.key === "Enter") {
      event.preventDefault();
      onItemSelected?.(id);
      onClick?.(event);
    }
  }, [id, onClick, onItemSelected]);
  return (0, _jsxRuntime.jsx)(StyledSideNavListItem, {
    "aria-current": isSelected ? "page" : undefined,
    "aria-disabled": isDisabled,
    disabled: isDisabled,
    id: id,
    isSelected: isSelected,
    odysseyDesignTokens: odysseyDesignTokens,
    onDragLeave: () => {
      setIsActiveDropTarget(false);
    },
    onDragOver: () => {
      setIsActiveDropTarget(true);
    },
    onDrop: () => {
      setIsActiveDropTarget(false);
    },
    ref: localScrollRef,
    sideNavContrastColors: uiShellContext?.sideNavContrastColors,
    children: isDisabled ? (0, _jsxRuntime.jsx)(NavItemContentContainer, {
      contextValue: contextValue,
      "data-se": "tb--sidenav-text-container",
      isActiveDropTarget: false,
      isDisabled: isDisabled,
      isSelected: isSelected,
      odysseyDesignTokens: odysseyDesignTokens,
      sideNavContrastColors: uiShellContext?.sideNavContrastColors,
      children: (0, _jsxRuntime.jsx)(_SideNavItemLinkContent.SideNavItemLinkContent, {
        count: count,
        endIcon: endIcon,
        label: label,
        severity: severity,
        startIcon: startIcon,
        statusLabel: statusLabel,
        translate: translate
      })
    }) : !href ? (0, _jsxRuntime.jsx)(NavItemContentContainer, {
      contextValue: contextValue,
      "data-se": "tb--sidenav-text-container",
      isActiveDropTarget: isActiveDropTarget,
      isDisabled: isDisabled,
      isSelected: isSelected,
      odysseyDesignTokens: odysseyDesignTokens,
      onClick: itemClickHandler,
      onKeyDown: sideNavItemContentKeyHandler,
      role: "button",
      sideNavContrastColors: uiShellContext?.sideNavContrastColors,
      tabIndex: 0,
      children: (0, _jsxRuntime.jsx)(_SideNavItemLinkContent.SideNavItemLinkContent, {
        count: count,
        endIcon: endIcon,
        label: label,
        severity: severity,
        startIcon: startIcon,
        statusLabel: statusLabel,
        translate: translate
      })
    }) : (0, _jsxRuntime.jsxs)(StyledNavItemLink, {
      contextValue: contextValue,
      "data-se": "tb--sidenav-text-container",
      href: href,
      isActiveDropTarget: isActiveDropTarget,
      isDisabled: isDisabled,
      isSelected: isSelected,
      odysseyDesignTokens: odysseyDesignTokens,
      onClick: itemClickHandler,
      sideNavContrastColors: uiShellContext?.sideNavContrastColors,
      target: target,
      children: [(0, _jsxRuntime.jsx)(_SideNavItemLinkContent.SideNavItemLinkContent, {
        count: count,
        endIcon: endIcon,
        label: label,
        severity: severity,
        startIcon: startIcon,
        statusLabel: statusLabel,
        translate: translate
      }), target === "_blank" && (0, _jsxRuntime.jsx)("span", {
        className: "Link-indicator",
        role: "presentation",
        children: (0, _jsxRuntime.jsx)(_index.ExternalLinkIcon, {})
      })]
    })
  }, id);
};
const MemoizedSideNavItemContent = exports.SideNavItemContent = (0, _react.memo)(SideNavItemContent);
MemoizedSideNavItemContent.displayName = "SideNavItemContent";
//# sourceMappingURL=SideNavItemContent.cjs.map