import DateInput from "./DateInput";
import defaultDateFormatter from "./defaultDateFormatter";
import cleanFieldProps from "../utilities/cleanFieldProps";
import classNames from 'classnames';
import describeField from "../utilities/describeField";
import useId from "../utilities/useId";
import { Label } from "../Label";
import { t, getLanguage } from "../i18n";
import { useLabelProps } from "../Label/useLabelProps";
import { useHint } from "../Hint/useHint";
import { useInlineError } from "../InlineError/useInlineError";
import { jsx as _jsx, jsxs as _jsxs } from "preact/compat/jsx-runtime";
/**
 * For information about how and when to use this component,
 * [refer to its full documentation page](https://design.cms.gov/components/date-field/multi-input-date-field/).
 */
export function MultiInputDateField(props) {
  const id = useId('date-field--', props.id);
  const {
    errorId,
    topError,
    bottomError,
    invalid
  } = useInlineError({
    ...props,
    id
  });
  const {
    hintId,
    hintElement
  } = useHint({
    hint: t('dateField.hint'),
    ...props,
    id
  });
  const labelProps = useLabelProps({
    label: t('dateField.label'),
    ...props,
    id
  });
  const fieldProps = {
    dayName: 'day',
    monthName: 'month',
    yearName: 'year',
    dateFormatter: defaultDateFormatter,
    ...cleanFieldProps(props),
    id,
    language: getLanguage()
  };
  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, /*#__PURE__*/_jsx(DateInput, {
      ...fieldProps
    }), bottomError]
  });
}
export default MultiInputDateField;