import { FormControl, InputLabel, Select, MenuItem } from '@mui/material';
import { getFieldOptions } from '../../utils/options';
import { FieldComponentProps } from '../../types/overrides';

export default function RelationField({ field, value, onChange, disabled, relationDataMap = {} }: FieldComponentProps) {
  console.log('RelationField render', field.label, 'enumOption:', field.enumOption, 'value prop:', value);
  const relationName = field.relation ?? (field as any).refers;
if (!relationName || !relationDataMap[relationName]) {
    throw new Error(`Relation data for "${relationName}" is missing – cannot render options for field "${field.label}"`);
}


  const relationData = relationDataMap[relationName];
  const isArrayRelation = field.type === 'array';
  const options = getFieldOptions(field, relationData);
  console.log('Options for', field.label, 'keys:', options.map(o=>o.key));
  if (options.length === 0) {
    throw new Error(`No selectable options available for field "${field.label}" (relation "${relationName}")`);
  }
  const keyField = field.enumOption?.key ?? 'id';


  const normalizedValue = (() => {
    if (isArrayRelation && Array.isArray(value)) {
      return value.map((v: any) => {
        if (v != null && typeof v === 'object') {
          return String(v[keyField] ?? '');
        }
        return String(v);
      });
    }
    if (value != null && typeof value === 'object') {
      return String(value[keyField] ?? '');
    }
    // Primitive (number/string) – coerce to string for Select compatibility
    return value != null ? String(value) : (isArrayRelation ? [] : "");
  })();

  return (
    <FormControl fullWidth>
      <InputLabel shrink>{field.label}</InputLabel>
      <Select
        multiple={isArrayRelation}
        value={normalizedValue}
        label={field.label}
        displayEmpty
        onChange={(e) => onChange(e.target.value)}
        disabled={disabled}
        renderValue={(selected: any) => {
          console.log('Select renderValue for', field.label, 'selected:', selected);
          if (isArrayRelation) {
            return (selected as string[]).map(k => options.find(o => o.key === k)?.value ?? k).join(', ');
          }
          const display = options.find(o => o.key === selected)?.value ?? selected;
          console.log('Display value for', field.label, ':', display);
          return display;
        }}
      >
        {options.map((opt) => (
          <MenuItem key={opt.key} value={opt.key}>
            {opt.value}
          </MenuItem>
        ))}
      </Select>
    </FormControl>
  );
}