import type { Meta, StoryObj } from '@storybook/html';
import { RichTextEditor, type RichTextEditorOptions } from '@42/core/rich-text-editor';
import '@42/styles/rich-text-editor.css';

const snippet = `import { RichTextEditor } from '@42/core/rich-text-editor';
import '@42/styles/rich-text-editor.css';

const editor = new RichTextEditor(document.querySelector('[data-c42-rich-text-editor]')!, {
  value: '<p>Start typing…</p>',
});

editor.on('richtexteditor:change', (e) => console.log(e.detail.html));`;

const BUTTONS: Array<[string, string, string]> = [
  ['bold', 'Bold', '<b>B</b>'],
  ['italic', 'Italic', '<i>I</i>'],
  ['underline', 'Underline', '<u>U</u>'],
  ['insertUnorderedList', 'Bulleted list', '• List'],
  ['insertOrderedList', 'Numbered list', '1. List'],
  ['createLink', 'Insert link', 'Link'],
  ['removeFormat', 'Clear formatting', 'Clear'],
];

function build(): HTMLElement {
  const root = document.createElement('div');
  root.dataset.c42RichTextEditor = '';
  root.style.maxWidth = '36rem';
  const toolbar = BUTTONS.map(
    ([command, label, inner]) =>
      `<button data-c42-rte-command="${command}" aria-label="${label}" title="${label}">${inner}</button>`,
  ).join('');
  root.innerHTML = `
    <div data-c42-rte-toolbar>${toolbar}</div>
    <div data-c42-rte-content data-placeholder="Write something brilliant…"></div>`;
  return root;
}

const meta: Meta<RichTextEditorOptions> = {
  title: 'Core/Inputs & Forms/Rich Text Editor',
  tags: ['autodocs'],
  parameters: {
    docs: {
      source: { code: snippet, language: 'ts' },
    },
  },
  render: (args) => {
    const root = build();
    new RichTextEditor(root, {
      ...args,
      getLinkUrl: () => 'https://example.com',
    });
    return root;
  },
};

export default meta;

type Story = StoryObj<RichTextEditorOptions>;

export const Default: Story = {};

export const WithContent: Story = {
  args: {
    value:
      '<p>This editor ships <b>behaviour</b>, not <i>opinions</i>. Select text and use the toolbar.</p>',
  },
};