/* top-nav.tsx generated by @compiled/babel-plugin v0.38.1 */
import "./top-nav.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { useContext, useMemo } from 'react';
import { fg } from '@atlaskit/platform-feature-flags';
import { useSkipLink } from '../../../context/skip-links/skip-links-context';
import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
import { HasCustomThemeContext } from '../../top-nav-items/themed/has-custom-theme-context';
import { useCustomTheme } from '../../top-nav-items/themed/use-custom-theme';
import { bannerMountedVar, localSlotLayers, openLayerObserverTopNavEndNamespace, openLayerObserverTopNavMiddleNamespace, openLayerObserverTopNavStartNamespace, sideNavLiveWidthVar, topNavMountedVar, UNSAFE_topNavVar } from '../constants';
import { DangerouslyHoistSlotSizes } from '../hoist-slot-sizes-context';
import { DangerouslyHoistCssVarToDocumentRoot, HoistCssVarToLocalGrid } from '../hoist-utils';
import { useLayoutId } from '../id-utils';
import { useSideNavVisibility } from '../side-nav/use-side-nav-visibility';
import { useHasOpenLayers } from '../use-open-layer-count';

/**
 * Styles for the container for the top nav items.
 *
 * The background and border are applied to a different element for z-indexing reasons:
 *
 * - The items sit above the expanded side nav
 * - The background sits below the expanded side nav
 */
const styles = {
  root: "_nd5l8cbt _zulpu2gc _18zrutpp _179ria51 _1e0c11p5 _yv0e1mfv _4cvr1h6o _bfhkvuon _vchhusvi _4t3i1dgc _152t1nws _kqsw1if8 _1pbyegat _d6vu1bgi _1j8b18ax",
  fullHeightSidebar: "_18zrze3t _179rglyw _bfhkglyw _lcxvglyw _pdlmutpp",
  fullHeightSidebarExpanded: "_1rqt16a9 _jh1g18ax",
  fullHeightSidebarWithLayeringFixes: "_1pbycs5v _lcxv1wug _bfhkvuon _aetrb3bt _18postnw _1gufidpf _1czdidpf _g0nf3tht _1beue4h9 _uaeunqa1 _1cte1l7x",
  fullHeightSidebarWithLayeringFixesAndOpenLayer: "_1pby11wp"
};

/**
 * Styles for the visible 'bar' of the top nav, including background and border.
 *
 * This is on a lower z-index than the expanded side nav, and is separate to the top nav items which are above the expanded side nav.
 */
const backgroundStyles = {
  root: "_nd5l8cbt _179ria51 _1bsb1osq _4t3i1osq _bfhkvuon _vchhusvi _152t1nws _kqsw1if8 _lcxvglyw _1pbyegat",
  sideNavExpanded: "_hyzqcs5v"
};

/**
 * Namespaces to check for open layers within the top nav.
 * When there is an open layer in the top nav, the top nav is given a higher z-index than the side nav.
 *
 * Placed outside the component for stability, as the list is used as an effect dependency.
 */
const topNavOpenLayerNamespaces = [openLayerObserverTopNavStartNamespace, openLayerObserverTopNavMiddleNamespace, openLayerObserverTopNavEndNamespace];

/**
 * The top nav layout area. It will display at the top of the screen, below the banner if one is present.
 */
export function TopNav({
  children,
  xcss,
  height = 48,
  skipLinkLabel = 'Top Bar',
  testId,
  id: providedId,
  UNSAFE_theme
}) {
  const isFhsEnabled = useIsFhsEnabled();
  const dangerouslyHoistSlotSizes = useContext(DangerouslyHoistSlotSizes);
  const id = useLayoutId({
    providedId
  });
  useSkipLink(id, skipLinkLabel);
  const customTheme = useCustomTheme(UNSAFE_theme);

  /**
   * Note: this is no longer the case when fg('platform-dst-side-nav-layering-fixes') is enabled.
   *
   * With the full height sidebar we have a foreground and background element,
   * so we need to apply the custom theme styles to the correct element.
   *
   * The foreground element should not have a background color,
   * and the background element doesn't need any of the other styles.
   */
  const {
    backgroundStyle,
    foregroundStyle
  } = useMemo(() => {
    if (!customTheme.isEnabled) {
      return {
        backgroundStyle: undefined,
        foregroundStyle: undefined
      };
    }
    const {
      backgroundColor,
      ...foregroundStyle
    } = customTheme.style;
    return {
      backgroundStyle: {
        backgroundColor
      },
      foregroundStyle
    };
  }, [customTheme]);
  const {
    isExpandedOnDesktop
  } = useSideNavVisibility();
  const hasOpenPopup = useHasOpenLayers({
    namespaces: topNavOpenLayerNamespaces,
    type: 'popup'
  });
  return /*#__PURE__*/React.createElement(HasCustomThemeContext.Provider, {
    value: customTheme.isEnabled
  }, isFhsEnabled && !fg('platform-dst-side-nav-layering-fixes') && /*#__PURE__*/React.createElement("div", {
    "data-layout-slot": true,
    "aria-hidden": true
    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
    ,
    style: isFhsEnabled ? backgroundStyle : undefined,
    className: ax([backgroundStyles.root, isExpandedOnDesktop && backgroundStyles.sideNavExpanded])
  }), /*#__PURE__*/React.createElement("header", {
    id: id,
    "data-layout-slot": true,
    className: ax([styles.root, isFhsEnabled && styles.fullHeightSidebar, isFhsEnabled && fg('platform-dst-side-nav-layering-fixes') && styles.fullHeightSidebarWithLayeringFixes, hasOpenPopup && isFhsEnabled && fg('platform-dst-side-nav-layering-fixes') && styles.fullHeightSidebarWithLayeringFixesAndOpenLayer, isExpandedOnDesktop && isFhsEnabled && styles.fullHeightSidebarExpanded, xcss]),
    "data-testid": testId
    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
    ,
    style:
    // When the layering fixes are enabled, we no longer have separate elements for the foreground and background.
    isFhsEnabled && !fg('platform-dst-side-nav-layering-fixes') ? foregroundStyle : customTheme.isEnabled ? customTheme.style : undefined
  }, /*#__PURE__*/React.createElement(HoistCssVarToLocalGrid, {
    variableName: topNavMountedVar,
    value: height
  }), dangerouslyHoistSlotSizes &&
  /*#__PURE__*/
  // ------ START UNSAFE STYLES ------
  // These styles are only needed for the UNSAFE legacy use case for Jira + Confluence.
  // When they aren't needed anymore we can delete them wholesale.
  React.createElement(DangerouslyHoistCssVarToDocumentRoot, {
    variableName: UNSAFE_topNavVar,
    value: height
  })
  // ------ END UNSAFE STYLES ------
  , children));
}