import React from 'react';
import { StoryObj, Meta } from '@storybook/react';
import AUEditorComponent from '../src/components/AUEditorComponent';
import { ThemeWrapper, translations } from './lib/helpers';

export default {
  title: 'Delphinus/Editor',
  component: AUEditorComponent,
  argTypes: {
    title: {
      table: {
        disable: true,
      }
    },
  },
  decorators: [
    (Story, context) => (
      <ThemeWrapper theme={context.globals.theme}>
        {Story()}
      </ThemeWrapper>
    )
  ],
} as Meta<typeof AUEditorComponent>;

type Story = StoryObj<typeof AUEditorComponent>;

export const Without_Character_Count: Story = {
  args: {
    lang: 'en',
    id: 'editor',
    textareaName: 'editor',
    initialValue: '<h3>Overskrift</h3><p>Indhold</p>',
    translations,
    onEditorChange: (value: string) => console.log(value),
  },
  render: (args) => <AUEditorComponent {...args} />,
};

export const With_Recommended_Character_Count: Story = {
  args: {
    lang: 'da',
    id: 'editor',
    textareaName: 'editor',
    initialValue: '',
    showCounter: true,
    counterType: 'recommended',
    maxChars: 100,
    translations,
    onEditorChange: (value: string) => console.log(value),    
  },
  render: (args) => <AUEditorComponent {...args} />,
};

export const With_Allowed_Character_Count: Story = {
  args: {
    lang: 'da',
    id: 'editor',
    textareaName: 'editor',
    initialValue: '',
    showCounter: true,
    counterType: 'allowed',
    maxChars: 100,
    translations,
    onEditorChange: (value: string) => console.log(value),
  },
  render: (args) => <AUEditorComponent {...args} />,
};