"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.defaultComponentProps = exports.UiShell = void 0;
var _react = require("react");
var _reactErrorBoundary = require("react-error-boundary");
var _OdysseyProvider = require("../OdysseyProvider.cjs");
var _NarrowUiShellContent = require("./NarrowUiShellContent.cjs");
var _UiShellProvider = require("./UiShellProvider.cjs");
var _useUiShellBreakpoints = require("./useUiShellBreakpoints.cjs");
var _WideUiShellContent = require("./WideUiShellContent.cjs");
var _jsxRuntime = require("react/jsx-runtime");
/*!
 * 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 defaultComponentProps = exports.defaultComponentProps = {
  sideNavProps: undefined,
  topNavProps: undefined
};
const errorComponent = (0, _jsxRuntime.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] = (0, _react.useState)(defaultComponentProps);
  const activeBreakpoint = (0, _useUiShellBreakpoints.useUiShellBreakpoints)(breakpointConfig);
  (0, _react.useEffect)(() => {
    const unsubscribe = subscribeToPropChanges(componentProps => {
      setComponentProps(componentProps || defaultComponentProps);
    });
    onSubscriptionCreated();
    return () => {
      unsubscribe();
    };
  }, [onSubscriptionCreated, subscribeToPropChanges]);
  return activeBreakpoint === "none" ? null : (0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {
    fallback: errorComponent,
    onError: onError,
    children: (0, _jsxRuntime.jsx)(_OdysseyProvider.OdysseyProvider, {
      emotionRootElement: uiShellStylesElement,
      hasCssBaseline: true,
      shadowRootElement: uiShellAppElement,
      children: (0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {
        fallback: errorComponent,
        onError: onError,
        children: (0, _jsxRuntime.jsxs)(_UiShellProvider.UiShellProvider, {
          appBackgroundColor: appBackgroundColor,
          appBackgroundContrastMode: appBackgroundContrastMode,
          closeSideNavMenu: closeSideNavMenu,
          sideNavBackgroundColor: sideNavBackgroundColor,
          sideNavBackgroundContrastColor: sideNavBackgroundContrastColor,
          subscribeToCloseRightSideMenu: subscribeToCloseRightSideMenu,
          subscribeToCloseSideNavMenu: subscribeToCloseSideNavMenu,
          topNavBackgroundColor: topNavBackgroundColor,
          children: [activeBreakpoint === "narrow" && (0, _jsxRuntime.jsx)(_NarrowUiShellContent.NarrowUiShellContent, {
            ...componentProps,
            appElement: appElement,
            appElementScrollingMode: appElementScrollingMode,
            hasSideNavProps: Boolean(componentProps.sideNavProps),
            hasStandardAppContentPadding: hasStandardAppContentPadding,
            initialVisibleSections: initialVisibleSections,
            onError: onError,
            optionalComponents: optionalComponents
          }), (activeBreakpoint === "medium" || activeBreakpoint === "wide") && (0, _jsxRuntime.jsx)(_WideUiShellContent.WideUiShellContent, {
            ...componentProps,
            ...{
              sideNavProps: {
                ...componentProps.sideNavProps,
                hasSessionStorageState: activeBreakpoint === "wide",
                isCollapsed: activeBreakpoint === "medium" || componentProps.sideNavProps?.isCollapsed,
                isCollapsible: activeBreakpoint === "medium" || componentProps.sideNavProps?.isCollapsible
              }
            },
            appElement: appElement,
            appElementScrollingMode: appElementScrollingMode,
            hasSideNavProps: Boolean(componentProps.sideNavProps),
            hasStandardAppContentPadding: hasStandardAppContentPadding,
            initialVisibleSections: initialVisibleSections,
            onError: onError,
            optionalComponents: optionalComponents
          })]
        })
      })
    })
  });
};
const MemoizedUiShell = exports.UiShell = (0, _react.memo)(UiShell);
MemoizedUiShell.displayName = "UiShell";
//# sourceMappingURL=UiShell.cjs.map