import React from 'react';
import classNames from 'classnames';
import { FontAwesomeIcon } from '../font-awesome-icon';
import { Tooltip } from '../tooltip';
import { useTranslation } from '../hooks/use-translation';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
export function getFormFieldLabelId(id) {
  return `label-for-${id}`;
}
export function FormFieldLabel({
  id,
  label,
  labelTestId = 'dr-field-label',
  labelIcon = null,
  labelIconTestId = '',
  labelIconTooltipText = '',
  labelIconAriaLabel,
  isDisabled = false,
  isOptional = false,
  optionalLabelText,
  isRequired = false,
  isReadOnly
}) {
  const labelId = getFormFieldLabelId(id);
  const {
    t
  } = useTranslation();
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsxs("label", {
      id: labelId,
      className: "dr-form-field-label",
      htmlFor: id,
      "test-id": labelTestId,
      children: [/*#__PURE__*/_jsx("span", {
        className: classNames('label-text', {
          disabled: isDisabled,
          required: isRequired,
          readonly: isReadOnly
        }),
        children: label
      }), labelIcon && /*#__PURE__*/_jsx(Tooltip, {
        content: labelIconTooltipText,
        children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
          role: labelIconTooltipText ? 'button' : undefined,
          "aria-describedby": `${labelId}-sr-only-description`,
          "aria-hidden": !labelIconTooltipText,
          tabIndex: labelIconTooltipText ? 0 : undefined // always should be focusable when navigating with a keyboard because imporant explanation is provided.
          ,
          icon: labelIcon,
          "test-id": labelIconTestId
        })
      }), isOptional && /*#__PURE__*/_jsx("span", {
        className: "optional-label",
        "test-id": "form-field-optional-label",
        children: optionalLabelText ?? t('Optional')
      })]
    }), /*#__PURE__*/_jsx("span", {
      id: `${labelId}-sr-only-description`,
      className: "sr-only",
      "aria-label": labelIconTooltipText ? labelIconAriaLabel ?? t('Extra information in a tooltip') : undefined,
      children: labelIconTooltipText
    })]
  });
}