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

const orders: BcNode = {
  name: "orders",
  rows: [
    { id: "action:orders.place", kind: "action", name: "orders.place", public: true },
    { id: "action:orders.cancel", kind: "action", name: "orders.cancel" },
    { id: "event:orders.placed", kind: "event", name: "orders.placed", public: true },
    { id: "query:orders.list", kind: "query", name: "orders.list" },
    { id: "workflow:orders.fulfil", kind: "workflow", name: "orders.fulfil" },
    { id: "projection:orders.dashboard", kind: "projection", name: "orders.dashboard" },
  ],
};

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

type Story = StoryObj<typeof BcCard>;

export const Default: Story = {
  render: () => ({
    components: { BcCard },
    setup: () => ({ orders }),
    template: `<div class="w-[280px] bg-zinc-900 p-4"><BcCard :bc="orders" /></div>`,
  }),
};

export const WithSelection: Story = {
  render: () => ({
    components: { BcCard },
    setup: () => ({ orders }),
    template: `<div class="w-[280px] bg-zinc-900 p-4"><BcCard :bc="orders" selected-id="event:orders.placed" /></div>`,
  }),
};

export const Empty: Story = {
  render: () => ({
    components: { BcCard },
    template: `<div class="w-[280px] bg-zinc-900 p-4"><BcCard :bc="{ name: 'billing', rows: [] }" /></div>`,
  }),
};