/*!
 * 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 { memo, useEffect, useState } from "react";
import { ErrorBoundary } from "react-error-boundary";
import { OdysseyProvider } from "../OdysseyProvider.js";
import { NarrowUiShellContent } from "./NarrowUiShellContent.js";
import { UiShellProvider } from "./UiShellProvider.js";
import { useUiShellBreakpoints } from "./useUiShellBreakpoints.js";
import { WideUiShellContent } from "./WideUiShellContent.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const defaultComponentProps = {
  sideNavProps: undefined,
  topNavProps: undefined
};
const errorComponent = _jsx("div", {
  "data-error": true
});
const UiShell = ({
  appBackgroundColor,
  appBackgroundContrastMode,
  appElement,
  appElementScrollingMode,
  breakpointConfig,
  closeSideNavMenu,
  hasStandardAppContentPadding,
  initialVisibleSections,
  onError = console.error,
  onSubscriptionCreated,
  optionalComponents,
  sideNavBackgroundColor,
  sideNavBackgroundContrastColor,
  subscribeToCloseRightSideMenu,
  subscribeToCloseSideNavMenu,
  subscribeToPropChanges,
  topNavBackgroundColor,
  uiShellAppElement,
  uiShellStylesElement
}) => {
  const [componentProps, setComponentProps] = useState(defaultComponentProps);
  const activeBreakpoint = useUiShellBreakpoints(breakpointConfig);
  if (componentProps.sideNavProps?.logoProps && componentProps.logoProps) {
    throw new Error("Unified UI Shell: You passed both `logoProps` and `sideNavProps.logoProps` as component props. Please only use the top-level `logoProps` instead.");
  }
  useEffect(() => {
    const unsubscribe = subscribeToPropChanges(componentProps => {
      setComponentProps(componentProps || defaultComponentProps);
    });
    onSubscriptionCreated();
    return () => {
      unsubscribe();
    };
  }, [onSubscriptionCreated, subscribeToPropChanges]);
  return activeBreakpoint === "none" ? null : _jsx(ErrorBoundary, {
    fallback: errorComponent,
    onError: onError,
    children: _jsx(OdysseyProvider, {
      emotionRootElement: uiShellStylesElement,
      hasCssBaseline: true,
      shadowRootElement: uiShellAppElement,
      children: _jsx(ErrorBoundary, {
        fallback: errorComponent,
        onError: onError,
        children: _jsxs(UiShellProvider, {
          appBackgroundColor: appBackgroundColor,
          appBackgroundContrastMode: appBackgroundContrastMode,
          closeSideNavMenu: closeSideNavMenu,
          sideNavBackgroundColor: sideNavBackgroundColor,
          sideNavBackgroundContrastColor: sideNavBackgroundContrastColor,
          subscribeToCloseRightSideMenu: subscribeToCloseRightSideMenu,
          subscribeToCloseSideNavMenu: subscribeToCloseSideNavMenu,
          topNavBackgroundColor: topNavBackgroundColor,
          children: [activeBreakpoint === "narrow" && _jsx(NarrowUiShellContent, {
            ...componentProps,
            appElement: appElement,
            appElementScrollingMode: appElementScrollingMode,
            hasSideNavProps: Boolean(componentProps.sideNavProps),
            hasStandardAppContentPadding: hasStandardAppContentPadding,
            initialVisibleSections: initialVisibleSections,
            onError: onError,
            optionalComponents: optionalComponents
          }), (activeBreakpoint === "medium" || activeBreakpoint === "wide") && _jsx(WideUiShellContent, {
            ...componentProps,
            ...{
              sideNavProps: {
                ...componentProps.sideNavProps,
                hasSessionStorageState: activeBreakpoint === "wide",
                isCollapsed: activeBreakpoint === "medium" || componentProps.sideNavProps?.isCollapsed,
                isCollapsible: activeBreakpoint === "medium" || componentProps.sideNavProps?.isCollapsible,
                logoProps: componentProps.sideNavProps?.logoProps || componentProps.logoProps
              }
            },
            appElement: appElement,
            appElementScrollingMode: appElementScrollingMode,
            hasSideNavProps: Boolean(componentProps.sideNavProps),
            hasStandardAppContentPadding: hasStandardAppContentPadding,
            initialVisibleSections: initialVisibleSections,
            onError: onError,
            optionalComponents: optionalComponents
          })]
        })
      })
    })
  });
};
const MemoizedUiShell = memo(UiShell);
MemoizedUiShell.displayName = "UiShell";
export { MemoizedUiShell as UiShell };
//# sourceMappingURL=UiShell.js.map