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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState, useEffect, useRef, useId } from "react";
import { cn } from "@utils";
import { Checkbox } from "../checkbox";
import { checkboxGroupVariants, checkboxGroupItemVariants, checkboxGroupLabelVariants } from "./checkboxGroupVariants";
/**
 * CheckboxGroup component for displaying a group of related checkboxes
 */
export const CheckboxGroup = React.forwardRef((_a, ref) => {
    var { size = "md", options, onChange, className, selectedValues, disabled, checkboxPlacement = "end" } = _a, props = __rest(_a, ["size", "options", "onChange", "className", "selectedValues", "disabled", "checkboxPlacement"]);
    const [selected, setSelected] = useState(selectedValues !== null && selectedValues !== void 0 ? selectedValues : []);
    const inputId = useRef(useId());
    const onChangeHandler = (event) => {
        const newSelected = event.currentTarget.checked
            ? [...selected, event.target.value]
            : selected.filter((value) => value !== event.target.value);
        setSelected(newSelected);
        if (onChange) {
            onChange(newSelected);
        }
    };
    useEffect(() => {
        if (selectedValues) {
            setSelected(selectedValues);
        }
    }, [selectedValues]);
    return (_jsx("div", Object.assign({ ref: ref, className: cn(checkboxGroupVariants(), className) }, props, { children: options === null || options === void 0 ? void 0 : options.map((option, index) => {
            const { id, name, value, label, className: optionClassName, disabled: optionDisabled } = option, restOptionProps = __rest(option, ["id", "name", "value", "label", "className", "disabled"]);
            const isChecked = selected.includes(value);
            const isDisabled = disabled || optionDisabled;
            const renderCheckbox = (_jsx(Checkbox, Object.assign({ variant: "filled-circle", type: "checkbox", size: size, name: name, id: id || `${inputId.current}-${index}`, value: value, onChange: onChangeHandler, disabled: isDisabled, checked: isChecked }, restOptionProps)));
            return (_jsxs("label", { htmlFor: id || `${inputId.current}-${index}`, className: cn(checkboxGroupItemVariants({
                    size,
                    checked: isChecked,
                    disabled: isDisabled
                }), optionClassName), children: [checkboxPlacement === "start" && renderCheckbox, label && _jsx("div", { className: cn(checkboxGroupLabelVariants()), children: label }), checkboxPlacement === "end" && renderCheckbox] }, index));
        }) })));
});
CheckboxGroup.displayName = "CheckboxGroup";
//# sourceMappingURL=checkboxGroup.js.map