"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.TopNavListItem = void 0;
var _styled = _interopRequireDefault(require("@emotion/styled"));
var _react = require("react");
var _Link = require("../../Link.cjs");
var _OdysseyDesignTokensContext = require("../../OdysseyDesignTokensContext.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 StyledTopNavItemLabelContainer = (0, _styled.default)("div", {
  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
})(({
  odysseyDesignTokens
}) => ({
  alignItems: "center",
  display: "flex",
  flexWrap: "wrap",
  fontSize: odysseyDesignTokens.TypographyScale0,
  fontWeight: odysseyDesignTokens.TypographyWeightHeading
}));
const StyledTopNavListItem = (0, _styled.default)("li", {
  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isDisabled"
})(({
  odysseyDesignTokens,
  isDisabled
}) => ({
  alignItems: "center",
  color: `${isDisabled ? odysseyDesignTokens.TypographyColorDisabled : odysseyDesignTokens.TypographyColorHeading} !important`,
  cursor: isDisabled ? "default" : "pointer",
  display: "flex",
  pointerEvents: isDisabled ? "none" : "auto",
  a: {
    alignItems: "center",
    color: `${odysseyDesignTokens.TypographyColorHeading} !important`,
    display: "flex",
    paddingBlock: odysseyDesignTokens.Spacing2,
    paddingInline: odysseyDesignTokens.Spacing4,
    "&:hover": {
      backgroundColor: !isDisabled ? odysseyDesignTokens.HueNeutral50 : "inherit",
      textDecoration: "none"
    },
    "&:focus-visible": {
      backgroundColor: !isDisabled ? odysseyDesignTokens.HueNeutral50 : "inherit",
      borderRadius: 0,
      outlineOffset: 0,
      outlineWidth: odysseyDesignTokens.FocusOutlineWidthMain
    }
  },
  "div[role='button']:hover": {
    backgroundColor: !isDisabled ? odysseyDesignTokens.HueNeutral50 : "inherit"
  }
}));
const StyledNavItemContentClickContainer = (0, _styled.default)("div", {
  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
})(({
  odysseyDesignTokens
}) => ({
  alignItems: "center",
  display: "flex",
  paddingBlock: odysseyDesignTokens.Spacing2,
  paddingInline: odysseyDesignTokens.Spacing4,
  width: "100%",
  "&:focus-visible": {
    backgroundColor: odysseyDesignTokens.HueNeutral50,
    borderRadius: 0,
    outlineColor: odysseyDesignTokens.FocusOutlineColorPrimary,
    outlineStyle: odysseyDesignTokens.FocusOutlineStyle,
    outlineWidth: odysseyDesignTokens.FocusOutlineWidthMain,
    textDecoration: "none"
  }
}));
const TopNavListItem = ({
  href,
  id,
  isDisabled,
  label,
  onClick,
  target
}) => {
  const odysseyDesignTokens = (0, _OdysseyDesignTokensContext.useOdysseyDesignTokens)();
  const topNavItemContentKeyHandler = (0, _react.useCallback)(event => {
    if (event?.key === "Enter") {
      event.preventDefault();
      event.stopPropagation();
      onClick?.(event);
    }
  }, [onClick]);
  return (0, _jsxRuntime.jsxs)(StyledTopNavListItem, {
    "aria-disabled": isDisabled,
    id: id,
    isDisabled: isDisabled,
    odysseyDesignTokens: odysseyDesignTokens,
    children: [isDisabled && (0, _jsxRuntime.jsx)(StyledNavItemContentClickContainer, {
      odysseyDesignTokens: odysseyDesignTokens,
      children: (0, _jsxRuntime.jsx)(StyledTopNavItemLabelContainer, {
        odysseyDesignTokens: odysseyDesignTokens,
        children: label
      })
    }), !isDisabled && href && (0, _jsxRuntime.jsx)(_Link.Link, {
      href: href,
      onClick: onClick,
      target: target,
      children: (0, _jsxRuntime.jsx)(StyledTopNavItemLabelContainer, {
        odysseyDesignTokens: odysseyDesignTokens,
        children: label
      })
    }), !isDisabled && !href && (0, _jsxRuntime.jsx)(StyledNavItemContentClickContainer, {
      odysseyDesignTokens: odysseyDesignTokens,
      onClick: onClick,
      onKeyDown: topNavItemContentKeyHandler,
      role: "button",
      tabIndex: 0,
      children: (0, _jsxRuntime.jsx)(StyledTopNavItemLabelContainer, {
        odysseyDesignTokens: odysseyDesignTokens,
        children: label
      })
    })]
  });
};
const MemoizedTopNavListItem = exports.TopNavListItem = (0, _react.memo)(TopNavListItem);
MemoizedTopNavListItem.displayName = "TopNavListItem";
//# sourceMappingURL=TopNavListItem.cjs.map