/* eslint-disable no-console */
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

import { RichTextEditor } from '../rich-text-editor';
import type { CrystallizeRichText } from '../types/crystallize-rich-text-types';
import { selectTextInElement } from './utils';

describe('RichTextEditor text formats', () => {
  it('can change a text format from bold to normal', async () => {
    const onChange = vi.fn();
    render(
      <RichTextEditor
        initialData={[
          {
            kind: 'block',
            type: 'paragraph',
            children: [
              {
                kind: 'inline',
                textContent: 'Check out the ',
              },
              {
                kind: 'inline',
                textContent: 'bold',
                type: 'strong',
              },
            ],
          },
        ]}
        onChange={onChange}
      />,
    );

    const user = userEvent.setup();

    await selectTextInElement({
      element: screen.getByText('bold'),
      startOffset: 0,
      endOffset: 4,
    });

    await user.click(screen.getByTestId('toggle-format-bold'));

    expect(onChange).toHaveBeenLastCalledWith([
      {
        kind: 'block',
        type: 'paragraph',
        textContent: 'Check out the bold',
      },
    ]);
  });

  it('can change a word to bold when you select the word and click the toggle button', async () => {
    const onChange = vi.fn();
    render(
      <RichTextEditor
        initialData={[
          {
            kind: 'block',
            type: 'paragraph',
            textContent: 'Check out the bold text',
          },
        ]}
        onChange={onChange}
      />,
    );

    await selectTextInElement({
      element: screen.getByText('Check out the bold text'),
      startOffset: 'Check out the '.length,
      endOffset: 'Check out the bold'.length,
    });

    const user = userEvent.setup();
    await user.click(screen.getByTestId('toggle-format-bold'));

    expect(onChange).toHaveBeenLastCalledWith([
      {
        kind: 'block',
        type: 'paragraph',
        children: [
          {
            kind: 'inline',
            textContent: 'Check out the ',
          },
          {
            kind: 'inline',
            type: 'strong',
            textContent: 'bold',
          },
          {
            kind: 'inline',
            textContent: ' text',
          },
        ],
      },
    ] as CrystallizeRichText);
  });

  it('can change a text format from italic to normal', async () => {
    const onChange = vi.fn();
    render(
      <RichTextEditor
        initialData={[
          {
            kind: 'block',
            type: 'paragraph',
            children: [
              {
                kind: 'inline',
                textContent: 'Check out the ',
              },
              {
                kind: 'inline',
                textContent: 'italic',
                type: 'emphasized',
              },
            ],
          },
        ]}
        onChange={onChange}
      />,
    );

    const user = userEvent.setup();

    await selectTextInElement({
      element: screen.getByText('italic'),
      startOffset: 0,
      endOffset: 6,
    });
    await user.click(screen.getByTestId('toggle-format-emphasized'));

    expect(onChange).toBeCalledTimes(1);
    expect(onChange).toHaveBeenLastCalledWith([
      {
        kind: 'block',
        type: 'paragraph',
        textContent: 'Check out the italic',
      },
    ]);
  });
});
