import React from "react";
import { FormControl, InputLabel, Select, MenuItem, FormHelperText } from "@mui/material";
import type { FieldConfig } from "../../../types";

interface Props {
  field: FieldConfig;
  value: any;
  onChange: (value: any) => void;
  error?: string;
  fkOptions?: { value: any; label: string }[];
  onOpen?: () => void;
}

export function FkSelectField({ field, value, onChange, error, fkOptions, onOpen }: Props) {
  console.log(`[FkSelectField] render field="${field.name}" fkOptions=${fkOptions ? `${fkOptions.length} items` : "undefined"} value=${value}`);
  return (
    <FormControl fullWidth size="small" error={!!error}>
      <InputLabel>{field.label}</InputLabel>
      <Select
        value={value ?? ""}
        label={field.label}
        onChange={(e) => onChange(e.target.value)}
        onOpen={() => onOpen?.()}
        disabled={field.readOnly}
      >
        <MenuItem value="">
          <em>None</em>
        </MenuItem>
        {(fkOptions ?? []).map((opt) => (
          <MenuItem key={opt.value} value={opt.value}>
            {opt.label}
          </MenuItem>
        ))}
      </Select>
      {field.description && <FormHelperText>{field.description}</FormHelperText>}
    </FormControl>
  );
}