import type { Meta, StoryObj } from "@storybook/vue3-vite";
import GraphCanvas from "./GraphCanvas.vue";
import type { BcGraph } from "@/lib/bc-graph";

const graph: BcGraph = {
  bcs: [
    {
      name: "orders",
      rows: [
        { id: "action:orders.place", kind: "action", name: "orders.place", public: true },
        { id: "event:orders.placed", kind: "event", name: "orders.placed", public: true },
        { id: "query:orders.list", kind: "query", name: "orders.list" },
      ],
    },
    {
      name: "billing",
      rows: [
        { id: "action:billing.charge", kind: "action", name: "billing.charge" },
        { id: "event:billing.charged", kind: "event", name: "billing.charged" },
      ],
    },
    {
      name: "shipping",
      rows: [{ id: "workflow:shipping.dispatch", kind: "workflow", name: "shipping.dispatch" }],
    },
  ],
  edges: [
    { from: "orders", to: "billing", label: "delivers" },
    { from: "billing", to: "shipping", label: "delivers" },
  ],
};

const meta: Meta<typeof GraphCanvas> = {
  title: "Map/GraphCanvas",
  component: GraphCanvas,
  tags: ["autodocs"],
};
export default meta;

type Story = StoryObj<typeof GraphCanvas>;

export const ThreeContexts: Story = {
  render: () => ({
    components: { GraphCanvas },
    setup: () => ({ graph }),
    template: `<div class="h-[560px] w-full bg-zinc-950"><GraphCanvas :graph="graph" /></div>`,
  }),
};