"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.ChoiceList = void 0;
var _Choice = _interopRequireDefault(require("./Choice"));
var _Label = require("../Label");
var _classnames = _interopRequireDefault(require("classnames"));
var _describeField = _interopRequireDefault(require("../utilities/describeField"));
var _useId = _interopRequireDefault(require("../utilities/useId"));
var _useLabelProps = require("../Label/useLabelProps");
var _useHint = require("../Hint/useHint");
var _useInlineError = require("../InlineError/useInlineError");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
// Omit props that we override with values from the ChoiceList

/**
 * For information about how and when to use this component, refer to the
 * [checkbox](https://design.cms.gov/components/checkbox/) and
 * [radio](https://design.cms.gov/components/radio/) documentation pages.
 *
 * Checkboxes and radios can be managed as a group using `<ChoiceList>` or
 * individually using `<Choice>`. Note that each of the items in the `choices`
 * array represents props that will be passed to an individual `<Choice>`
 * component. You can therefore define any of the props listed in the `<Choice>`
 * props table below, including all valid attributes of the
 * [HTML input element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input).
 */
const ChoiceList = props => {
  const {
    onBlur,
    onComponentBlur,
    choices
  } = props;
  const id = (0, _useId.default)('choice-list--', props.id);
  if (process.env.NODE_ENV !== 'production') {
    if (props.type !== 'checkbox' && props.choices.length === 1) {
      console.warn(`[Warning]: Use type="checkbox" for components with only one choice. A single radio button is disallowed because it prevents users from deselecting the field.`);
    }
  }
  const choiceRefs = [];
  const handleBlur = evt => {
    if (onBlur) onBlur(evt);
    if (onComponentBlur) handleComponentBlur(evt);
  };
  const handleComponentBlur = evt => {
    // The active element is always the document body during a focus
    // transition, so in order to check if the newly focused element
    // is one of our choices, we're going to have to wait a bit.
    setTimeout(() => {
      if (!choiceRefs.includes(document.activeElement)) {
        onComponentBlur(evt);
      }
    }, 20);
  };
  const {
    errorId,
    topError,
    bottomError,
    invalid
  } = (0, _useInlineError.useInlineError)({
    ...props,
    id
  });
  const {
    hintId,
    hintElement
  } = (0, _useHint.useHint)({
    ...props,
    id
  });
  const labelProps = (0, _useLabelProps.useLabelProps)({
    ...props,
    id
  });
  const choiceItems = choices.map((choiceProps, index) => {
    const completeChoiceProps = {
      // Allow this to be overridden by the choiceProps
      id: `${id}__choice--${index}`,
      ...choiceProps,
      inversed: props.inversed,
      name: props.name,
      // onBlur: (onBlur || onComponentBlur) && handleBlur,
      onBlur: handleBlur,
      onChange: props.onChange,
      size: props.size,
      type: props.type,
      inputClassName: (0, _classnames.default)(choiceProps.inputClassName, {
        'ds-c-choice--error': props.errorMessage
      }),
      disabled: choiceProps.disabled || props.disabled,
      // Individual choices can be disabled as well as the entire field
      inputRef: ref => {
        choiceRefs.push(ref);
        if (choiceProps.inputRef) {
          choiceProps.inputRef(ref);
        }
      }
    };
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Choice.default, {
      ...completeChoiceProps
    }, choiceProps.value);
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("fieldset", {
    "aria-invalid": invalid,
    "aria-describedby": (0, _describeField.default)({
      ...props,
      hintId,
      errorId
    }),
    className: (0, _classnames.default)('ds-c-fieldset', props.className),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Label.Label, {
      component: "legend",
      ...labelProps
    }), hintElement, topError, choiceItems, bottomError]
  });
};
exports.ChoiceList = ChoiceList;
var _default = ChoiceList;
exports.default = _default;