khata-ui/react-openapi/src/components/fields/FormFieldRenderer.tsx

import React from "react";
import { TextField, Chip, Box } from "@mui/material";
import type { FieldConfig } from "../../types";
import { StringField } from "./renderers/StringField";
import { NumberField } from "./renderers/NumberField";
import { DateField } from "./renderers/DateField";
import { BooleanField } from "./renderers/BooleanField";
import { EnumField } from "./renderers/EnumField";
import { FkSelectField } from "./renderers/FkSelectField";
import { FkMultiSelectField } from "./renderers/FkMultiSelectField";
import { FileUploadField } from "./renderers/FileUploadField";
import { ImageField } from "./renderers/ImageField";
import { JsonField } from "./renderers/JsonField";
import { DiscriminatorField } from "./renderers/DiscriminatorField";

interface FormFieldProps {
  field: FieldConfig;
  value: any;
  onChange: (value: any) => void;
  error?: string;
  fkOptions?: { value: any; label: string }[];
  fkLoading?: boolean;
  recordId?: string | number;
  onFkOpen?: (fieldName: string) => void;
}

export function FormFieldRenderer({ field, value, onChange, error, fkOptions, fkLoading, recordId, onFkOpen }: FormFieldProps) {
  if (field.hidden?.form) return null;

  if (field.upload) {
    return (
      <FileUploadField
        field={field}
        value={value}
        onChange={onChange}
      />
    );
  }

  if (field.readOnly && field.uiType !== "image") {
    return (
      <StringField field={field} value={value} onChange={onChange} error={error} />
    );
  }

  if (field.uiType === "image") {
    return (
      <ImageField
        field={field}
        value={value}
        onChange={onChange}
        id={recordId}
        uploadUrl={field.uploadUrl}
      />
    );
  }

  if (field.fk) {
    console.log(`[FormFieldRenderer] FK field="${field.name}" fkOptions=${fkOptions ? `${fkOptions.length} items` : "undefined"} fkLoading=${fkLoading} isArray=${field.isArray}`);
    if (field.isArray) {
      return (
        <FkMultiSelectField
          field={field}
          value={value}
          onChange={onChange}
          fkOptions={fkOptions}
          fkLoading={fkLoading}
          onOpen={() => onFkOpen?.(field.name)}
        />
      );
    }
    return (
      <FkSelectField
        field={field}
        value={value}
        onChange={onChange}
        error={error}
        fkOptions={fkOptions}
        onOpen={() => onFkOpen?.(field.name)}
      />
    );
  }

  if (field.enumValues) {
    return (
      <EnumField
        field={field}
        value={value}
        onChange={onChange}
        error={error}
      />
    );
  }

  if (field.type === "boolean") {
    return <BooleanField field={field} value={value} onChange={onChange} />;
  }

  if (field.uiType === "currency") {
    return (
      <NumberField
        field={field}
        value={value}
        onChange={onChange}
        error={error}
      />
    );
  }

  if (field.type === "integer" || field.type === "number") {
    return (
      <NumberField
        field={field}
        value={value}
        onChange={onChange}
        error={error}
      />
    );
  }

  if (field.format === "date" || field.format === "date-time") {
    return (
      <DateField
        field={field}
        value={value}
        onChange={onChange}
        error={error}
      />
    );
  }

  if (field.oneOfOptions) {
    return (
      <DiscriminatorField
        field={field}
        value={value}
        onChange={onChange}
        error={error}
      />
    );
  }

  if (field.refSchema && !field.fk) {
    return (
      <JsonField
        field={field}
        value={value}
        onChange={onChange}
      />
    );
  }

  if (field.type === "array" && !field.fk) {
    return (
      <Box>
        <Chip
          label={`${field.label} (${Array.isArray(value) ? value.length : 0})`}
          size="small"
          color="default"
          variant="outlined"
        />
      </Box>
    );
  }

  if (field.type === "object" && !field.fk) {
    return (
      <Box>
        <Chip
          label={field.label}
          size="small"
          color="default"
          variant="outlined"
        />
      </Box>
    );
  }

  return (
    <StringField
      field={field}
      value={value}
      onChange={onChange}
      error={error}
    />
  );
}