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

import { useLauncherQuiet, useQuietLauncher } from '../quiet-launcher';

(
  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 Launcher = (): JSX.Element => (
  <span>{useLauncherQuiet() ? 'quiet' : 'bubble'}</span>
);

const SettingsScreen = ({ active = true }: { active?: boolean }): null => {
  useQuietLauncher(active);
  return null;
};

describe('the launcher bubble on screens with their own buttons', () => {
  it('stays away while such a screen is mounted', () => {
    act(() =>
      root.render(
        <>
          <Launcher />
          <SettingsScreen />
          <SettingsScreen />
        </>
      )
    );
    expect(host.textContent).toBe('quiet');

    act(() =>
      root.render(
        <>
          <Launcher />
          <SettingsScreen />
        </>
      )
    );
    expect(host.textContent).toBe('quiet');

    act(() => root.render(<Launcher />));
    expect(host.textContent).toBe('bubble');
  });

  it('shows it when the screen says its buttons are not there', () => {
    act(() =>
      root.render(
        <>
          <Launcher />
          <SettingsScreen active={false} />
        </>
      )
    );
    expect(host.textContent).toBe('bubble');
  });
});