import { jsx as _jsx } from "react/jsx-runtime";
import { Checkbox, FormControlLabel } from '@mui/material';
import cx from 'classnames';
import { Controller, } from 'react-hook-form';
import '../CheckboxField/style.scss';
import './style.scss';
function toValueList(value) {
    if (!Array.isArray(value)) {
        return [];
    }
    return value;
}
export default function CheckboxGroupField({ attr, createdForm, options = [], disabled = false, className, onChange, }) {
    const fieldName = attr;
    const { control } = createdForm;
    return (_jsx(Controller, { name: fieldName, control: control, render: ({ field }) => {
            const selected = toValueList(field.value);
            const toggle = (optionValue, checked) => {
                const next = checked
                    ? selected.includes(optionValue)
                        ? selected
                        : [...selected, optionValue]
                    : selected.filter((v) => v !== optionValue);
                field.onChange(next);
                onChange?.(attr, next);
            };
            return (_jsx("div", { className: cx('ds-checkbox-group', className), children: options.map((option) => (_jsx(FormControlLabel, { className: "ds-checkbox", disabled: disabled, control: _jsx(Checkbox, { checked: selected.includes(option.value), onChange: (e) => toggle(option.value, e.target.checked), onBlur: field.onBlur, inputRef: field.ref }), label: option.label }, String(option.value)))) }));
        } }));
}
