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

import { useState, useContext } from 'react';
import classNames from 'classnames';
import Measure from 'react-measure';
import { CLS_PREFIX } from '../../constants';
import VerticalContext, { VERTICAL_BREAKPOINT } from '../VerticalContext';
import { jsx as _jsx } from "react/jsx-runtime";
/**
 * `Columns` component is used for creating of multi-column layouts.
 * @since 2.6.0
 */
const Columns = _ref => {
  let {
    baseClassName = `${CLS_PREFIX}columns`,
    className,
    children,
    vertical: verticalProp,
    gap,
    ...props
  } = _ref;
  // eslint-disable-next-line prefer-const
  let [vertical, setVertical] = useState(false);
  const verticalContext = useContext(VerticalContext);
  if (verticalProp === undefined) {
    verticalProp = typeof verticalContext === 'undefined' ? VERTICAL_BREAKPOINT : verticalContext;
  }
  if (typeof verticalProp === 'boolean') {
    vertical = verticalProp;
  }
  const handleResize = _ref2 => {
    let {
      bounds
    } = _ref2;
    setVertical(bounds.width < verticalProp);
  };
  const createRoot = measureRef => /*#__PURE__*/_jsx("div", {
    ref: measureRef,
    className: classNames(baseClassName, {
      [`${baseClassName}--vertical`]: vertical,
      [`${baseClassName}--gap-${gap}`]: gap
    }, className),
    ...props,
    children: /*#__PURE__*/_jsx(VerticalContext.Provider, {
      value: vertical,
      children: children
    })
  });
  if (typeof verticalProp === 'number') {
    return /*#__PURE__*/_jsx(Measure, {
      bounds: true,
      onResize: handleResize,
      children: _ref3 => {
        let {
          measureRef
        } = _ref3;
        return createRoot(measureRef);
      }
    });
  }
  return createRoot();
};
export default Columns;