var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React, { forwardRef, Children, isValidElement, cloneElement } from 'react';
import { isFragment } from 'react-is';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import isValueSelected from '../../../utilities/isValueSelected';
import { withStyles } from '@material-ui/core/styles';
import { capitalize } from '@material-ui/core/utils';
import { isDevelopment } from '../../../utilities/env';
export const styles = (theme) => ({
    /* Styles applied to the root element. */
    root: {
        display: 'inline-flex',
        padding: 0
    },
    /* Styles applied to the root element if `orientation="vertical"`. */
    vertical: {
        flexDirection: 'column',
    },
    /* Styles applied to the children. */
    grouped: {},
    /* Styles applied to the children if `orientation="horizontal"`. */
    groupedHorizontal: {
        // '&:not(:first-child)': {
        //   marginLeft: -1,
        //   borderLeft: '1px solid ',
        //   borderTopLeftRadius: 25,
        //   borderBottomLeftRadius: 25,
        // },
        // '&:not(:last-child)': {
        //   borderTopRightRadius: 25,
        //   borderBottomRightRadius: 25,
        // },
        borderRadius: 25,
        padding: 0,
        paddingRight: 16,
        '&:not(:first-child)': {
            marginTop: 16,
            borderRadius: 25,
            paddingRight: 16,
            padding: 0
        },
        '&:not(:last-child)': {
            padding: 0,
            borderRadius: 25,
            paddingRight: 16,
        },
    },
    /* Styles applied to the children if `orientation="vertical"`. */
    groupedVertical: {
        borderRadius: 25,
        padding: 0,
        paddingRight: 16,
        '&:not(:first-child)': {
            marginTop: 16,
            borderRadius: 25,
            paddingRight: 16,
            padding: 0
        },
        '&:not(:last-child)': {
            padding: 0,
            borderRadius: 25,
            paddingRight: 16,
        },
    },
});
const AmbientToggleButtonGroupDefault = forwardRef(function AmbientToggleButton(props, ref) {
    const { children, classes, className, exclusive = false, onChange, orientation = 'horizontal', size = 'medium', value } = props, other = __rest(props, ["children", "classes", "className", "exclusive", "onChange", "orientation", "size", "value"]);
    const handleChange = (event, buttonValue) => {
        if (!onChange) {
            return;
        }
        const index = value && value.indexOf(buttonValue);
        let newValue;
        if (value && index >= 0) {
            newValue = value.slice();
            newValue.splice(index, 1);
        }
        else {
            newValue = value ? value.concat(buttonValue) : [buttonValue];
        }
        onChange(event, newValue);
    };
    const handleExclusiveChange = (event, buttonValue) => {
        if (!onChange) {
            return;
        }
        onChange(event, value === buttonValue ? null : buttonValue);
    };
    return (React.createElement("div", Object.assign({ role: "group", className: clsx(classes.root, {
            [classes.vertical]: orientation === 'vertical',
        }, className), ref: ref }, other), Children.map(children, (child) => {
        if (!isValidElement(child)) {
            return null;
        }
        // eslint-disable-next-line custom-rules/no-process-env
        if (isDevelopment()) {
            if (isFragment(child)) {
                console.error([
                    "Material-UI: The ToggleButtonGroup component doesn't accept a Fragment as a child.",
                    'Consider providing an array instead.',
                ].join('\n'));
            }
        }
        return cloneElement(child, {
            className: clsx(classes.grouped, classes[`grouped${capitalize(orientation)}`], child.props.className),
            onChange: exclusive ? handleExclusiveChange : handleChange,
            selected: child.props.selected === undefined
                ? isValueSelected(child.props.value, value)
                : child.props.selected,
            size: child.props.size || size,
        });
    })));
});
AmbientToggleButtonGroupDefault.propTypes = {
    // ----------------------------- Warning --------------------------------
    // | These PropTypes are generated from the TypeScript type definitions |
    // |     To update them edit the d.ts file and run "yarn proptypes"     |
    // ----------------------------------------------------------------------
    /**
     * The content of the button.
     */
    children: PropTypes.node,
    /**
     * Override or extend the styles applied to the component.
     * See [CSS API](#css) below for more details.
     */
    classes: PropTypes.object,
    /**
     * @ignore
     */
    className: PropTypes.string,
    /**
     * If `true`, only allow one of the child ToggleButton values to be selected.
     */
    exclusive: PropTypes.bool,
    /**
     * Callback fired when the value changes.
     *
     * @param {object} event The event source of the callback.
     * @param {any} value of the selected buttons. When `exclusive` is true
     * this is a single value; when false an array of selected values. If no value
     * is selected and `exclusive` is true the value is null; when false an empty array.
     */
    onChange: PropTypes.func,
    /**
     * The group orientation (layout flow direction).
     */
    orientation: PropTypes.oneOf(['horizontal', 'vertical']),
    /**
     * The size of the buttons.
     */
    size: PropTypes.oneOf(['large', 'medium', 'small']),
    /**
     * The currently selected value within the group or an array of selected
     * values when `exclusive` is false.
     *
     * The value must have reference equality with the option in order to be selected.
     */
    value: PropTypes.any,
};
/**
 * Explicitly cast the HOC to any to avoid non-portable inferred React types in declaration output.
 * @type {any}
 */
const AmbientToggleButtonGroupDefaultExport = withStyles(styles, { name: 'MuiToggleButtonGroup' })(AmbientToggleButtonGroupDefault);
export default AmbientToggleButtonGroupDefaultExport;
//# sourceMappingURL=AmbientToggleButtonGroupDefault.js.map