/* panel.tsx generated by @compiled/babel-plugin v0.38.1 */
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import "./panel.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { useCallback, useContext, useEffect, useRef, useState } from 'react';
import { media } from '@atlaskit/primitives/responsive';
import { useSkipLinkInternal } from '../../context/skip-links/skip-links-context';
import { contentHeightWhenFixed, contentInsetBlockStart, localSlotLayers, panelPanelSplitterId, panelVar, sideNavLiveWidthVar, UNSAFE_panelLayoutVar } from './constants';
import { DangerouslyHoistSlotSizes } from './hoist-slot-sizes-context';
import { DangerouslyHoistCssVarToDocumentRoot } from './hoist-utils';
import { useLayoutId } from './id-utils';
import { PanelSplitterProvider } from './panel-splitter/provider';
import { useSideNavRef } from './side-nav/element-context';
import { useResizingWidthCssVarOnRootElement } from './use-resizing-width-css-var-on-root-element';
import { useSafeDefaultWidth } from './use-safe-default-width';
var panelSplitterResizingVar = '--n_pnlRsz';
var fallbackDefaultWidth = 365;

/**
 * We typically use the `defaultWidth` as the minimum resizing width,
 * but for large default widths we fallback to a standard value.
 *
 * This standard value of `400px` is to align with the Global Preview Panels.
 */
var fallbackResizeMinWidth = 400;
var styles = {
  root: "_nd5l1b6c _10fph9n0 _vchhusvi _1pbykb7n _4t3ieqxy _kqsw1if8 _152timx3 _bfhk1bhr _1bsb1dxx _14b54rrg _4ap3vuon _1dhy1c6w _9sns1wug",
  border: "_191wglyw _16qs1cd0 _1w6e7r9e _scbpglyw",
  scrollContainer: "_1reo1wug _18m91wug _4t3i1osq",
  hidden: "_1e0cglyw"
};

/**
 * The Panel layout area is rendered to the right (inline end) of the Main area, or the Aside area if it is present.
 *
 * On small viewports (below 64rem, or 1024px), the Panel slot will become an overlay.
 *
 * You can optionally render a `PanelSplitter` as a child to make the panel area resizable.
 */
export function Panel(_ref) {
  var children = _ref.children,
    _ref$defaultWidth = _ref.defaultWidth,
    defaultWidthProp = _ref$defaultWidth === void 0 ? fallbackDefaultWidth : _ref$defaultWidth,
    _ref$label = _ref.label,
    label = _ref$label === void 0 ? 'Panel' : _ref$label,
    _ref$skipLinkLabel = _ref.skipLinkLabel,
    skipLinkLabel = _ref$skipLinkLabel === void 0 ? label : _ref$skipLinkLabel,
    testId = _ref.testId,
    providedId = _ref.id,
    xcss = _ref.xcss,
    _ref$hasBorder = _ref.hasBorder,
    hasBorder = _ref$hasBorder === void 0 ? true : _ref$hasBorder;
  var dangerouslyHoistSlotSizes = useContext(DangerouslyHoistSlotSizes);
  var id = useLayoutId({
    providedId: providedId
  });
  var defaultWidth = useSafeDefaultWidth({
    defaultWidthProp: defaultWidthProp,
    fallbackDefaultWidth: fallbackDefaultWidth,
    slotName: 'Panel'
  });

  /**
   * Don't show the skip link if the slot has 0 width.
   *
   * Remove `isHidden` usage after https://jplat.atlassian.net/browse/BLU-3951
   */
  useSkipLinkInternal({
    id: id,
    label: skipLinkLabel,
    isHidden: defaultWidth === 0
  });
  var ref = useRef(null);
  var _useState = useState(defaultWidth),
    _useState2 = _slicedToArray(_useState, 2),
    width = _useState2[0],
    setWidth = _useState2[1];
  // Used to track the previous value of the `defaultWidth` prop, for logging dev warnings when it changes.
  var defaultWidthRef = useRef(defaultWidth);

  /**
   * TODO: Remove this useEffect once the `width: 0` usage is removed from Jira.
   * It updates the width state based on changes to `defaultWidth`, as a temporary stopgap to support Jira's current usage.
   * https://jplat.atlassian.net/browse/BLU-3951
   */
  useEffect(function () {
    if (defaultWidthRef.current === defaultWidth) {
      return;
    }
    defaultWidthRef.current = defaultWidth;
    setWidth(defaultWidth);
    if (process.env.NODE_ENV !== 'production') {
      // eslint-disable-next-line no-console
      console.warn('Page Layout warning\n\n', 'The value of the `defaultWidth` prop on the `Panel` layout slot component has changed. This should not be changed after the component has been mounted.\n\n', 'In the future, changes to the `defaultWidth` prop will not be respected. It is only supported as a stopgap to enable migration from Nav3 to Nav4.\n\n');
    }
  }, [defaultWidth]);
  var sideNavRef = useSideNavRef();

  /**
   * The minimum width that the panel can be resized to by the user.
   *
   * We only use the `defaultWidth` up to a point to avoid huge panels.
   */
  var minWidth = Math.min(defaultWidth, fallbackResizeMinWidth);

  /**
   * Returns the bounds for resizing, evaluated lazily when needed.
   *
   * Defined separately to the slot bounds because the resizing bounds need to be resolvable to a pixel value,
   * and the panel's slot bounds use a complex CSS expression.
   */
  var getResizeBounds = useCallback(function () {
    var _sideNavRef$current$o, _sideNavRef$current;
    var sideNavWidth = (_sideNavRef$current$o = (_sideNavRef$current = sideNavRef.current) === null || _sideNavRef$current === void 0 ? void 0 : _sideNavRef$current.offsetWidth) !== null && _sideNavRef$current$o !== void 0 ? _sideNavRef$current$o : 0;
    /**
     * The panel should not resize larger than the page content, equivalent to the `Main` + `Aside` slots.
     *
     * This maximum width is equivalent to half the viewport width, after removing the sidebar width.
     */
    var maxWidth = Math.round((window.innerWidth - sideNavWidth) / 2);
    return {
      min: "".concat(minWidth, "px"),
      max: "".concat(maxWidth, "px")
    };
  }, [minWidth, sideNavRef]);
  var panelWidthSlotBounds = {
    min: "".concat(minWidth, "px"),
    // `sideNavLiveWidthVar` is not defined if the `SideNav` is not mounted, so we fallback to `0px`.
    max: "round(nearest, calc((100vw - var(".concat(sideNavLiveWidthVar, ", 0px)) / 2), 1px)")
  };
  var panelVariableWidth = "clamp(".concat(panelWidthSlotBounds.min, ", ").concat(width, "px, ").concat(panelWidthSlotBounds.max, ")");
  useResizingWidthCssVarOnRootElement({
    isEnabled: dangerouslyHoistSlotSizes,
    cssVar: panelSplitterResizingVar,
    panelId: panelPanelSplitterId
  });
  return /*#__PURE__*/React.createElement("section", {
    id: id,
    "data-layout-slot": true,
    "aria-label": label,
    className: ax([styles.root, defaultWidth === 0 && styles.hidden, hasBorder && styles.border, xcss]),
    style: _defineProperty(_defineProperty({}, panelVar, panelVariableWidth), '--minWidth', "".concat(minWidth, "px")),
    "data-testid": testId,
    ref: ref
  }, 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_panelLayoutVar,
    value: "0px",
    mediaQuery: media.above.lg,
    responsiveValue: "var(".concat(panelSplitterResizingVar, ", ").concat(panelVariableWidth, ")")
  })
  // ------ END UNSAFE STYLES ------
  , /*#__PURE__*/React.createElement(PanelSplitterProvider, {
    panelId: panelPanelSplitterId,
    panelRef: ref,
    panelWidth: width,
    onCompleteResize: setWidth,
    getResizeBounds: getResizeBounds,
    resizingCssVar: panelSplitterResizingVar,
    position: "start"
  }, /*#__PURE__*/React.createElement("div", {
    className: ax([styles.scrollContainer])
  }, children)));
}