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

const meta = {
  title: "Elements/Editor/HtmlEditor",
  component: HtmlEditor,
  tags: ["autodocs"],
  args: {
    label: "HTML body",
  },
  parameters: {
    docs: {
      description: {
        component:
          "```ts\nimport { HtmlEditor } from \"@gxp-dev/mod-ui/editor\"\n```\n\nFull-featured WYSIWYG HTML editor built on Tiptap. Supports headings, inline formatting, text/highlight color, font family, alignment, links, images, lists, tables, and raw HTML source editing.",
      },
    },
  },
} satisfies Meta<typeof HtmlEditor>

export default meta
type Story = StoryObj<typeof meta>

const richSample = `
<h2>Welcome to the HTML editor</h2>
<p>This editor supports <strong>bold</strong>, <em>italic</em>, <u>underline</u>, and <s>strikethrough</s> formatting.</p>
<p style="text-align: center;">Centered paragraph.</p>
<blockquote>A blockquote looks like this.</blockquote>
<ul>
  <li>Bullet one</li>
  <li>Bullet two</li>
</ul>
<ol>
  <li>Step one</li>
  <li>Step two</li>
</ol>
<table>
  <thead><tr><th>Name</th><th>Value</th></tr></thead>
  <tbody>
    <tr><td>Alpha</td><td>1</td></tr>
    <tr><td>Beta</td><td>2</td></tr>
  </tbody>
</table>
<p><a href="https://example.com" target="_blank">A link to example.com</a></p>
`.trim()

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

export const WithRichContent: Story = {
  args: {
    label: "Article body",
    modelValue: richSample,
  },
}

export const WithHelpText: Story = {
  args: {
    label: "Email template",
    helpText: "Use the toolbar to format your HTML. Click the </> button to edit raw source.",
    modelValue: "<p>Hello <strong>{{name}}</strong>,</p>",
  },
}

export const WithErrors: Story = {
  args: {
    label: "HTML body",
    errors: ["Content is required"],
    modelValue: "",
  },
}

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

export const Readonly: Story = {
  args: {
    label: "HTML body (read-only)",
    readonly: true,
    modelValue: "<p>This content is <strong>read-only</strong>.</p>",
  },
}

export const Disabled: Story = {
  args: {
    label: "HTML body (disabled)",
    disabled: true,
    modelValue: "<p>This field is <em>disabled</em>.</p>",
  },
}

export const TallEditor: Story = {
  args: {
    label: "Long form content",
    minHeight: "24rem",
    modelValue: richSample,
  },
}
