import * as React from "react";
import { createElement } from "react";
import { jsxs, Fragment, jsx } from "react/jsx-runtime";
import { useBindingState } from "../../form/hooks/useBindingState.js";
import { concat } from "../../utils/classNames.js";
import "../../utils/globals.js";
import "zod";
import { useDidUpdateEffect } from "../../hooks/useDidUpdateEffect.js";
import { getContentFromOption } from "../../types/options.js";
import { Checkbox } from "../checkbox/checkbox.component.js";
import { useArmstrongConfig } from "../config/config.context.js";
import { Label } from "../label/label.component.js";
import { ValidationErrors } from "../validationErrors/validationErrors.component.js";
import "./checkboxList.theme.css.js";
const CheckboxList = React.forwardRef(
  ({ bind, options, className, value, errorIcon, validationMode, validationErrorMessages, onChange, customIndicator, error, displaySize, label, labelClassName, labelId, required, disabled, scrollValidationErrorsIntoView, validationErrorsClassName, requiredIndicator, autoValidate, ...nativeProps }, ref) => {
    const [boundValue, setBoundValue, bindConfig] = useBindingState(bind, {
      value,
      validationErrorMessages,
      validationErrorIcon: errorIcon,
      validationMode,
      onChange,
      autoValidate
    });
    const globals = useArmstrongConfig({
      validationMode: bindConfig.validationMode,
      requiredIndicator,
      scrollValidationErrorsIntoView,
      validationErrorIcon: bindConfig.validationErrorIcon,
      inputDisplaySize: displaySize,
      autoValidate: bindConfig.autoValidate
    });
    const onCheckedChange = React.useCallback((option, newValue) => {
      const newBoundValue = options.reduce((arr, op) => {
        const isSelectedOption = op.id === option.id;
        const isCurrentlyBound = boundValue == null ? void 0 : boundValue.includes(op.id);
        const addIfCurrentlyBound = !isSelectedOption || newValue;
        const addIfNotCurrentlyBound = isSelectedOption && newValue;
        const shouldAdd = isCurrentlyBound ? addIfCurrentlyBound : addIfNotCurrentlyBound;
        return [...arr, ...shouldAdd ? [op.id] : []];
      }, []);
      setBoundValue == null ? void 0 : setBoundValue(newBoundValue);
    }, [setBoundValue, boundValue, options]);
    useDidUpdateEffect(() => {
      if (globals.autoValidate) {
        bindConfig.validate();
      }
      bindConfig.setTouched(true);
    }, [boundValue]);
    return jsxs(Fragment, { children: [label && jsx(Label, { id: labelId, className: concat("arm-checkbox-list-label", labelClassName), required, requiredIndicator: globals.requiredIndicator, displaySize: globals.inputDisplaySize, children: label }), jsxs("div", { className: concat("arm-checkbox-list", className), ref, "data-error": error || !!(validationErrorMessages == null ? void 0 : validationErrorMessages.length), "data-disabled": disabled, "data-size": globals.inputDisplaySize, ...nativeProps, children: [options.map((option) => {
      const isChecked = boundValue == null ? void 0 : boundValue.includes(option.id);
      return createElement(Checkbox, { customIndicator, ...option.htmlProps ?? {}, key: option.id, className: "arm-checkbox-list-item", checked: isChecked, displaySize: globals.inputDisplaySize, onCheckedChange: (v) => onCheckedChange(option, v), disabled: disabled || option.disabled, label: getContentFromOption(option, isChecked) });
    }), bindConfig.shouldShowValidationErrorMessage && !!bindConfig.validationErrorMessages.length && jsx(ValidationErrors, { validationErrors: bindConfig.validationErrorMessages, scrollIntoView: globals.scrollValidationErrorsIntoView, className: concat("arm-checkbox-list-errors", validationErrorsClassName) })] })] });
  }
  // type assertion to ensure generic works with RefForwarded component
  // DO NOT CHANGE TYPE WITHOUT CHANGING THIS, FIND TYPE BY INSPECTING React.forwardRef
);
CheckboxList.displayName = "CheckboxList";
export {
  CheckboxList
};
//# sourceMappingURL=checkboxList.component.js.map
