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

import { useState, useLayoutEffect, useRef } from 'react';
import classNames from 'classnames';
import Button from '../Button';
import ButtonGroup from '../ButtonGroup';
import { jsx as _jsx } from "react/jsx-runtime";
const ButtonGroupControl = _ref => {
  let {
    buttons,
    selectedValues,
    onClick,
    ghost,
    monospaced,
    isResponsive,
    baseClassName
  } = _ref;
  const buttonsRef = useRef([]);
  const [monoWidth, setMonoWidth] = useState(0);
  useLayoutEffect(() => {
    if (!monospaced) return;
    const widths = buttonsRef.current.map(button => button.getBoundingClientRect().width);
    const maxWidth = Math.max(...widths);
    if (monoWidth !== maxWidth) {
      setMonoWidth(maxWidth);
    }
  }, [monospaced, monoWidth]);
  return /*#__PURE__*/_jsx(ButtonGroup, {
    className: `${baseClassName}__button-group`,
    children: buttons.map((_ref2, index) => {
      let {
        value,
        title,
        style = {},
        ...buttonProps
      } = _ref2;
      const shouldApplyMonoWidth = !isResponsive && monospaced && monoWidth;
      const buttonStyle = {
        width: shouldApplyMonoWidth ? monoWidth : style.width,
        ...style
      };
      return /*#__PURE__*/_jsx(Button, {
        ref: node => {
          index === 0 && (buttonsRef.current = []);
          node && buttonsRef.current.push(node);
        },
        selected: selectedValues.includes(value),
        ghost: ghost,
        onClick: () => onClick(value),
        ...buttonProps,
        className: classNames(buttonProps.className, `${baseClassName}__button`),
        style: buttonStyle,
        children: title
      }, `${value}`);
    })
  });
};
export default ButtonGroupControl;