'use client';

import * as React from 'react';
import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
import useId from '@mui/utils/useId';
import GlobalStyles from '../GlobalStyles';
import useThemeWithoutDefault from '../useThemeWithoutDefault';

/**
 * This hook returns a `GlobalStyles` component that sets the CSS layer order (for server-side rendering).
 * Then on client-side, it injects the CSS layer order into the document head to ensure that the layer order is always present first before other Emotion styles.
 */
import { jsx as _jsx } from "react/jsx-runtime";
export default function useLayerOrder(theme) {
  var upperTheme = useThemeWithoutDefault();
  var id = useId() || '';
  var modularCssLayers = theme.modularCssLayers;
  var layerOrder = 'mui.global, mui.components, mui.theme, mui.custom, mui.sx';
  if (!modularCssLayers || upperTheme !== null) {
    // skip this hook if upper theme exists.
    layerOrder = '';
  } else if (typeof modularCssLayers === 'string') {
    layerOrder = modularCssLayers.replace(/mui(?!\.)/g, layerOrder);
  } else {
    layerOrder = "@layer ".concat(layerOrder, ";");
  }
  useEnhancedEffect(function () {
    var head = document.querySelector('head');
    if (!head) {
      return;
    }
    var firstChild = head.firstChild;
    if (layerOrder) {
      var _firstChild$hasAttrib;
      // Only insert if first child doesn't have data-mui-layer-order attribute
      if (firstChild && (_firstChild$hasAttrib = firstChild.hasAttribute) != null && _firstChild$hasAttrib.call(firstChild, 'data-mui-layer-order') && firstChild.getAttribute('data-mui-layer-order') === id) {
        return;
      }
      var styleElement = document.createElement('style');
      styleElement.setAttribute('data-mui-layer-order', id);
      styleElement.textContent = layerOrder;
      head.prepend(styleElement);
    } else {
      var _head$querySelector;
      (_head$querySelector = head.querySelector("style[data-mui-layer-order=\"".concat(id, "\"]"))) == null || _head$querySelector.remove();
    }
  }, [layerOrder, id]);
  if (!layerOrder) {
    return null;
  }
  return /*#__PURE__*/_jsx(GlobalStyles, {
    styles: layerOrder
  });
}