/* eslint-disable no-console */
import type { Meta, StoryObj } from '@storybook/react';

import { labelTranslationEn } from './i18n';
import { RichTextEditor } from './rich-text-editor';
import type { CrystallizeRichText, CrystallizeRichTextNode } from './types/crystallize-rich-text-types';

const meta: Meta<typeof RichTextEditor> = {
  title: 'Components/RichTextEditor',
  component: RichTextEditor,
  argTypes: {
    initialData: {},
  },
  decorators: [
    Story => (
      <div style={{ backgroundColor: 'rgb(var(--c-color-gray-50-900)', padding: 40 }}>
        <div
          style={{
            borderRadius: '0.375rem',
            boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
            maxWidth: '1100px',
            backgroundColor: 'rgb(var(--c-color-elevate)',
          }}
        >
          <Story />
        </div>
      </div>
    ),
  ],
};

export default meta;

type Story = StoryObj<typeof RichTextEditor>;

function paragraphWithText(textContent: string): CrystallizeRichTextNode {
  return {
    kind: 'block',
    type: 'paragraph',
    textContent,
  };
}

const fullModel: CrystallizeRichText = [
  {
    kind: 'block',
    type: 'heading1',
    textContent: 'Whoa, an h1 heading?',
  },
  {
    kind: 'block',
    type: 'heading2',
    textContent: 'Yikes, another heading? h2?',
  },
  {
    kind: 'block',
    type: 'heading3',
    textContent: 'Wait, a third heading? h3?',
  },
  {
    kind: 'block',
    type: 'horizontal-line',
  },
  {
    kind: 'block',
    type: 'paragraph',
    children: [
      {
        kind: 'inline',
        textContent: 'You can do ',
      },
      {
        kind: 'inline',
        textContent: 'strong',
        type: 'strong',
      },
      {
        kind: 'inline',
        textContent: ' and ',
      },
      {
        kind: 'inline',
        type: 'emphasized',
        textContent: 'italic',
      },
      {
        kind: 'inline',
        textContent: ', and ',
      },
      {
        kind: 'inline',
        type: 'underlined',
        textContent: 'underlined',
      },
      {
        kind: 'inline',
        textContent: ' text formats',
      },
    ],
  },
  {
    kind: 'block',
    type: 'paragraph',
    children: [
      {
        kind: 'inline',
        textContent: 'Here is a paragraph with a ',
      },
      {
        kind: 'inline',
        type: 'link',
        metadata: {
          href: 'https://crystallize.com',
        },
        textContent: 'link',
      },
      {
        kind: 'inline',
        textContent: ' and a ',
      },
      {
        kind: 'inline',
        type: 'line-break',
      },
      {
        kind: 'inline',
        textContent: 'line break',
      },
    ],
  },

  {
    kind: 'block',
    type: 'code',
    textContent: 'const you = "can also do code";\nconst thisIs: string = "typescript"',
    metadata: {
      language: 'typescript',
    },
  },

  {
    kind: 'block',
    type: 'code',
    textContent: '<!DOCTYPE html>\n<html lang="en">\n<h1>But HTML works just as fine</h1>',
    metadata: {
      language: 'html',
    },
  },

  {
    kind: 'block',
    type: 'paragraph',
    textContent: 'Here is an ordered list',
  },
  {
    kind: 'block',
    type: 'ordered-list',
    children: [
      {
        kind: 'block',
        type: 'list-item',
        textContent: 'first list item',
      },
      {
        kind: 'block',
        type: 'list-item',
        textContent: 'second list item',
      },
    ],
  },
  {
    kind: 'block',
    type: 'paragraph',
    textContent: 'Here is an unordered list',
  },
  {
    kind: 'block',
    type: 'unordered-list',
    children: [
      {
        kind: 'block',
        type: 'list-item',
        textContent: 'first list item',
      },
      {
        kind: 'block',
        type: 'list-item',
        textContent: 'second list item',
      },
    ],
  },
  {
    kind: 'block',
    type: 'quote',
    textContent:
      'We hold these truths to be self-evident: all men and women are created, by the, you know the, you know the thing.',
  },
  {
    kind: 'block',
    type: 'paragraph',
    textContent: 'Joe Biden',
  },
];

export const AllElements: Story = {
  args: {
    initialData: fullModel,
    onChange() {
      console.log('onChange');
      // console.log(JSON.stringify(data, null, 1));
    },
  },
};

export const UsingSlotPreContent: Story = {
  args: {
    slotPreContent: <div>Hello there 👋</div>,
  },
};

export const SimpleText: Story = {
  args: {
    initialData: [
      {
        type: 'paragraph',
        kind: 'block',
        textContent: 'Hello there',
      },
    ],
    onChange(data) {
      console.log('onChange');
      console.log(JSON.stringify(data, null, 1));
    },
  },
};

export const BlankSheet: Story = {
  args: {
    initialData: [],
    placeholder: 'Some content in here',
    onChange(data) {
      console.log('onChange');
      console.log(JSON.stringify(data, null, 1));
    },
  },
};

export const MaxLength: Story = {
  args: {
    initialData: [],
    placeholder: 'You can only write 10 characters in here',
    maxLength: 10,
  },
};

export const CodeInlined: Story = {
  args: {
    initialData: [
      {
        kind: 'block',
        type: 'paragraph',
        children: [
          {
            kind: 'inline',
            textContent: 'Here come some ',
          },
          {
            kind: 'inline',
            type: 'code',
            textContent: `var r = 1`,
            metadata: {
              language: 'typescript',
            },
          },
          {
            kind: 'inline',
            textContent: '! Would you look at that?',
          },
        ],
      },
    ],
    onChange(data) {
      console.log('onChange');
      console.log(JSON.stringify(data, null, 1));
    },
  },
};

export const CodeBlock: Story = {
  args: {
    initialData: [
      {
        type: 'code',
        kind: 'block',
        textContent: 'const aVariable = 42;',
      },
    ],
    onChange(data) {
      console.log('onChange');
      console.log(JSON.stringify(data, null, 1));
    },
  },
};

export const CodeBlockWithinPre: Story = {
  args: {
    initialData: [
      {
        type: 'preformatted',
        kind: 'block',
        children: [
          {
            type: 'code',
            kind: 'block',
            textContent: 'const aVariable = 42;',
          },
        ],
      },
    ],
    onChange(data) {
      console.log('onChange');
      console.log(JSON.stringify(data, null, 1));
    },
  },
};

export const LineBreak: Story = {
  args: {
    initialData: [
      {
        kind: 'block',
        type: 'paragraph',
        children: [
          {
            kind: 'inline',
            textContent: 'There is a ',
          },
          {
            kind: 'inline',
            type: 'line-break',
          },
          {
            kind: 'inline',
            textContent: 'line break here (as a node)',
          },
        ],
      },
    ],
    onChange(data) {
      console.log('onChange');
      console.log(JSON.stringify(data, null, 1));
    },
  },
};

export const Table: Story = {
  args: {
    initialData: [
      {
        kind: 'block',
        type: 'table',
        children: [
          {
            kind: 'block',
            type: 'table-row',
            children: [
              {
                type: 'table-cell',
                kind: 'inline',
                children: [paragraphWithText('Hi')],
              },
              {
                type: 'table-cell',
                kind: 'inline',
                children: [paragraphWithText('from')],
              },
            ],
          },
          {
            kind: 'block',
            type: 'table-row',
            children: [
              {
                type: 'table-cell',
                kind: 'inline',
                children: [paragraphWithText('a')],
              },
              {
                type: 'table-cell',
                kind: 'inline',
                children: [paragraphWithText('table')],
              },
            ],
          },
        ],
      },
    ],
    onChange(data) {
      console.log('onChange');
      console.log(JSON.stringify(data, null, 1));
    },
  },
};

export const InlineTextFormats: Story = {
  args: {
    initialData: [
      {
        kind: 'block',
        type: 'paragraph',
        children: ['underlined', 'emphasized', 'strong', 'superscripted', 'subscripted', 'deleted'].map(
          type =>
            ({
              kind: 'inline',
              textContent: type,
              type,
            } as CrystallizeRichTextNode),
        ),
      },
    ],
    onChange(data) {
      console.log('onChange');
      console.log(JSON.stringify(data, null, 1));
    },
  },
};

export const Quote: Story = {
  args: {
    initialData: [
      {
        kind: 'block',
        type: 'quote',
        textContent: 'Simon says: convert that into Typescript!',
      },
    ],
    onChange(data) {
      console.log('onChange');
      console.log(JSON.stringify(data, null, 1));
    },
  },
};

export const MultipleInlineFormats: Story = {
  args: {
    initialData: [
      {
        type: 'paragraph',
        kind: 'block',
        children: [
          {
            kind: 'inline',
            type: 'strong',
            children: [
              {
                kind: 'inline',
                textContent: 'placed',
                type: 'emphasized',
              },
            ],
          },
        ],
      },
    ],
    onChange(data) {
      console.log('onChange');
      console.log(JSON.stringify(data, null, 1));
    },
  },
};

export const CustomTranslation: Story = {
  args: {
    labelTranslations: {
      ...labelTranslationEn,
      actionClear: '💥 Kaboom',
    },
  },
};
