import type { Meta, StoryObj } from "@storybook/vue3-vite"
import type { GridBuilderSchema } from "@/stores/gridBuilderStore"
import GridBuilder from "./GridBuilder.vue"
import { componentDoc } from "@/lib/storybook"

const seededSchema: GridBuilderSchema = {
  cols: 12,
  rowHeight: 60,
  items: [
    { id: "hero", label: "Hero", x: 0, y: 0, w: 12, h: 2 },
    { id: "sidebar", label: "Sidebar", x: 0, y: 2, w: 4, h: 4 },
    { id: "main", label: "Main", x: 4, y: 2, w: 8, h: 4 },
    { id: "footer", label: "Footer", x: 0, y: 6, w: 12, h: 1 },
  ],
}

const meta = {
  title: "Elements/Builder/GridBuilder",
  component: GridBuilder,
  tags: ["autodocs"],
  args: {
    label: "Grid layout",
  },
  parameters: {
    layout: "fullscreen",
    ...componentDoc("GridBuilder", { barrel: "builder" }),
  },
} satisfies Meta<typeof GridBuilder>

export default meta
type Story = StoryObj<typeof meta>

export const Empty: Story = {
  name: "Empty (default)",
  args: {},
}

export const WithSeededSchema: Story = {
  name: "Pre-populated schema",
  args: {
    modelValue: seededSchema,
  },
}

export const Showcase: Story = {
  args: {
    modelValue: seededSchema,
  },
}

export const WithDragResize: Story = {
  name: "Drag + resize (pointer)",
  args: {
    label: "Drag cells / resize from the bottom-right handle",
    modelValue: seededSchema,
  },
  parameters: {
    docs: {
      description: {
        story:
          "Pointer-driven drag-to-reposition and corner-resize. Drags snap to the 12-column grid; the bottom-right handle resizes width and height. Use the inspector for fine-grained numeric edits.",
      },
    },
  },
}
