import _Link from "@mui/material/Link";
/*!
 * 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.
 */

import styled from "@emotion/styled";
import { memo, useCallback, useImperativeHandle, useMemo, useRef, useState } from "react";
import { ExternalLinkIcon } from "../../icons.generated/index.js";
import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
import { useUiShellContext } from "../../ui-shell/UiShellProvider.js";
import { useSideNavItemContent } from "./SideNavItemContentContext.js";
import { SideNavItemLinkContent } from "./SideNavItemLinkContent.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const StyledSideNavListItem = styled("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"
    });
  }
};
export 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}`
  }
});
export 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
  })
});
const NavItemContentContainer = styled("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 = styled(_Link, {
  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 = useUiShellContext();
  const sidenavItemContentContext = useSideNavItemContent();
  const contextValue = useMemo(() => sidenavItemContentContext, [sidenavItemContentContext]);
  const odysseyDesignTokens = useOdysseyDesignTokens();
  const [isActiveDropTarget, setIsActiveDropTarget] = useState(false);
  const localScrollRef = useRef(null);
  useImperativeHandle(scrollRef, () => {
    return {
      scrollIntoView: () => {
        scrollToNode(localScrollRef.current);
      }
    };
  }, []);
  const itemClickHandler = useCallback(event => {
    onItemSelected?.(id);
    onClick?.(event);
  }, [id, onClick, onItemSelected]);
  const sideNavItemContentKeyHandler = useCallback(event => {
    if (event?.key === "Enter") {
      event.preventDefault();
      onItemSelected?.(id);
      onClick?.(event);
    }
  }, [id, onClick, onItemSelected]);
  return _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 ? _jsx(NavItemContentContainer, {
      contextValue: contextValue,
      "data-se": "tb--sidenav-text-container",
      isActiveDropTarget: false,
      isDisabled: isDisabled,
      isSelected: isSelected,
      odysseyDesignTokens: odysseyDesignTokens,
      sideNavContrastColors: uiShellContext?.sideNavContrastColors,
      children: _jsx(SideNavItemLinkContent, {
        count: count,
        endIcon: endIcon,
        label: label,
        severity: severity,
        startIcon: startIcon,
        statusLabel: statusLabel,
        translate: translate
      })
    }) : !href ? _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: _jsx(SideNavItemLinkContent, {
        count: count,
        endIcon: endIcon,
        label: label,
        severity: severity,
        startIcon: startIcon,
        statusLabel: statusLabel,
        translate: translate
      })
    }) : _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: [_jsx(SideNavItemLinkContent, {
        count: count,
        endIcon: endIcon,
        label: label,
        severity: severity,
        startIcon: startIcon,
        statusLabel: statusLabel,
        translate: translate
      }), target === "_blank" && _jsx("span", {
        className: "Link-indicator",
        role: "presentation",
        children: _jsx(ExternalLinkIcon, {})
      })]
    })
  }, id);
};
const MemoizedSideNavItemContent = memo(SideNavItemContent);
MemoizedSideNavItemContent.displayName = "SideNavItemContent";
export { MemoizedSideNavItemContent as SideNavItemContent };
//# sourceMappingURL=SideNavItemContent.js.map