import type { Meta, StoryObj } from "@storybook/vue3-vite"
import type { ReactiveCanvasBuilderSchema } from "@/stores/reactiveCanvasBuilderStore"
import ReactiveCanvasBuilder from "./ReactiveCanvasBuilder.vue"

const seededSchema: ReactiveCanvasBuilderSchema = {
  width: 800,
  height: 500,
  blocks: [
    {
      id: "title",
      type: "text-block",
      x: 24,
      y: 24,
      width: 360,
      height: 60,
      props: { text: "Welcome" },
    },
    {
      id: "logo",
      type: "image-block",
      x: 420,
      y: 24,
      width: 120,
      height: 120,
      props: { src: "logo.png", alt: "Logo" },
    },
    {
      id: "cta",
      type: "button-block",
      x: 24,
      y: 360,
      width: 200,
      height: 56,
      props: { label: "Get started", action: "navigate" },
    },
  ],
}

const meta = {
  title: "Elements/Builder/ReactiveCanvasBuilder",
  component: ReactiveCanvasBuilder,
  tags: ["autodocs"],
  args: {
    label: "Interactive canvas",
  },
  parameters: {
    layout: "fullscreen",
    docs: {
      description: {
        component:
          "```ts\nimport { ReactiveCanvasBuilder } from \"@gxp-dev/mod-ui/builder\"\n```\n\nVisual canvas where component-like blocks can be placed and configured. Blocks support pointer-driven drag (free positioning, no snap) and four-corner resize, with the inspector available for numeric edits.",
      },
    },
  },
} satisfies Meta<typeof ReactiveCanvasBuilder>

export default meta
type Story = StoryObj<typeof meta>

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

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

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

export const WithDragResize: Story = {
  name: "Drag + resize (pointer)",
  args: {
    label: "Drag blocks anywhere; resize from any corner handle",
    modelValue: seededSchema,
  },
  parameters: {
    docs: {
      description: {
        story:
          "Pointer-based interactions: dragging a block moves it freely by raw pixel delta (clamped to the canvas), and each block has four corner handles for resizing. The bottom-right handle grows from the anchor; top/left corners also adjust position so the opposite corner stays put.",
      },
    },
  },
}
