import Choice from "./Choice";
import { Label } from "../Label";
import classNames from 'classnames';
import describeField from "../utilities/describeField";
import useId from "../utilities/useId";
import { useLabelProps } from "../Label/useLabelProps";
import { useHint } from "../Hint/useHint";
import { useInlineError } from "../InlineError/useInlineError";

// Omit props that we override with values from the ChoiceList
import { jsx as _jsx } from "preact/compat/jsx-runtime";
import { jsxs as _jsxs } from "preact/compat/jsx-runtime";
/**
 * 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).
 */
export const ChoiceList = props => {
  const {
    onBlur,
    onComponentBlur,
    choices
  } = props;
  const id = useId('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
  } = useInlineError({
    ...props,
    id
  });
  const {
    hintId,
    hintElement
  } = useHint({
    ...props,
    id
  });
  const labelProps = 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: classNames(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__*/_jsx(Choice, {
      ...completeChoiceProps
    }, choiceProps.value);
  });
  return /*#__PURE__*/_jsxs("fieldset", {
    "aria-invalid": invalid,
    "aria-describedby": describeField({
      ...props,
      hintId,
      errorId
    }),
    className: classNames('ds-c-fieldset', props.className),
    children: [/*#__PURE__*/_jsx(Label, {
      component: "legend",
      ...labelProps
    }), hintElement, topError, choiceItems, bottomError]
  });
};
export default ChoiceList;