import { faker } from '@faker-js/faker';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

import { RichTextEditor } from '../rich-text-editor';

describe('RichTextEditor typing', () => {
  // it('can type text in an empty editor', async () => {
  //   const onChange = vi.fn();

  //   render(<RichTextEditor onChange={onChange} />);

  //   const user = userEvent.setup();

  //   const addedText = 'wft';

  //   // fireEvent.focus(screen.getByRole('textbox'));
  //   // await user.click(screen.getByRole('textbox'));
  //   // await user.keyboard(addedText);

  //   screen.getByRole('textbox').focus();

  //   await user.type(screen.getByRole('textbox'), addedText);

  //   expect(screen.getByText(addedText)).toBeInTheDocument();

  //   // expect(onChange).toBeCalled();
  //   // expect(onChange).toHaveBeenLastCalledWith([{ kind: 'block', type: 'paragraph', textContent: addedText }]);
  // });

  it('can change a simple text, keeping the textContent on paragraph', async () => {
    const onChange = vi.fn();
    const initialText = 'rabbit';
    render(
      <RichTextEditor
        initialData={[{ kind: 'block', type: 'paragraph', textContent: initialText }]}
        onChange={onChange}
      />,
    );

    const user = userEvent.setup();

    const addedText = faker.lorem.paragraph();

    await user.type(screen.getByRole('textbox'), addedText);

    const endText = initialText + addedText;

    expect(screen.getByText(endText)).toBeInTheDocument();
    expect(onChange).toHaveBeenLastCalledWith([{ kind: 'block', type: 'paragraph', textContent: endText }]);
  });

  it('can type a text with line breaks', async () => {
    const onChange = vi.fn();
    const initialText = 'rabbit';
    render(
      <RichTextEditor
        initialData={[{ kind: 'block', type: 'paragraph', textContent: initialText }]}
        onChange={onChange}
      />,
    );

    const user = userEvent.setup();

    const addedText = faker.lorem.paragraphs();

    await user.type(screen.getByRole('textbox'), addedText);

    const endText = initialText + addedText;

    expect(onChange).toHaveBeenLastCalledWith([{ kind: 'block', type: 'paragraph', textContent: endText }]);
  });
});
