/* top-nav.tsx generated by @compiled/babel-plugin v0.38.1 */
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["backgroundColor"];
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 { HasCustomThemeContext } from '../../top-nav-items/themed/has-custom-theme-context';
import { useCustomTheme } from '../../top-nav-items/themed/use-custom-theme';
import { bannerMountedVar, localSlotLayers, 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';
/**
 * 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
 */
var styles = {
  root: "_nd5l8cbt _zulpu2gc _18zrutpp _179ria51 _1e0c11p5 _yv0e1mfv _4cvr1h6o _bfhkvuon _vchhusvi _4t3i1dgc _152t1nws _kqsw1if8 _1pbyegat _d6vu1bgi _1j8b18ax",
  fullHeightSidebar: "_179rglyw _bozgze3t _y4tize3t _bfhkglyw _lcxvglyw _pdlmutpp",
  fullHeightSidebarExpanded: "_1rqt16a9 _jh1g18ax"
};

/**
 * 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.
 */
var backgroundStyles = {
  root: "_nd5l8cbt _179ria51 _1bsb1osq _4t3i1osq _bfhkvuon _vchhusvi _152t1nws _kqsw1if8 _lcxvglyw _1pbyegat",
  sideNavExpanded: "_hyzqcs5v"
};

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

  /**
   * 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.
   */
  var _useMemo = useMemo(function () {
      if (!customTheme.isEnabled) {
        return {
          backgroundStyle: undefined,
          foregroundStyle: undefined
        };
      }
      var _customTheme$style = customTheme.style,
        backgroundColor = _customTheme$style.backgroundColor,
        foregroundStyle = _objectWithoutProperties(_customTheme$style, _excluded);
      return {
        backgroundStyle: {
          backgroundColor: backgroundColor
        },
        foregroundStyle: foregroundStyle
      };
    }, [customTheme]),
    backgroundStyle = _useMemo.backgroundStyle,
    foregroundStyle = _useMemo.foregroundStyle;
  var _useSideNavVisibility = useSideNavVisibility(),
    isExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop;
  return /*#__PURE__*/React.createElement(HasCustomThemeContext.Provider, {
    value: customTheme.isEnabled
  }, fg('navx-full-height-sidebar') && /*#__PURE__*/React.createElement("div", {
    "data-layout-slot": true,
    "aria-hidden": true
    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
    ,
    style: fg('navx-full-height-sidebar') ? backgroundStyle : undefined,
    className: ax([backgroundStyles.root, isExpandedOnDesktop && backgroundStyles.sideNavExpanded])
  }), /*#__PURE__*/React.createElement("header", {
    id: id,
    "data-layout-slot": true,
    className: ax([styles.root, fg('navx-full-height-sidebar') && styles.fullHeightSidebar, isExpandedOnDesktop && fg('navx-full-height-sidebar') && styles.fullHeightSidebarExpanded, xcss]),
    "data-testid": testId
    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
    ,
    style: fg('navx-full-height-sidebar') ? 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));
}