var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
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 from 'react';
import { addSubcomponents } from '../../utils/addSubcomponents';
import { Tooltip as TooltipBase } from '../Tooltip';
import { StyledContainer, StyledLabel, StyledSegment, } from './SegmentedController.styles';
function noop() { }
function isSegment(node) {
    return typeof node === 'object' && node.type === Segment;
}
var SegmentedController_ = React.forwardRef(function SegmentedController(_a, ref) {
    var children = _a.children, className = _a.className, _b = _a.block, block = _b === void 0 ? false : _b, active = _a.active, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.onChange, onChange = _d === void 0 ? noop : _d, props = __rest(_a, ["children", "className", "block", "active", "disabled", "onChange"]);
    return (React.createElement(StyledContainer, __assign({ block: block, ref: ref }, props), React.Children.toArray(children)
        .filter(function (child) { return isSegment(child); })
        .map(function (child, i) {
        return React.cloneElement(child, {
            active: active === i || child.props.active,
            disabled: disabled || child.props.disabled,
            onClick: child.props.onClick
                ? child.props.onClick
                : function () { return onChange === null || onChange === void 0 ? void 0 : onChange(i); },
        });
    })));
});
export var Segment = React.forwardRef(function Segment(_a, ref) {
    var _b = _a.active, active = _b === void 0 ? false : _b, children = _a.children, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.placement, placement = _d === void 0 ? 'top' : _d, tooltip = _a.tooltip, props = __rest(_a, ["active", "children", "disabled", "placement", "tooltip"]);
    return (React.createElement(Tooltip, { overlay: tooltip, placement: placement },
        React.createElement(StyledSegment, __assign({}, props, { ref: ref, active: active, disabled: disabled, "aria-selected": active, type: "button" }),
            React.createElement(StyledLabel, null, children))));
});
/**
 * @deprecated
 *
 * The `SegmentedController.Tooltip` component has been deprecated will be
 * removed in a future version.
 *
 * Tooltips are now built into `SegmentedController.Segment`s, and can be added
 * by configuring the `tooltip` prop.
 *
 * **Before**
 *
 * ```
 * <SegmentedController>
 *   <SegmentedController.Tooltip tooltip="Item 1 is the first item">
 *     <SegmentedController.Segment>
 *       Item 1
 *     </SegmentedController.Segment>
 *   </SegmentedController.Tooltip>
 * </SegmentedController>
 * ```
 *
 * **After**
 *
 * ```
 * <SegmentedController>
 *   <SegmentedController.Segment tooltip="Item 1 is the first item">
 *     Item 1
 *   </SegmentedController.Segment>
 * </SegmentedController>
 * ```
 *
 * @deprecatedSince 10.20.0
 */
export var Tooltip = React.forwardRef(function Tooltip(_a, ref) {
    var children = _a.children, overlay = _a.overlay, props = __rest(_a, ["children", "overlay"]);
    return overlay ? (React.createElement(TooltipBase, __assign({}, props, { overlay: overlay, ref: ref, trigger: "hover" }), children)) : (React.createElement(React.Fragment, null, children));
});
var withState = function (config) { return function (Component) { return function (props) {
    var _a = React.useState(0), selectedIndex = _a[0], setSelected = _a[1];
    return React.createElement(Component, __assign({}, __assign(__assign({}, props), { selectedIndex: selectedIndex, setSelected: setSelected })));
}; }; };
/**
 * @deprecated
 *
 * This `SegmentedController.State` utility has been deprecated. Please just
 * use a simple state management hook instead.
 *
 *
 * **Before**
 *
 * ```
 * <SegmentedController.State>
 *   {({ selectedIndex, setSelected }) => (
 *     <SegmentedController>
 *       <SegmentedController.Segment onClick={() => setSelected(0)} active={selectedIndex === 0}>
 *         Item 1
 *       </SegmentedController.Segment>
 *     </SegmentedController>
 *   )}
 * </SegmentedController.State>
 * ```
 *
 * **After**
 *
 * ```
 * const [selected, setSelected] = React.useState(0)
 *
 * <SegmentedController onChange={setSelected}>
 *   <SegmentedController.Segment active={selectedIndex === 0}>
 *     Item 1
 *   </SegmentedController.Segment>
 * </SegmentedController>
 * ```
 *
 * @deprecatedSince 10.20.0
 */
export var State = withState({})(function (_a) {
    var children = _a.children, props = __rest(_a, ["children"]);
    return children(props);
});
SegmentedController_.displayName = 'SegmentedController';
Segment.displayName = 'SegmentedController.Segment';
Tooltip.displayName = 'SegmentedController.Tooltip';
/**

 Segmented controllers allow users to switch between related but mutually
 exclusive content or actions.

 @since 10.19.0

 @see [Storybook](https://procore.github.io/core/latest/?path=/story/demos-segmentedcontroller--demo)

 @see [Design Guidelines](https://design.procore.com/segmented-controller)

 */
export var SegmentedController = addSubcomponents({
    Segment: Segment,
    State: State,
    Tooltip: Tooltip,
}, SegmentedController_);
//# sourceMappingURL=SegmentedController.js.map