/* side-nav-content.tsx generated by @compiled/babel-plugin v0.38.1 */
import "./side-nav-content.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { forwardRef, useMemo, useRef } from 'react';
import mergeRefs from '@atlaskit/ds-lib/merge-refs';
import { fg } from '@atlaskit/platform-feature-flags';
import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
import { sideNavContentScrollTimelineVar } from '../constants';
import { useSideNavVisibility } from './use-side-nav-visibility';

/**
 * The main content of the side nav, filling up the middle section. It acts as a scroll container.
 *
 * It will grow to take up the available space in the side nav — this is used to push the footer to the
 * bottom of the side nav.
 */
export var SideNavContent = /*#__PURE__*/forwardRef(_SideNavContent);

// Placing this const below the function breaks Compiled!
var styles = {
  scrollContainer: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo1wug _18m91wug",
  paddingContainer: "_1q51utpp _y4tiutpp _85i5utpp _bozgutpp"
};

/**
 * Using CSS scroll-driven animations to apply a scrolled indicator border.
 *
 * This approach is better for SSR, as some apps like Confluence will apply the
 * initial scroll position of the side nav content using JS before hydration.
 *
 * If we applied the border through React state it would only appear after hydration,
 * whereas this CSS approach should show even before hydration.
 */
var scrolledBorder = null;
var scrollTimelineVar = '--sNcst';
var fullHeightSidebarStyles = {
  scrollContainer: "_1un9baqb _21o1gc9s _j7hq4n8p",
  scrollContainerWithLayeringFixes: "_1sfqgc9s _1q1x1ule _8pm2gc9s _1gd94n8p"
};
function _SideNavContent(_ref, forwardedRef) {
  var children = _ref.children,
    testId = _ref.testId;
  var isFhsEnabled = useIsFhsEnabled();
  var internalRef = useRef(null);
  var mergedRef = useMemo(function () {
    return mergeRefs([internalRef, forwardedRef]);
  }, [forwardedRef]);
  var _useSideNavVisibility = useSideNavVisibility(),
    isExpandedOnDesktop = _useSideNavVisibility.isExpandedOnDesktop;
  return /*#__PURE__*/React.createElement("div", {
    ref: isFhsEnabled ? mergedRef : forwardedRef,
    "data-testid": testId,
    className: ax([styles.scrollContainer, isFhsEnabled && !fg('platform-dst-side-nav-layering-fixes') && fullHeightSidebarStyles.scrollContainer, isFhsEnabled && isExpandedOnDesktop && fg('platform-dst-side-nav-layering-fixes') && fullHeightSidebarStyles.scrollContainerWithLayeringFixes])
  }, /*#__PURE__*/React.createElement("div", {
    className: ax([styles.paddingContainer])
  }, children));
}