// Copyright 1999-2023. Plesk International GmbH. All rights reserved.

import { isValidElement, cloneElement, createContext, useContext } from 'react';
import { createPortal } from 'react-dom';
import classNames from 'classnames';
import { CLS_PREFIX } from '../../constants';
import { jsx as _jsx } from "react/jsx-runtime";
const LevelContext = /*#__PURE__*/createContext(0);
export const PortalContext = /*#__PURE__*/createContext(undefined);
/**
 * `Layer` component.
 */
const Layer = _ref => {
  let {
    baseClassName = `${CLS_PREFIX}layer`,
    className,
    children,
    innerRef,
    level = 0,
    ...props
  } = _ref;
  const parentLevel = useContext(LevelContext);
  const container = useContext(PortalContext) || document.body;
  const renderChildren = () => {
    if ( /*#__PURE__*/isValidElement(children)) {
      return /*#__PURE__*/cloneElement(children, {
        style: {
          ...children.props.style,
          zIndex: parentLevel + level
        }
      });
    }
    return children;
  };
  return /*#__PURE__*/createPortal( /*#__PURE__*/_jsx(LevelContext.Provider, {
    value: parentLevel + level,
    children: /*#__PURE__*/_jsx("div", {
      className: classNames(baseClassName, className),
      ref: innerRef,
      ...props,
      children: renderChildren()
    })
  }), container);
};
export default Layer;