// Copyright 1999-2025. WebPros International GmbH. All rights reserved.

import { useRef, useState, useMemo } from 'react';
import classNames from 'classnames';
import { CLS_PREFIX } from '../../constants';
import RegistryContext, { useRegistry } from './RegistryContext';
import DistractionFreeModeContext from '../DistractionFreeModeContext';
import { toToolbarItems } from './ToolbarItem';
import { useSqueeze } from '../../hooks';
import { jsx as _jsx } from "react/jsx-runtime";
/**
 * `Toolbar` component is a panel containing various instruments used for managing the contents of a large content block.
 * Toolbar is located on top of the managed content block.
 * It typically consists of three main parts: controls that add new elements, controls that work with existing elements,
 * and controls for changing the way the content block looks.
 * @since 0.0.57
 */
const Toolbar = _ref => {
  let {
    children,
    className,
    baseClassName = `${CLS_PREFIX}toolbar`,
    ...props
  } = _ref;
  const containerRef = useRef(null);
  const [isDistractionFreeModeEnabled, setIsDistractionFreeModeEnabled] = useState(false);
  const distractionFreeModeContextValue = useMemo(() => ({
    enabled: isDistractionFreeModeEnabled,
    toggle: () => setIsDistractionFreeModeEnabled(current => !current)
  }), [isDistractionFreeModeEnabled]);
  const registry = useRegistry();
  useSqueeze({
    ref: containerRef,
    compact: () => registry.compact(),
    expand: () => registry.expand()
  });
  const toolbarItems = toToolbarItems(children);
  return /*#__PURE__*/_jsx("div", {
    ref: containerRef,
    className: classNames(baseClassName, className),
    ...props,
    children: /*#__PURE__*/_jsx(RegistryContext.Provider, {
      value: registry,
      children: /*#__PURE__*/_jsx(DistractionFreeModeContext.Provider, {
        value: distractionFreeModeContextValue,
        children: toolbarItems
      })
    })
  });
};
export default Toolbar;