import type { Meta, StoryObj } from "@storybook/vue3-vite"
import type { DisplayCard } from "@/definitions/cards"
import GridViewCard from "./GridViewCard.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/GridViewCard",
  component: GridViewCard,
  tags: ["autodocs"],
  parameters: componentDoc("GridViewCard", { barrel: "cards" }),
  args: {
    rowHeight: 120,
    cols: { lg: 12 },
    gridLayout: {
      lg: [
        { i: "c1", x: 0, y: 0, w: 6, h: 2 },
        { i: "c2", x: 6, y: 0, w: 6, h: 2 },
      ],
    },
    cards: [child("c1", "Left"), child("c2", "Right")],
    item: {},
  },
} satisfies Meta<typeof GridViewCard>

export default meta
type Story = StoryObj<typeof meta>

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

export const WithMultipleChildren: Story = {
  args: {
    gridLayout: {
      lg: [
        { i: "c1", x: 0, y: 0, w: 4, h: 2 },
        { i: "c2", x: 4, y: 0, w: 4, h: 2 },
        { i: "c3", x: 8, y: 0, w: 4, h: 2 },
        { i: "c4", x: 0, y: 2, w: 6, h: 2 },
        { i: "c5", x: 6, y: 2, w: 6, h: 2 },
      ],
    },
    cards: [
      child("c1", "Alpha"),
      child("c2", "Beta"),
      child("c3", "Gamma"),
      child("c4", "Delta"),
      child("c5", "Epsilon"),
    ],
  },
}

export const Showcase: Story = {
  args: {
    title: "Dashboard",
    subtitle: "Resizable grid layout",
    rowHeight: 150,
    cols: { lg: 12 },
    gridLayout: {
      lg: [
        { i: "metric-1", x: 0, y: 0, w: 3, h: 1, options: { displayBorder: true } },
        { i: "metric-2", x: 3, y: 0, w: 3, h: 1, options: { displayBorder: true } },
        { i: "metric-3", x: 6, y: 0, w: 3, h: 1, options: { displayBorder: true } },
        { i: "metric-4", x: 9, y: 0, w: 3, h: 1, options: { displayBorder: true } },
        { i: "chart", x: 0, y: 1, w: 8, h: 3 },
        { i: "feed", x: 8, y: 1, w: 4, h: 3 },
      ],
    },
    cards: [
      child("metric-1", "Users"),
      child("metric-2", "Revenue"),
      child("metric-3", "Sessions"),
      child("metric-4", "Errors"),
      child("chart", "Engagement"),
      child("feed", "Activity Feed"),
    ],
  },
}
