import React, { isValidElement } from 'react';
import uniqueId from 'lodash/uniqueId';
import Radio from '../Radio/Radio';
import { st, classes } from './RadioGroup.st.css.js';
import { dataHooks } from './constants';
/**
 * component for easy radio group creation.
 *
 * similar to HTML `<input type="radio"/>` except you don't need to handle `name` or click handlers
 */
class RadioGroup extends React.PureComponent {
    constructor() {
        super(...arguments);
        this.uniqueName = uniqueId('RadioGroup_');
    }
    _getSpacing(index) {
        const { display: orientation, spacing, fullWidth } = this.props;
        if (index > 0) {
            if (orientation === 'vertical') {
                return { marginTop: spacing };
            }
            if (orientation === 'horizontal' && !fullWidth) {
                return { marginInlineStart: spacing };
            }
        }
        return {};
    }
    render() {
        const { dataHook, className, name, onChange = () => { }, disabledRadios = [], value, vAlign, display: orientation, selectionArea, selectionAreaSkin, selectionAreaPadding, fullWidth, size, } = this.props;
        const uniqueName = name || this.uniqueName;
        return (React.createElement("div", { role: "radiogroup", "data-hook": dataHook, className: st(classes.root, {
                orientation,
                fullWidth,
                size,
            }, className), "data-display": orientation, style: fullWidth && orientation === 'horizontal'
                ? {
                    // @ts-expect-error
                    gridTemplateColumns: `repeat(${this.props.children?.length}, 1fr)`,
                    columnGap: this.props?.spacing ?? '6px',
                }
                : undefined }, React.Children.map(this.props.children, (radio, index) => {
            if (!radio || !isValidElement(radio)) {
                return radio;
            }
            const checked = radio.props.value === value;
            const radioName = radio.props.name || uniqueName;
            const disabled = this.props.disabled ||
                disabledRadios.indexOf(radio.props.value) !== -1;
            const radioDataHook = `${dataHooks.RadioContainer}-${radio.props.value}`;
            return (React.createElement("div", { className: st(classes.optionContainer, {
                    selectionArea,
                    selectionAreaSkin,
                    checked,
                    disabled,
                }), "data-hook": dataHooks.RadioOptionContainer, style: this._getSpacing(index) },
                React.createElement("div", { className: classes.radioContainer, "data-hook": radioDataHook },
                    React.createElement(Radio, { style: {
                            minHeight: '24px',
                            padding: selectionAreaPadding,
                        }, className: classes.radio, dataHook: radio.props.dataHook, value: radio.props.value, name: radioName, id: `${radioName}_${index}`, onChange: () => onChange(radio.props.value), onMouseEnter: radio.props.onMouseEnter, onMouseLeave: radio.props.onMouseLeave, alignItems: vAlign, disabled: disabled, checked: checked, label: radio.props.children, size: size })),
                radio.props.content && (React.createElement("div", { className: classes.content, "data-hook": dataHooks.RadioContent }, radio.props.content))));
        })));
    }
}
RadioGroup.Radio = Radio;
RadioGroup.displayName = 'RadioGroup';
RadioGroup.defaultProps = {
    disabledRadios: [],
    onChange: () => { },
    value: '',
    vAlign: 'center',
    display: 'vertical',
    selectionArea: 'none',
    selectionAreaSkin: 'filled',
    fullWidth: false,
    size: 'medium',
};
export default RadioGroup;
//# sourceMappingURL=RadioGroup.js.map