import type { Meta, StoryObj } from "@storybook/vue3-vite"
import type { DisplayCard } from "@/definitions/cards"
import CardListCard from "./CardListCard.vue"
import { componentDoc } from "@/lib/storybook"

function child(id: string, title: string): DisplayCard {
  return {
    id,
    cardType: "element-list",
    elementList: [],
    title,
  } as unknown as DisplayCard
}

const meta = {
  title: "Cards/CardListCard",
  component: CardListCard,
  tags: ["autodocs"],
  parameters: componentDoc("CardListCard", { barrel: "cards" }),
  args: {
    title: "My Card List",
    subtitle: "Renders nested DisplayCards",
    cards: [child("c1", "Section One")],
  },
} satisfies Meta<typeof CardListCard>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: {},
}

export const WithMultipleChildren: Story = {
  args: {
    cards: [
      child("c1", "Section One"),
      child("c2", "Section Two"),
      child("c3", "Section Three"),
    ],
  },
}

export const Draggable: Story = {
  args: {
    cards: [child("c1", "Drag Me"), child("c2", "Drag Me Too")],
    draggable: true,
    dragTargetData: "demo-drop-zone",
  },
}

export const Showcase: Story = {
  args: {
    title: "Showcase",
    subtitle: "A representative configuration",
    cards: [
      child("c1", "Configuration"),
      child("c2", "Branding"),
      child("c3", "Permissions"),
      child("c4", "Notifications"),
    ],
    gutterX: "1.5rem",
    gutterY: "1.5rem",
  },
}
