import type { Meta, StoryObj } from "@storybook/vue3-vite"
import MarkdownEditor from "./MarkdownEditor.vue"
import { componentDoc } from "@/lib/storybook"

const meta = {
  title: "Elements/Editor/MarkdownEditor",
  component: MarkdownEditor,
  tags: ["autodocs"],
  args: {
    label: "Body",
    placeholder: "Write markdown here...",
  },
  parameters: componentDoc("MarkdownEditor", { barrel: "editor" }),
} satisfies Meta<typeof MarkdownEditor>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: { label: "Body" },
}

export const WithValue: Story = {
  args: {
    label: "Body",
    modelValue: "# Hello\n\nThis is **bold** and *italic*.",
  },
}

export const Disabled: Story = {
  args: { label: "Body", disabled: true, modelValue: "# read-only" },
}

export const Required: Story = {
  args: { label: "Body", required: true },
}

export const Seamless: Story = {
  args: {
    label: "Body",
    seamless: true,
    modelValue: "# Hello\n\nThis is **bold** and *italic* text.",
  },
}

export const SeamlessMiniPreview: Story = {
  args: {
    label: "Body",
    seamless: true,
    miniPreview: true,
    modelValue: "# Hello\n\nThis is **bold** and *italic* text.\n\n- Item one\n- Item two\n- Item three\n\n> A blockquote section\n\nAnother paragraph with more content to demonstrate scroll sync.",
  },
}
