/*!
 * 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, useRef } from "react";
import { ErrorBoundary } from "react-error-boundary";
import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext.js";
import { AppSwitcher } from "./AppSwitcher/AppSwitcher.js";
import { InnerAppContainer } from "./InnerAppContainer.js";
import { SideNav } from "./SideNav/SideNav.js";
import { TopNav } from "./TopNav/TopNav.js";
import { TURN_OFF_APP_SWITCHER } from "./uiShellContentTypes.js";
import { useUiShellContext } from "./UiShellProvider.js";
import { emptySideNavItems } from "./uiShellSharedConstants.js";
import { useMatchAppElementToUiShellAppArea } from "./useMatchAppElementToUiShellAppArea.js";
import { useScrollState } from "./useScrollState.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const appSwitcherDefaultAppIcons = [];
const StyledAppContainer = styled("div", {
  shouldForwardProp: prop => prop !== "appBackgroundColor" && prop !== "odysseyDesignTokens"
})(({
  appBackgroundColor
}) => ({
  backgroundColor: appBackgroundColor,
  gridArea: "app-content",
  position: "relative"
}));
const StyledAppSwitcherContainer = styled("div")({
  gridArea: "app-switcher"
});
const StyledBannersContainer = styled("div")({
  gridArea: "banners"
});
const StyledSideNavContainer = styled("div")({
  gridArea: "side-nav"
});
const StyledShellContainer = styled("div", {
  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
})(({
  odysseyDesignTokens
}) => ({
  backgroundColor: odysseyDesignTokens.HueNeutral50,
  display: "grid",
  gridGap: 0,
  gridTemplateAreas: `
    "banners banners banners"
    "app-switcher side-nav top-nav"
    "app-switcher side-nav app-content"
  `,
  gridTemplateColumns: "auto auto 1fr",
  gridTemplateRows: "auto auto 1fr",
  height: "100vh",
  width: "100vw"
}));
const StyledTopNavContainer = styled("div")({
  gridArea: "top-nav"
});
const WideUiShellContent = ({
  appElement,
  appElementScrollingMode,
  appSwitcherProps,
  hasStandardAppContentPadding = true,
  hasSideNavProps,
  initialVisibleSections = ["TopNav", "SideNav", "AppSwitcher"],
  onError = console.error,
  optionalComponents,
  sideNavProps,
  topNavProps
}) => {
  const odysseyDesignTokens = useOdysseyDesignTokens();
  const uiShellContext = useUiShellContext();
  const {
    isContentScrolled
  } = useScrollState(appElement);
  const sideNavContainerRef = useRef(null);
  const topNavContainerRef = useRef(null);
  const uiShellAppAreaRef = useRef(null);
  const {
    parentContainerRef
  } = useMatchAppElementToUiShellAppArea({
    appElement,
    appElementScrollingMode,
    paddingMode: hasStandardAppContentPadding ? "comfortable" : "none",
    uiShellAppAreaRef,
    uiShellResizableRefs: [sideNavContainerRef, topNavContainerRef, uiShellAppAreaRef]
  });
  return _jsxs(StyledShellContainer, {
    odysseyDesignTokens: odysseyDesignTokens,
    ref: parentContainerRef,
    children: [_jsx(StyledBannersContainer, {
      children: optionalComponents?.banners
    }), _jsxs(StyledAppSwitcherContainer, {
      children: [initialVisibleSections?.includes("AppSwitcher") && !appSwitcherProps && _jsx(ErrorBoundary, {
        fallback: null,
        onError: onError,
        children: _jsx(AppSwitcher, {
          appIcons: appSwitcherDefaultAppIcons,
          isLoading: true,
          selectedAppName: ""
        })
      }), appSwitcherProps && appSwitcherProps !== TURN_OFF_APP_SWITCHER && _jsx(ErrorBoundary, {
        fallback: null,
        onError: onError,
        children: _jsx(AppSwitcher, {
          ...appSwitcherProps
        })
      })]
    }), _jsxs(StyledSideNavContainer, {
      ref: sideNavContainerRef,
      children: [initialVisibleSections?.includes("SideNav") && !hasSideNavProps && _jsx(ErrorBoundary, {
        fallback: null,
        onError: onError,
        children: _jsx(SideNav, {
          isLoading: true,
          sideNavItems: emptySideNavItems
        })
      }), hasSideNavProps && sideNavProps && _jsx(ErrorBoundary, {
        fallback: null,
        onError: onError,
        children: _jsx(SideNav, {
          ...sideNavProps,
          ...(sideNavProps.hasCustomFooter && optionalComponents?.sideNavFooter ? {
            footerComponent: optionalComponents.sideNavFooter,
            footerItems: undefined,
            hasCustomFooter: sideNavProps.hasCustomFooter
          } : {
            footerItems: sideNavProps.footerItems,
            hasCustomFooter: false
          })
        })
      })]
    }), _jsxs(StyledTopNavContainer, {
      ref: topNavContainerRef,
      children: [initialVisibleSections?.includes("TopNav") && topNavProps === undefined && _jsx(ErrorBoundary, {
        fallback: null,
        onError: onError,
        children: _jsx(TopNav, {
          leftSideComponent: optionalComponents?.topNavLeftSide,
          rightSideComponent: optionalComponents?.topNavRightSide
        })
      }), topNavProps && _jsx(ErrorBoundary, {
        fallback: null,
        onError: onError,
        children: _jsx(TopNav, {
          ...topNavProps,
          leftSideComponent: optionalComponents?.topNavLeftSide,
          rightSideComponent: optionalComponents?.topNavRightSide
        })
      })]
    }), _jsx(StyledAppContainer, {
      appBackgroundColor: uiShellContext?.appBackgroundColor,
      ref: uiShellAppAreaRef,
      tabIndex: 0,
      children: _jsx(InnerAppContainer, {
        isContentScrolled: isContentScrolled
      })
    })]
  });
};
const MemoizedWideUiShellContent = memo(WideUiShellContent);
MemoizedWideUiShellContent.displayName = "WideUiShellContent";
export { MemoizedWideUiShellContent as WideUiShellContent };
//# sourceMappingURL=WideUiShellContent.js.map