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

const meta = {
  title: "Elements/Editor/RichTextEditor",
  component: RichTextEditor,
  tags: ["autodocs"],
  args: {
    label: "Body",
  },
  parameters: componentDoc("RichTextEditor", { barrel: "editor" }),
  decorators: [
    () => ({
      template: '<div class="max-w-2xl p-4"><story /></div>',
    }),
  ],
} satisfies Meta<typeof RichTextEditor>

export default meta
type Story = StoryObj<typeof meta>

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

export const WithInitialContent: Story = {
  args: {
    label: "Body",
    modelValue:
      "<h2>Welcome</h2><p>This is some <strong>rich</strong> <em>text</em> with a <a href='#'>link</a>.</p><ul><li>One</li><li>Two</li></ul>",
  },
}

export const Disabled: Story = {
  args: {
    label: "Body",
    disabled: true,
    modelValue: "<p>Read-only content.</p>",
  },
}

export const Readonly: Story = {
  args: {
    label: "Body",
    readonly: true,
    modelValue: "<p>Read-only content (readonly flag).</p>",
  },
}

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

export const WithErrors: Story = {
  args: {
    label: "Body",
    required: true,
    errors: ["This field is required.", "Body must contain at least one paragraph."],
  },
}

export const WithHelpText: Story = {
  args: {
    label: "Body",
    helpText: "Markdown is not supported. Use the toolbar to format.",
  },
}

export const TallMinHeight: Story = {
  args: { label: "Body", minHeight: "24rem" },
}

export const Showcase: Story = {
  args: {} as never,
  render: () => ({
    components: { RichTextEditor },
    setup() {
      const body = ref(
        "<h2>Sample document</h2><p>Type in any editor to see <strong>two-way binding</strong> at work.</p>",
      )
      return { body }
    },
    template: `
      <div class="flex flex-col gap-6">
        <RichTextEditor v-model="body" label="Editable body" />
        <div class="rounded-md border p-3 text-xs">
          <p class="font-medium mb-1">Live HTML output:</p>
          <pre class="whitespace-pre-wrap break-all">{{ body }}</pre>
        </div>
      </div>
    `,
  }),
}
