import type { ReactNode } from "react";
import FieldLabel from "./help/FieldLabel";
import type { DocumentationHelpReference } from "./help/documentationHelp";
import { helpForFieldLabel } from "../utils/fieldHelp";
import { usePlatformLanguage } from "../i18n/LanguageContext";
import type { PlatformInterfaceIdentityProps } from "../types";

type FormFieldProps = PlatformInterfaceIdentityProps & {
  label: ReactNode;
  help?: ReactNode;
  documentation?: DocumentationHelpReference;
  children: ReactNode;
};

export default function FormField({ label, help, documentation, children, interfaceId, helpContextId, helpModuleId, helpTopicId }: FormFieldProps) {
  const { translateText } = usePlatformLanguage();
  const renderedLabel = typeof label === "string" ? translateText(label) : label;
  return (
    <label
      className="form-field"
      data-help-scope="field"
      data-interface-id={interfaceId}
      data-help-context-id={helpContextId ?? documentation?.contextId}
      data-help-module-id={helpModuleId}
      data-help-topic-id={helpTopicId ?? documentation?.topicId}
      data-help-documentation-type={documentation?.documentationType}
      data-help-key={typeof label === "string" ? label : undefined}
    >
      <FieldLabel className="form-label" help={help ?? helpForFieldLabel(label)} documentation={documentation}>{renderedLabel}</FieldLabel>
      {children}
    </label>
  );
}