import { Handle, Position } from "@xyflow/react";
import type { NodeProps } from "@xyflow/react";

import type { DiagramNode } from "../graph";

export function ErEntityNode({ data }: NodeProps) {
  const d = data as unknown as DiagramNode & { label: string };
  const columns = d.columns ?? [];

  return (
    <div className="er-entity">
      <div className="er-entity-header">{d.label}</div>
      <div className="er-entity-body">
        {columns.length === 0 && (
          <div className="er-entity-row er-entity-empty">No attributes</div>
        )}
        {columns.map((col, i) => (
          <div key={col.name} className="er-entity-row">
            <span className="er-entity-indicator">
              {col.isPrimaryKey ? "🔑" : col.isForeignKey ? "→" : ""}
            </span>
            <span className="er-entity-col-name">{col.name}</span>
            <span className="er-entity-col-type">{col.type}</span>
            <span className="er-entity-constraint">
              {col.isNullable ? "?" : ""}
              {col.isUnique ? "U" : ""}
            </span>
          </div>
        ))}
      </div>
      <Handle type="target" position={Position.Top} style={{ opacity: 0 }} />
      <Handle
        type="target"
        position={Position.Left}
        id="left"
        style={{ opacity: 0 }}
      />
      <Handle type="source" position={Position.Bottom} style={{ opacity: 0 }} />
      <Handle
        type="source"
        position={Position.Right}
        id="right"
        style={{ opacity: 0 }}
      />
    </div>
  );
}
