// Drag source for new blocks. Drop on the React Flow canvas to create.

"use client";

import type { BlockKind } from "../../lib/fixtures/aristotle";

interface PaletteItem {
  kind: BlockKind | "system";
  label: string;
  glyph: string;
}

const ITEMS: PaletteItem[] = [
  { kind: "system", label: "System", glyph: "◎" },
  { kind: "block", label: "Block", glyph: "▢" },
  { kind: "actor", label: "Actor", glyph: "◐" },
  { kind: "constraint", label: "Constraint", glyph: "{}" },
];

export function Palette() {
  function onDragStart(event: React.DragEvent, kind: string) {
    event.dataTransfer.setData("application/sysml-kind", kind);
    event.dataTransfer.effectAllowed = "move";
  }

  return (
    <div className="diagram-palette">
      <div className="diagram-palette-label">Add</div>
      {ITEMS.map(item => (
        <div
          key={item.kind}
          className="diagram-palette-item"
          draggable
          onDragStart={e => onDragStart(e, item.kind)}
          title={`Drag to create a ${item.label}`}
        >
          <span className="diagram-palette-glyph">{item.glyph}</span>
          <span>{item.label}</span>
        </div>
      ))}
    </div>
  );
}