import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { SoftScreenReaderOnly } from '../Accessibility';
import { SoftButtonToggle } from '../ButtonToggle';
import { TOGGLE_TYPES } from '../Toggle';
/**
 * Button groups are handled similarly to the way checkbox and radio groups are handled but made to look like buttons. They group multiple EuiButtonToggles and utilize the type="single" or "multi" prop to determine whether multiple or only single selections are allowed per group.
 
 * Stylistically, all button groups are the size of small buttons, do not stretch to fill the container, and typically should only be color="text" (default) or "primary". If you're just displaying a group of icons, add the prop isIconOnly.
 * @param className
 * @param buttonSize
 * @param color
 * @param idSelected
 * @param idToSelectedMap
 * @param isDisabled
 * @param isFullWidth
 * @param isIconOnly
 * @param name
 * @param legend
 * @param onChange
 * @param options
 * @param type
 * @param rest
 * @returns {*}
 * @constructor
 */
export const SoftButtonGroup = ({ className, buttonSize, color, idSelected, idToSelectedMap, isDisabled, isFullWidth, isIconOnly, name, legend, onChange, options, type, ...rest }) => {
    const classes = classNames('softButtonGroup', {
        'softButtonGroup--fullWidth': isFullWidth,
    }, className);
    let legendNode;
    if (legend) {
        legendNode = (React.createElement(SoftScreenReaderOnly, null,
            React.createElement("legend", null, legend)));
    }
    return (React.createElement("fieldset", null,
        legendNode,
        React.createElement("div", Object.assign({ className: classes }, rest), options.map((option, index) => {
            let isSelectedState;
            if (type === 'multi') {
                isSelectedState = idToSelectedMap[option.id] || false;
            }
            else {
                isSelectedState = option.id === idSelected;
            }
            return (React.createElement(SoftButtonToggle, { className: "softButtonGroup__button", color: color, fill: isSelectedState, iconSide: option.iconSide, iconType: option.iconType, id: option.id, isDisabled: isDisabled || option.isDisabled, isIconOnly: isIconOnly, isSelected: isSelectedState, key: index, label: option.label, name: option.name || name, onChange: () => onChange(option.id, option.value), size: buttonSize, toggleClassName: "softButtonGroup__toggle", type: type, value: option.value }));
        }))));
};
// @ts-ignore
SoftButtonGroup.propTypes = {
    options: PropTypes.arrayOf(PropTypes.shape({
        id: PropTypes.string.isRequired,
        label: PropTypes.string.isRequired,
        isDisabled: PropTypes.bool,
    })).isRequired,
    onChange: PropTypes.func.isRequired,
    /**
     * See `SoftButton`
     */
    color: PropTypes.string,
    /**
     * Most button groups should be the small button size,
     * but if you NEED to bump it to regular, change this to 'm'
     */
    buttonSize: PropTypes.string,
    /**
     * Hides the label from the button content and only displays the icon
     */
    isIconOnly: PropTypes.bool,
    isDisabled: PropTypes.bool,
    /**
     * Makes the whole group 100% of its parent
     */
    isFullWidth: PropTypes.bool,
    /**
     * Can only a "single" option be selected or "multi"ple?
     */
    type: PropTypes.oneOf(TOGGLE_TYPES),
    /**
     * Id of selected option for `type="single"`
     */
    idSelected: PropTypes.string,
    /**
     * Map of ids of selected options for `type="multi"`
     */
    idToSelectedMap: PropTypes.objectOf(PropTypes.bool),
    /**
     * Adds a hidden legend to the group for accessiblity
     */
    legend: PropTypes.string,
};
// @ts-ignore
SoftButtonGroup.defaultProps = {
    buttonSize: 's',
    color: 'text',
    idToSelectedMap: {},
    options: [],
    type: 'single',
};
//# sourceMappingURL=SoftButtonGroup.js.map