import React__default, { createContext, useContext, useState, useCallback, useMemo, useId, forwardRef, Children, useRef } from 'react';
import classnames from 'classnames';

const SegmentedControlContext = createContext({
    handleChange: () => ({}),
    selectedValue: null,
    segmentedControlName: "",
});
const useSegmentedControl = () => {
    return useContext(SegmentedControlContext);
};
function SegmentedControlProvider({ children, selectedValue, onSelectValue, defaultValue, name, }) {
    const isControlled = selectedValue !== undefined && onSelectValue !== undefined;
    const [internalSelectedValue, setInternalSelectedValue] = useState(defaultValue);
    const handleChange = useCallback(event => {
        const value = event.target.value;
        if (!isControlled) {
            setInternalSelectedValue(value);
        }
        onSelectValue === null || onSelectValue === void 0 ? void 0 : onSelectValue(value);
    }, [onSelectValue, isControlled]);
    const currentSelectedOption = isControlled
        ? selectedValue
        : internalSelectedValue;
    return (React__default.createElement(SegmentedControlContext.Provider, { value: {
            handleChange,
            selectedValue: currentSelectedOption,
            segmentedControlName: name,
        } }, children));
}

function SegmentedControlOption({ value, children, ariaLabel, }) {
    const { selectedValue, handleChange, segmentedControlName } = useSegmentedControl();
    const localChecked = useMemo(() => selectedValue === value, [selectedValue, value]);
    const inputId = `${value.toString()}_${useId()}`;
    return (React__default.createElement(React__default.Fragment, null,
        React__default.createElement("input", { type: "radio", id: inputId, name: segmentedControlName, checked: localChecked, value: value, onChange: handleChange, "aria-label": ariaLabel, tabIndex: localChecked ? 0 : -1 }),
        React__default.createElement("label", { htmlFor: inputId }, children)));
}

var styles = {"container":"FDDKTZkTdfM-","small":"V41prM1xcKI-","large":"DbXvfxdDF-c-","spinning":"iKliBX-y4ec-"};

const SegmentedControlBase = forwardRef(function SegmentedControlBase({ children, size = "base" }, ref) {
    const optionCount = Children.count(children);
    const containerClassNames = classnames(styles.container, {
        [styles.small]: size === "small",
        [styles.large]: size === "large",
    });
    return (React__default.createElement("div", { ref: ref, className: containerClassNames, role: "radiogroup", style: {
            "--segmentedControl--option-count": optionCount,
        } },
        children,
        React__default.createElement("span", null)));
});

function SegmentedControl({ selectedValue, onSelectValue, defaultValue, children, name = useId(), size = "base", }) {
    const container = useRef(null);
    return (React__default.createElement(SegmentedControlProvider, { selectedValue: selectedValue, onSelectValue: onSelectValue, defaultValue: defaultValue, name: name },
        React__default.createElement(SegmentedControlBase, { ref: container, size: size }, children)));
}
SegmentedControl.Option = SegmentedControlOption;
SegmentedControl.Base = SegmentedControlBase;

export { SegmentedControl as S, SegmentedControlContext as a, SegmentedControlProvider as b, useSegmentedControl as u };
