/* eslint-env jest */
import { act } from 'react';
import { createRoot, type Root } from 'react-dom/client';
import { MemoryRouter } from 'react-router-dom';

import type { ICopilotMessage } from '../../../../service/copilot/copilot.interface';
import { CopilotThread } from '../CopilotThread';

(
  globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }
).IS_REACT_ACT_ENVIRONMENT = true;

let root: Root;
let host: HTMLDivElement;

beforeEach(() => {
  host = document.createElement('div');
  document.body.appendChild(host);
  root = createRoot(host);
});

afterEach(() => {
  act(() => root.unmount());
  host.remove();
});

const render = (
  messages: ICopilotMessage[],
  isStreaming = false
): jest.Mock => {
  const onRetry = jest.fn();
  act(() => {
    root.render(
      <MemoryRouter
        future={{ v7_startTransition: true, v7_relativeSplatPath: true }}
      >
        <CopilotThread
          messages={messages}
          logo=""
          isStreaming={isStreaming}
          onAction={jest.fn()}
          onLink={jest.fn()}
          onRetry={onRetry}
          article={{
            onOpen: jest.fn(),
            onPublish: jest.fn(),
            publishing: null,
            published: new Set<string>(),
            failed: new Set<string>(),
          }}
        />
      </MemoryRouter>
    );
  });
  return onRetry;
};

const question: ICopilotMessage = { role: 'user', content: 'How is my SEO?' };

const retryButton = (): HTMLButtonElement | undefined =>
  Array.from(host.querySelectorAll('button')).find(button =>
    button.textContent?.includes('Try again')
  );

describe('an answer that did not come', () => {
  it('says so and asks again on Try again', () => {
    const onRetry = render([
      question,
      {
        role: 'assistant',
        content: 'No answer came back: the connection dropped on the way.',
        failed: true,
      },
    ]);
    expect(host.textContent).toContain('the connection dropped');
    act(() => retryButton()?.click());
    expect(onRetry).toHaveBeenCalledTimes(1);
  });

  it('reads Thinking only while the answer is on its way', () => {
    render([question, { role: 'assistant', content: '' }], true);
    expect(host.textContent).toContain('Thinking...');
    expect(retryButton()).toBeUndefined();

    render([question, { role: 'assistant', content: '' }]);
    expect(host.textContent).not.toContain('Thinking...');
    expect(host.textContent).toContain('No answer came back.');
    expect(retryButton()).toBeDefined();
  });
});