/* root.tsx generated by @compiled/babel-plugin v0.38.1 */
import "./root.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { useEffect, useRef } from 'react';
import { OpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
import { fg } from '@atlaskit/platform-feature-flags';
import { SkipLinksProvider } from '../../context/skip-links/skip-links-provider';
import { TopNavStartProvider } from '../../context/top-nav-start/top-nav-start-context-provider';
import { useIsFhsEnabled } from '../fhs-rollout/use-is-fhs-enabled';
import { sideNavContentScrollTimelineVar } from './constants';
import { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';
import { SideNavElementProvider } from './side-nav/element-context';
import { IsSideNavShortcutEnabledProvider } from './side-nav/is-side-nav-shortcut-enabled-context';
import { SideNavToggleButtonProvider } from './side-nav/toggle-button-provider';
import { SideNavVisibilityProvider } from './side-nav/visibility-provider';

// ID of the root element that the banner and top bar slots hoist their sizes to. Only internally exported.
export const gridRootId = 'unsafe-design-system-page-layout-root';
const styles = {
  root: "_1e0c11p5 _1tke1kxc _1lmcq9em _yv0ei47z _2z0516ab _1ciragmp _12fkuz0r _12qzrxre _1rqt70if _xkmgbaui _jbc7rxre _tyve1jg8",
  sideNavScrollTimeline: "_10iwgc9s"
};

/**
 * The root component of the navigation system. It wraps the underlying components with the necessary contexts allowing to use certain data and hooks
 * @param skipLinksLabel - The very first element of the layout is a skip links container that can be accessed by pressing Tab button and holds the links to the other sections of the layout thus improving accessibility. This parameter defines the header text for this container
 */
export function Root({
  children,
  xcss,
  UNSAFE_dangerouslyHoistSlotSizes = false,
  skipLinksLabel = 'Skip to:',
  testId,
  defaultSideNavCollapsed,
  isSideNavShortcutEnabled = false
}) {
  const ref = useRef(null);
  const isFhsEnabled = useIsFhsEnabled();
  useEffect(() => {
    if (process.env.NODE_ENV !== 'production') {
      const IGNORED_ELEMENTS = ['SCRIPT', 'STYLE'];
      if (ref.current) {
        Array.from(ref.current.children).forEach(child => {
          if (!IGNORED_ELEMENTS.includes(child.tagName) && !child.hasAttribute('data-layout-slot')) {
            // eslint-disable-next-line no-console
            console.error(`Page Layout Error

This element has been forcibly hidden:

`, child, `

An element was rendered as a child of the page layout root that isn't a page layout component! Resolve this error by moving it into a page layout component.

This message will not be displayed in production.
`);
          }
        });
      }
    }
  }, []);
  return /*#__PURE__*/React.createElement(SideNavVisibilityProvider, {
    defaultCollapsed: defaultSideNavCollapsed
  }, /*#__PURE__*/React.createElement(SideNavToggleButtonProvider, null, /*#__PURE__*/React.createElement(SideNavElementProvider, null, /*#__PURE__*/React.createElement(IsSideNavShortcutEnabledProvider, {
    isSideNavShortcutEnabled: isSideNavShortcutEnabled
  }, /*#__PURE__*/React.createElement(TopNavStartProvider, null, /*#__PURE__*/React.createElement(OpenLayerObserver, null, /*#__PURE__*/React.createElement(DangerouslyHoistSlotSizes.Provider, {
    value: UNSAFE_dangerouslyHoistSlotSizes
  }, /*#__PURE__*/React.createElement(SkipLinksProvider, {
    label: skipLinksLabel,
    testId: testId
  }, /*#__PURE__*/React.createElement("div", {
    ref: ref,
    className: ax([styles.root, isFhsEnabled && fg('platform-dst-side-nav-layering-fixes') && styles.sideNavScrollTimeline, xcss]),
    id: gridRootId,
    "data-testid": testId
  }, children)))))))));
}