import type { Meta, StoryObj } from '@storybook/angular';
import { RichTextEditorComponent } from './rich-text-editor.component';
import { RichTextBlock } from '@shared/kernel/rich-text';

const sample: RichTextBlock = {
  paragraphs: [
    {
      nodes: [
        { type: 'text', text: 'Geachte heer/mevrouw ' },
        { type: 'placeholder', key: 'naam_zorgverlener' },
        { type: 'text', text: ',' },
      ],
    },
    { nodes: [{ type: 'text', text: 'Op ' }, { type: 'placeholder', key: 'datum' }, { type: 'text', text: ' hebben wij besloten.' }] },
  ],
};

const placeholders = [
  { key: 'naam_zorgverlener', label: 'Naam zorgverlener' },
  { key: 'datum', label: 'Datum' },
  { key: 'big_nummer', label: 'BIG-nummer' },
];

const meta: Meta<RichTextEditorComponent> = {
  title: 'Molecules/Rich Text Editor',
  component: RichTextEditorComponent,
  render: (args) => ({
    props: args,
    template: `<app-rich-text-editor [content]="content" [placeholders]="placeholders" [editable]="editable"></app-rich-text-editor>`,
  }),
};
export default meta;
type Story = StoryObj<RichTextEditorComponent>;

export const Editing: Story = { args: { content: sample, placeholders, editable: true } };
export const Empty: Story = { args: { content: { paragraphs: [{ nodes: [] }] }, placeholders, editable: true } };
export const ReadOnly: Story = { args: { content: sample, placeholders, editable: false } };
