import _FormControl from "@mui/material/FormControl";
import _FormLabel from "@mui/material/FormLabel";
/*!
 * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
 * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
 *
 * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *
 * See the License for the specific language governing permissions and limitations under the License.
 */
import { memo, useMemo } from "react";
import { FieldError } from "./FieldError.js";
import { FieldHint } from "./FieldHint.js";
import { FieldLabel } from "./FieldLabel.js";
import { useFieldset } from "./FieldsetContext.js";
import { useTranslation } from "./i18n.generated/i18n.js";
import { Typography } from "./Typography.js";
import { useUniqueId } from "./useUniqueId.js";
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
export const fieldTypeValues = ["single", "group"];
const Field = ({
  ariaDescribedBy,
  errorMessage,
  errorMessageList,
  fieldType,
  hasVisibleLabel,
  hint,
  HintLinkComponent,
  id: idOverride,
  isDisabled: isDisabledProp = false,
  isFullWidth = false,
  isRadioGroup = false,
  isOptional = false,
  isReadOnly = false,
  label,
  renderFieldComponent
}) => {
  const {
    t
  } = useTranslation();
  const id = useUniqueId(idOverride);
  const hintId = hint ? `${id}-hint` : undefined;
  const errorMessageElementId = errorMessage || errorMessageList ? `${id}-error` : undefined;
  const labelElementId = `${id}-label`;
  const localAriaDescribedBy = useMemo(() => [hintId, errorMessageElementId, ariaDescribedBy].join(" ").trim() || undefined, [ariaDescribedBy, errorMessageElementId, hintId]);
  const {
    isDisabled: isFieldsetDisabled
  } = useFieldset();
  const isDisabled = useMemo(() => isDisabledProp || isFieldsetDisabled, [isDisabledProp, isFieldsetDisabled]);
  return _jsxs(_FormControl, {
    component: fieldType === "group" ? "fieldset" : "div",
    disabled: isDisabled,
    error: Boolean(errorMessage) || Array.isArray(errorMessageList) && errorMessageList.length > 0,
    fullWidth: isFullWidth,
    role: isRadioGroup ? "radiogroup" : undefined,
    children: [fieldType === "group" ? _jsxs(_FormLabel, {
      component: "legend",
      id: labelElementId,
      children: [label, " ", isOptional && label && _jsxs(Typography, {
        color: "textSecondary",
        component: "span",
        children: ["(", t("fieldlabel.optional.text"), ")"]
      })]
    }) : _jsx(FieldLabel, {
      hasVisibleLabel: hasVisibleLabel,
      id: labelElementId,
      inputId: id,
      isOptional: isOptional,
      text: label
    }), hint && _jsx(FieldHint, {
      id: hintId,
      LinkComponent: HintLinkComponent,
      text: hint
    }), renderFieldComponent({
      ariaDescribedBy: localAriaDescribedBy,
      errorMessageElementId,
      id,
      labelElementId,
      isReadOnly
    }), (errorMessage || errorMessageList) && _jsx(FieldError, {
      id: errorMessageElementId,
      message: errorMessage,
      messageList: errorMessageList
    })]
  });
};
const MemoizedField = memo(Field);
MemoizedField.displayName = "Field";
export { MemoizedField as Field };
//# sourceMappingURL=Field.js.map