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

import { arrayMove } from "@dnd-kit/sortable";
import styled from "@emotion/styled";
import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
import { ErrorBoundary } from "react-error-boundary";
import { useTranslation } from "../../i18n.generated/i18n.js";
import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
import { OdysseyThemeProvider } from "../../OdysseyThemeProvider.js";
import { Overline } from "../../Typography.js";
import { useUiShellContext } from "../../ui-shell/UiShellProvider.js";
import { useMountLifecycleEffect } from "../../useMountLifecycleEffect.js";
import { SIDE_NAV_VISIBILITY_TOGGLE_ICON_POSITION, SIDE_NAV_WIDTH, UI_SHELL_BASE_Z_INDEX, UI_SHELL_OVERLAY_Z_INDEX } from "../uiShellSharedConstants.js";
import { useElementAtContainerEdge } from "../useElementAtContainerEdge.js";
import { NavAccordion } from "./NavAccordion.js";
import { SideNavFooterContent } from "./SideNavFooterContent.js";
import { SideNavHeader } from "./SideNavHeader.js";
import { SideNavItemContent, StyledSideNavListItem } from "./SideNavItemContent.js";
import { SideNavItemContentContext } from "./SideNavItemContentContext.js";
import { SideNavSortableList } from "./SideNavSortableList.js";
import { SIDE_NAV_TOGGLE_ICON_HALF_SIZE, SIDE_NAV_TOGGLE_ICON_SIZE, SideNavToggleButton } from "./SideNavToggleButton.js";
import { useIsSideNavCollapsedSessionStorage } from "./useIsSideNavCollapsedSessionStorage.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const SIDE_NAV_COLLAPSED_PADDING_HIGHLIGHTED = 12;
const SIDE_NAV_COLLAPSED_PADDING_UNHIGHLIGHTED = 2;
const flattenNestedItems = items => {
  return items.flatMap(item => {
    if (item.nestedNavItems) {
      return [item, ...flattenNestedItems(item.nestedNavItems)];
    }
    return item;
  });
};
const StyledCollapsibleContent = styled("div", {
  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isSideNavCollapsed"
})(({
  odysseyDesignTokens,
  isSideNavCollapsed
}) => ({
  position: "relative",
  display: "grid",
  gridTemplateColumns: SIDE_NAV_WIDTH,
  height: "100%",
  transition: `grid-template-columns ${odysseyDesignTokens.TransitionDurationMain}, opacity 300ms`,
  transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,
  overflow: "hidden",
  ...(isSideNavCollapsed && {
    gridTemplateColumns: 0,
    opacity: 0
  })
}));
const StyledOpacityTransitionContainer = styled("div", {
  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isSideNavCollapsed"
})(({
  odysseyDesignTokens,
  isSideNavCollapsed
}) => ({
  display: "grid",
  gridTemplateRows: "max-content 1fr max-content",
  height: "100%",
  transition: `opacity 50ms`,
  transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,
  overflow: "hidden",
  ...(isSideNavCollapsed && {
    opacity: 0
  })
}));
const StyledSideNavContainer = styled("nav", {
  shouldForwardProp: prop => prop !== "backgroundColor" && prop !== "hasNeighbouringContentAtInlineStart" && prop !== "isAppContentWhiteBackground" && prop !== "isSideNavCollapsed" && prop !== "isSideNavToggleHighlighted" && prop !== "odysseyDesignTokens"
})(({
  backgroundColor,
  hasNeighbouringContentAtInlineStart,
  isAppContentWhiteBackground,
  isSideNavCollapsed,
  isSideNavToggleHighlighted,
  odysseyDesignTokens
}) => ({
  backgroundColor: backgroundColor || odysseyDesignTokens.HueNeutralWhite,
  height: "100%",
  position: "relative",
  width: "fit-content",
  "&::before, &::after": {
    content: "''",
    height: "100%",
    pointerEvents: "none",
    position: "absolute",
    right: `-${odysseyDesignTokens.BorderWidthMain}`,
    top: 0,
    transition: `opacity ${odysseyDesignTokens.TransitionDurationMain}, transform ${odysseyDesignTokens.TransitionDurationMain}, width ${odysseyDesignTokens.TransitionDurationMain}`,
    userSelect: "none",
    zIndex: UI_SHELL_OVERLAY_Z_INDEX
  },
  "&::before": {
    backgroundColor: isSideNavToggleHighlighted ? odysseyDesignTokens.BorderColorPrimaryControl : odysseyDesignTokens.HueNeutral100,
    opacity: isAppContentWhiteBackground || !isSideNavCollapsed && isSideNavToggleHighlighted ? 1 : 0,
    width: `calc(${odysseyDesignTokens.BorderWidthMain} * 2)`
  },
  "&::after": {
    backgroundColor: odysseyDesignTokens.HueNeutral200,
    opacity: isSideNavCollapsed ? 1 : 0,
    transform: isSideNavCollapsed && !hasNeighbouringContentAtInlineStart ? isSideNavToggleHighlighted ? `translateX(calc(100% - (${odysseyDesignTokens.BorderWidthMain} * 2)))` : `translateX(calc(100% - ${SIDE_NAV_COLLAPSED_PADDING_HIGHLIGHTED}px))` : "translateX(0)",
    width: hasNeighbouringContentAtInlineStart ? 0 : `calc(${SIDE_NAV_TOGGLE_ICON_HALF_SIZE + SIDE_NAV_COLLAPSED_PADDING_HIGHLIGHTED}px + ${odysseyDesignTokens.BorderWidthMain} * 2)`,
    ...(isSideNavCollapsed && isSideNavToggleHighlighted ? {
      borderRightColor: odysseyDesignTokens.BorderColorPrimaryControl,
      borderRightStyle: odysseyDesignTokens.BorderStyleMain,
      borderRightWidth: `calc(${odysseyDesignTokens.BorderWidthMain} * 2)`
    } : {})
  }
}));
const StyledSideNavToggleButtonContainer = styled("div", {
  shouldForwardProp: prop => prop !== "hasNeighbouringContentAtInlineStart" && prop !== "isSideNavCollapsed" && prop !== "isSideNavToggleHighlighted" && prop !== "odysseyDesignTokens"
})(({
  hasNeighbouringContentAtInlineStart,
  isSideNavCollapsed,
  isSideNavToggleHighlighted,
  odysseyDesignTokens
}) => ({
  position: "absolute",
  right: `${SIDE_NAV_TOGGLE_ICON_HALF_SIZE}px`,
  top: SIDE_NAV_VISIBILITY_TOGGLE_ICON_POSITION,
  width: `${SIDE_NAV_TOGGLE_ICON_SIZE}px`,
  transform: isSideNavCollapsed && !hasNeighbouringContentAtInlineStart ? isSideNavToggleHighlighted ? `translate3d(calc(100% + ${SIDE_NAV_TOGGLE_ICON_HALF_SIZE + SIDE_NAV_COLLAPSED_PADDING_HIGHLIGHTED}px), 0, 0)` : `translate3d(calc(100% + ${SIDE_NAV_TOGGLE_ICON_HALF_SIZE + SIDE_NAV_COLLAPSED_PADDING_UNHIGHLIGHTED}px), 0, 0)` : "translate3d(100%, 0, 0)",
  transition: `transform ${odysseyDesignTokens.TransitionDurationMain}`,
  zIndex: UI_SHELL_OVERLAY_Z_INDEX + 1
}));
const StyledSideNavHeaderContainer = styled("div", {
  shouldForwardProp: prop => prop !== "borderColor" && prop !== "hasContentScrolled" && prop !== "odysseyDesignTokens"
})(({
  borderColor,
  hasContentScrolled,
  odysseyDesignTokens
}) => ({
  flexShrink: 0,
  ...(hasContentScrolled && {
    borderBottomWidth: odysseyDesignTokens.BorderWidthMain,
    borderBottomStyle: odysseyDesignTokens.BorderStyleMain,
    borderBottomColor: odysseyDesignTokens.HueNeutral100,
    ...(borderColor && {
      borderBottomColor: borderColor.concat("15")
    })
  })
}));
const StyledSideNavListContainer = styled("ul")(() => ({
  padding: 0,
  listStyle: "none",
  listStyleType: "none",
  margin: 0,
  width: "100%"
}));
const StyledSideNavScrollableContainer = styled("div", {
  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "hasBlockStartPadding"
})(({
  odysseyDesignTokens,
  hasBlockStartPadding
}) => ({
  display: "inline-grid",
  gridTemplateRows: "1fr max-content",
  overflowY: "auto",
  paddingBlockStart: hasBlockStartPadding ? odysseyDesignTokens.Spacing2 : 0,
  paddingInline: odysseyDesignTokens.Spacing2
}));
const StyledSectionHeaderContainer = styled("li", {
  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "contrastFontColor"
})(({
  contrastFontColor,
  odysseyDesignTokens
}) => ({
  color: contrastFontColor || odysseyDesignTokens.HueNeutral600,
  marginBlock: `${odysseyDesignTokens.Spacing3}`,
  paddingBlock: odysseyDesignTokens.Spacing1,
  paddingInline: odysseyDesignTokens.Spacing4
}));
const StyledSideNavFooter = styled("div", {
  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "sideNavBackgroundColor"
})(({
  odysseyDesignTokens,
  sideNavBackgroundColor
}) => ({
  backgroundColor: odysseyDesignTokens.HueNeutralWhite,
  flexShrink: 0,
  padding: odysseyDesignTokens.Spacing4,
  ...(sideNavBackgroundColor && {
    backgroundColor: sideNavBackgroundColor
  })
}));
const StyledPersistentSideNavFooter = styled(StyledSideNavFooter, {
  shouldForwardProp: prop => prop !== "isContentScrollable" && prop !== "odysseyDesignTokens" && prop !== "sideNavBackgroundColor"
})(({
  isContentScrollable,
  odysseyDesignTokens,
  sideNavBackgroundColor
}) => ({
  transitionProperty: "box-shadow",
  transitionDuration: odysseyDesignTokens.TransitionDurationMain,
  transitionTiming: odysseyDesignTokens.TransitionTimingMain,
  zIndex: UI_SHELL_BASE_Z_INDEX,
  ...(isContentScrollable && {
    boxShadow: "0px -8px 8px -8px rgba(39, 39, 39, 0.08)"
  }),
  ...(sideNavBackgroundColor && {
    backgroundColor: sideNavBackgroundColor
  })
}));
const StyledSideNavFooterItemsContainer = styled("div", {
  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "sideNavContrastColors"
})(({
  odysseyDesignTokens,
  sideNavContrastColors
}) => ({
  display: "flex",
  flexWrap: "wrap",
  alignItems: "center",
  fontSize: odysseyDesignTokens.TypographySizeOverline,
  "a, span": {
    color: odysseyDesignTokens.HueNeutral600,
    transition: `color ${odysseyDesignTokens.TransitionDurationMain}`,
    "&:visited": {
      color: odysseyDesignTokens.HueNeutral600,
      ...(sideNavContrastColors?.fontColor && {
        color: sideNavContrastColors?.fontColor
      })
    },
    "&:hover": {
      textDecoration: "none",
      color: odysseyDesignTokens.HueNeutral900,
      ...(sideNavContrastColors?.fontColor && {
        color: sideNavContrastColors?.fontColor
      })
    },
    ...(sideNavContrastColors?.fontColor && {
      color: sideNavContrastColors?.fontColor
    })
  }
}));
const StyledLoadingItemContainer = styled("div", {
  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
})(({
  odysseyDesignTokens
}) => ({
  alignItems: "center",
  display: "flex",
  gap: odysseyDesignTokens.Spacing2,
  paddingBlock: odysseyDesignTokens.Spacing2,
  paddingInline: odysseyDesignTokens.Spacing4
}));
const getHasScrollableContent = scrollableContainer => scrollableContainer.scrollHeight > scrollableContainer.clientHeight;
const LoadingItem = () => {
  const odysseyDesignTokens = useOdysseyDesignTokens();
  return _jsxs(StyledLoadingItemContainer, {
    odysseyDesignTokens: odysseyDesignTokens,
    children: [_jsx(_Skeleton, {
      height: odysseyDesignTokens.Spacing4,
      variant: "circular",
      width: odysseyDesignTokens.Spacing4
    }), _jsx(_Skeleton, {
      variant: "rounded",
      width: "100%"
    })]
  });
};
const SideNav = ({
  appName,
  footerComponent,
  footerItems,
  hasCustomFooter,
  hasSessionStorageState,
  isCollapsible,
  isCollapsed = false,
  isCompact,
  isLoading,
  isObtrusive,
  logoProps,
  leavesPaddingStart,
  onCollapse,
  onExpand,
  onSort,
  sideNavItems
}) => {
  const [hasContentScrolled, setHasContentScrolled] = useState(false);
  const [isContentScrollable, setIsContentScrollable] = useState(false);
  const [isSideNavToggleHighlighted, setIsSideNavToggleHighlighted] = useState(false);
  const [sideNavItemsList, updateSideNavItemsList] = useState(sideNavItems || []);
  const [isSideNavCollapsedLocalState, setIsSideNavCollapsedLocalState] = useState(isCollapsed);
  const {
    sessionState: isSideNavCollapsedSessionState,
    setSessionState: setIsSideNavCollapsedSessionState
  } = useIsSideNavCollapsedSessionStorage(isCollapsed);
  const isSideNavCollapsed = hasSessionStorageState ? isSideNavCollapsedSessionState : isSideNavCollapsedLocalState;
  const setIsSideNavCollapsed = hasSessionStorageState ? setIsSideNavCollapsedSessionState : setIsSideNavCollapsedLocalState;
  const uiShellContext = useUiShellContext();
  const odysseyDesignTokens = useOdysseyDesignTokens();
  const {
    t
  } = useTranslation();
  const scrollableContentRef = useRef(null);
  const resizeObserverRef = useRef(null);
  const intersectionObserverRef = useRef(null);
  const sideNavRef = useRef(null);
  const {
    isAtContainerInlineStart
  } = useElementAtContainerEdge({
    element: sideNavRef.current,
    monitoringElement: sideNavRef.current?.parentElement?.parentElement
  });
  const hasNeighbouringContentAtInlineStart = !isAtContainerInlineStart;
  const blankElement = useMemo(() => _jsx("div", {}), []);
  useEffect(() => updateSideNavItemsList(sideNavItems || []), [sideNavItems]);
  const onMount = useCallback(() => {
    if (!isCollapsible) {
      setIsSideNavCollapsed(isCollapsed);
    }
  }, [isCollapsed, isCollapsible, setIsSideNavCollapsed]);
  const onUpdate = useCallback(() => {
    setIsSideNavCollapsed(isCollapsed);
  }, [isCollapsed, setIsSideNavCollapsed]);
  useMountLifecycleEffect({
    onMount,
    onUpdate
  });
  useEffect(() => {
    const updateIsContentScrollable = () => {
      if (scrollableContentRef.current && scrollableContentRef.current.parentElement) {
        setIsContentScrollable(getHasScrollableContent(scrollableContentRef.current.parentElement));
      }
    };
    let resizeObserverDebounceTimer;
    if (!resizeObserverRef.current) {
      resizeObserverRef.current = new ResizeObserver(() => {
        cancelAnimationFrame(resizeObserverDebounceTimer);
        resizeObserverDebounceTimer = requestAnimationFrame(updateIsContentScrollable);
      });
    }
    if (resizeObserverRef.current && scrollableContentRef.current) {
      resizeObserverRef.current.observe(scrollableContentRef.current);
      if (scrollableContentRef.current.parentElement) {
        resizeObserverRef.current.observe(scrollableContentRef.current.parentElement);
      }
    }
    updateIsContentScrollable();
    if (!intersectionObserverRef.current && scrollableContentRef.current) {
      intersectionObserverRef.current = new IntersectionObserver(entries => {
        const isIntersecting = entries.slice().sort((a, b) => a.time - b.time).at(0)?.isIntersecting;
        setHasContentScrolled(!isIntersecting);
      }, {
        root: scrollableContentRef.current.parentElement,
        threshold: 1.0
      });
    }
    if (intersectionObserverRef.current && scrollableContentRef.current) {
      const ulElement = scrollableContentRef.current;
      const [liElement] = Array.from(ulElement?.children || []);
      if (liElement) {
        intersectionObserverRef.current.observe(liElement);
      }
    }
    return () => {
      if (resizeObserverRef.current) {
        resizeObserverRef.current.disconnect();
        resizeObserverRef.current = null;
      }
      if (intersectionObserverRef.current) {
        intersectionObserverRef.current.disconnect();
        intersectionObserverRef.current = null;
      }
      cancelAnimationFrame(resizeObserverDebounceTimer);
    };
  }, [sideNavItemsList]);
  const scrollIntoViewRef = useRef(null);
  const firstSideNavItemIdWithIsSelected = useMemo(() => {
    const flattenedItems = flattenNestedItems(sideNavItemsList);
    const firstItemWithIsSelected = flattenedItems.find(sideNavItem => sideNavItem.isSelected);
    return firstItemWithIsSelected?.id;
  }, [sideNavItemsList]);
  useEffect(() => {
    if (firstSideNavItemIdWithIsSelected && scrollIntoViewRef.current) {
      scrollIntoViewRef.current.scrollIntoView();
    }
  }, [firstSideNavItemIdWithIsSelected]);
  const getRefIfThisIsFirstNodeWithIsSelected = useCallback(itemId => itemId === firstSideNavItemIdWithIsSelected ? scrollIntoViewRef : undefined, [firstSideNavItemIdWithIsSelected]);
  const setSelectedItem = useCallback(selectedItemId => {
    const updateNestedSelection = items => {
      return items.map(item => {
        if (item.nestedNavItems) {
          return {
            ...item,
            isSelected: item.id === selectedItemId,
            nestedNavItems: updateNestedSelection(item.nestedNavItems)
          };
        }
        return {
          ...item,
          isSelected: item.id === selectedItemId
        };
      });
    };
    const updatedSideNavItems = updateNestedSelection(sideNavItemsList);
    updateSideNavItemsList(updatedSideNavItems);
    if (isCollapsed || isObtrusive) {
      if (isCollapsible) {
        uiShellContext?.closeSideNavMenu();
      } else {
        onCollapse?.();
      }
    }
  }, [isCollapsed, isCollapsible, isObtrusive, onCollapse, sideNavItemsList, uiShellContext]);
  const createAccordionContextValue = useCallback(depth => ({
    depth
  }), []);
  const createLeafItemContextValue = useCallback((depth, isSortable) => ({
    isCompact,
    depth,
    isSortable,
    absolutePaddingStart: leavesPaddingStart
  }), [isCompact, leavesPaddingStart]);
  const renderSideNavItem = (item, depth = 1) => {
    const {
      href,
      id,
      isDefaultExpanded,
      isDisabled,
      isExpanded,
      isSectionHeader,
      label,
      startIcon,
      nestedNavItems,
      onChange,
      isSortable,
      translate
    } = item;
    if (isSectionHeader) {
      return _jsx(ErrorBoundary, {
        fallback: blankElement,
        children: _jsx(StyledSectionHeaderContainer, {
          contrastFontColor: uiShellContext?.sideNavContrastColors?.fontColor,
          id: id,
          odysseyDesignTokens: odysseyDesignTokens,
          children: _jsx(Overline, {
            component: "h3",
            children: label
          })
        })
      }, id);
    } else if (nestedNavItems && nestedNavItems.length > 0) {
      const nestedChildren = _jsx(StyledSideNavListContainer, {
        role: "presentation",
        children: isSortable ? _jsx(SideNavSortableList, {
          depth: depth + 1,
          items: nestedNavItems,
          onChange: setSortedItems,
          parentId: item.id,
          processSideNavItems: processSideNavItems
        }) : processSideNavItems(nestedNavItems, depth + 1).map(item => item.sortableItem.navItem)
      });
      return href ? _jsxs(ErrorBoundary, {
        fallback: blankElement,
        children: [_jsx(SideNavItemContent, {
          ...item,
          href: href,
          onItemSelected: setSelectedItem,
          scrollRef: getRefIfThisIsFirstNodeWithIsSelected(item.id),
          startIcon: item.startIcon
        }), _jsx(StyledSideNavListItem, {
          "aria-disabled": isDisabled,
          disabled: isDisabled,
          id: `${id}-items`,
          odysseyDesignTokens: odysseyDesignTokens,
          children: nestedChildren
        })]
      }, id) : _jsx(ErrorBoundary, {
        fallback: blankElement,
        children: _jsx(StyledSideNavListItem, {
          "aria-disabled": isDisabled,
          disabled: isDisabled,
          id: id,
          odysseyDesignTokens: odysseyDesignTokens,
          children: _jsx(SideNavItemContentContext.Provider, {
            value: createAccordionContextValue(depth),
            children: _jsx(NavAccordion, {
              isCompact: isCompact,
              isDefaultExpanded: isDefaultExpanded,
              isDisabled: isDisabled,
              isExpanded: isExpanded,
              label: label,
              onChange: onChange,
              startIcon: startIcon,
              children: nestedChildren
            })
          }, id)
        })
      }, id);
    } else {
      return _jsx(ErrorBoundary, {
        fallback: blankElement,
        children: _jsx(SideNavItemContentContext.Provider, {
          value: createLeafItemContextValue(depth, isSortable),
          children: _jsx(SideNavItemContent, {
            ...item,
            onItemSelected: setSelectedItem,
            scrollRef: getRefIfThisIsFirstNodeWithIsSelected(id),
            startIcon: startIcon,
            translate: translate
          })
        }, id)
      }, id);
    }
  };
  const processSideNavItems = (items, depth = 1) => {
    return items?.map(item => ({
      ...item,
      sortableItem: {
        id: item.id,
        isSelected: item.isSelected,
        isDisabled: item.isDisabled,
        isSortable: item.isSortable,
        navItem: renderSideNavItem(item, depth)
      }
    }));
  };
  const sideNavExpandClickHandler = useCallback(() => {
    setIsSideNavCollapsed(isSideNavCollapsed => {
      if (isSideNavCollapsed) {
        onExpand?.();
      } else {
        onCollapse?.();
      }
      return !isSideNavCollapsed;
    });
  }, [onCollapse, onExpand, setIsSideNavCollapsed]);
  const sideNavExpandKeyHandler = useCallback(event => {
    if (event?.key === "Enter" || event?.code === "Space") {
      event.preventDefault();
      sideNavExpandClickHandler();
    }
  }, [sideNavExpandClickHandler]);
  useEffect(() => {
    const unsubscribe = uiShellContext?.subscribeToCloseSideNavMenu(() => {
      onCollapse?.();
      setIsSideNavCollapsed(true);
    });
    return () => {
      unsubscribe?.();
    };
  }, [onCollapse, setIsSideNavCollapsed, uiShellContext]);
  const setSortedItems = useCallback((parentId, activeId, activeIndex, overIndex) => {
    const sortedSideNavItems = sideNavItemsList.map(item => item.id === parentId && item.nestedNavItems ? {
      ...item,
      nestedNavItems: arrayMove(item.nestedNavItems, activeIndex, overIndex)
    } : item);
    updateSideNavItemsList(sortedSideNavItems);
    onSort?.(sortedSideNavItems, parentId, activeId, activeIndex, overIndex);
  }, [onSort, sideNavItemsList]);
  const onSideNavToggleButtonHighlight = useCallback(isHighlighted => {
    setIsSideNavToggleHighlighted(isHighlighted);
  }, []);
  return _jsxs(StyledSideNavContainer, {
    "aria-label": t("navigation.label"),
    backgroundColor: uiShellContext?.sideNavBackgroundColor,
    hasNeighbouringContentAtInlineStart: hasNeighbouringContentAtInlineStart,
    id: "side-nav-expandable",
    isAppContentWhiteBackground: uiShellContext?.appBackgroundColor === odysseyDesignTokens.HueNeutralWhite,
    isSideNavCollapsed: isSideNavCollapsed,
    isSideNavToggleHighlighted: isSideNavToggleHighlighted,
    odysseyDesignTokens: odysseyDesignTokens,
    ref: sideNavRef,
    children: [isCollapsible && _jsx(StyledSideNavToggleButtonContainer, {
      hasNeighbouringContentAtInlineStart: hasNeighbouringContentAtInlineStart,
      isSideNavCollapsed: isSideNavCollapsed,
      isSideNavToggleHighlighted: isSideNavToggleHighlighted,
      odysseyDesignTokens: odysseyDesignTokens,
      children: _jsx(SideNavToggleButton, {
        ariaControls: "side-nav-expandable",
        clickAreaPadding: isSideNavCollapsed && !hasNeighbouringContentAtInlineStart ? SIDE_NAV_TOGGLE_ICON_SIZE / 2 : 0,
        isSideNavCollapsed: isSideNavCollapsed,
        onClick: sideNavExpandClickHandler,
        onHighlight: onSideNavToggleButtonHighlight,
        onKeyDown: sideNavExpandKeyHandler
      })
    }), _jsx(OdysseyThemeProvider, {
      children: _jsx(StyledCollapsibleContent, {
        "data-se": "collapsible-region",
        isSideNavCollapsed: isSideNavCollapsed,
        odysseyDesignTokens: odysseyDesignTokens,
        children: _jsxs(StyledOpacityTransitionContainer, {
          isSideNavCollapsed: isSideNavCollapsed,
          odysseyDesignTokens: odysseyDesignTokens,
          children: [appName || isLoading || logoProps ? _jsx(StyledSideNavHeaderContainer, {
            borderColor: uiShellContext?.sideNavContrastColors?.fontColor,
            hasContentScrolled: hasContentScrolled,
            odysseyDesignTokens: odysseyDesignTokens,
            children: isLoading && !appName && !logoProps ? _jsx(SideNavHeader, {
              isLoading: isLoading
            }) : _jsx(SideNavHeader, {
              appName: appName,
              isLoading: isLoading,
              logoProps: logoProps
            })
          }) : _jsx("div", {}), _jsxs(StyledSideNavScrollableContainer, {
            "data-se": "scrollable-region",
            hasBlockStartPadding: !appName,
            odysseyDesignTokens: odysseyDesignTokens,
            children: [_jsx(StyledSideNavListContainer, {
              ref: scrollableContentRef,
              role: "none",
              children: isLoading ? Array(6).fill(null).map((_, index) => _jsx(LoadingItem, {}, index)) : processSideNavItems(sideNavItemsList).map(item => item.sortableItem.navItem)
            }), !isLoading && footerItems && !hasCustomFooter && _jsx(StyledSideNavFooter, {
              odysseyDesignTokens: odysseyDesignTokens,
              sideNavBackgroundColor: uiShellContext?.sideNavBackgroundColor,
              children: _jsx(StyledSideNavFooterItemsContainer, {
                odysseyDesignTokens: odysseyDesignTokens,
                sideNavContrastColors: uiShellContext?.sideNavContrastColors,
                children: _jsx(SideNavFooterContent, {
                  footerItems: footerItems
                })
              })
            })]
          }), !isLoading && !footerItems && hasCustomFooter && _jsx(StyledPersistentSideNavFooter, {
            isContentScrollable: isContentScrollable,
            odysseyDesignTokens: odysseyDesignTokens,
            sideNavBackgroundColor: uiShellContext?.sideNavBackgroundColor,
            children: footerComponent
          })]
        })
      })
    })]
  });
};
const MemoizedSideNav = memo(SideNav);
MemoizedSideNav.displayName = "SideNav";
export { MemoizedSideNav as SideNav };
//# sourceMappingURL=SideNav.js.map