import { jsx } from 'react/jsx-runtime';
import React__default, { useId, useMemo } from 'react';
import { cn } from '../../../utils/cn.js';
import { selectableCardTheme } from './SelectableCard.theme.js';
import { SelectableCardContext } from './SelectableCardContext.js';

const SelectableCardGroup = React__default.forwardRef(({ type = "single", value, onChange, indicator, disabled = false, name, className, theme: customTheme, children, ...props }, ref) => {
    const autoId = useId();
    const groupName = name !== null && name !== void 0 ? name : `selectable-card-${autoId}`;
    const resolvedIndicator = indicator !== null && indicator !== void 0 ? indicator : (type === "single" ? "radio" : "checkbox");
    const theme = useMemo(() => ({ ...selectableCardTheme, ...customTheme }), [customTheme]);
    const handleChange = (cardValue) => {
        if (type === "single") {
            onChange(cardValue);
        }
        else {
            const current = Array.isArray(value) ? value : [];
            const next = current.includes(cardValue)
                ? current.filter((v) => v !== cardValue)
                : [...current, cardValue];
            onChange(next);
        }
    };
    const contextValue = useMemo(() => ({
        type,
        indicator: resolvedIndicator,
        value,
        onChange: handleChange,
        disabled,
        name: groupName,
        theme,
    }), [type, resolvedIndicator, value, disabled, groupName, theme]);
    return (jsx(SelectableCardContext.Provider, { value: contextValue, children: jsx("div", { ref: ref, role: type === "single" ? "radiogroup" : "group", className: cn(theme.group, className), ...props, children: children }) }));
});
SelectableCardGroup.displayName = "SelectableCard.Group";

export { SelectableCardGroup };
