/**
 * The console is built to work at phone width. These checks guard the layout
 * rules that make that true -- chiefly that nothing forces a horizontal scroll.
 */
import { expect, test } from '../fixtures/test';
import { SKYLINE_AGENT } from '../fixtures/accounts';

/** True when the document is wider than the viewport. */
async function scrollsSideways(page: import('@playwright/test').Page): Promise<boolean> {
  return page.evaluate(() => document.documentElement.scrollWidth > window.innerWidth + 1);
}

test.describe('Layout', () => {
  test('the sign-in screen fits without sideways scrolling', async ({ page, login }) => {
    await page.setViewportSize({ width: 390, height: 844 });
    await login.goto();

    expect(await scrollsSideways(page)).toBe(false);
    // The decorative panel is hidden rather than squeezed.
    await expect(page.locator('.hero')).toBeHidden();
    await expect(login.submit).toBeVisible();
  });

  test('the console screens fit at phone width', async ({ page, signInAs, shell, search }) => {
    await page.setViewportSize({ width: 390, height: 844 });
    await signInAs(SKYLINE_AGENT);

    expect(await scrollsSideways(page)).toBe(false);

    await shell.goToSearch();
    await search.settled();
    expect(await scrollsSideways(page)).toBe(false);
    await expect(search.results.first()).toBeVisible();

    await shell.goToBookings();
    expect(await scrollsSideways(page)).toBe(false);
  });

  test('wide tables scroll inside their own container', async ({ page, signInAs, shell }) => {
    await page.setViewportSize({ width: 390, height: 844 });
    await signInAs(SKYLINE_AGENT);
    await shell.goToBookings();

    const wrapper = page.locator('.table-wrap').first();
    await expect(wrapper).toBeVisible();

    // The table may overflow; the page must not.
    expect(await scrollsSideways(page)).toBe(false);
  });

  test('the sidebar collapses into a top bar on narrow screens', async ({ page, signInAs }) => {
    await page.setViewportSize({ width: 390, height: 844 });
    await signInAs(SKYLINE_AGENT);

    const sidebar = page.locator('.sidebar');
    const content = page.locator('.content');

    const sidebarBox = await sidebar.boundingBox();
    const contentBox = await content.boundingBox();

    expect(sidebarBox).not.toBeNull();
    expect(contentBox).not.toBeNull();
    // Stacked, not side by side.
    expect(contentBox!.y).toBeGreaterThan(sidebarBox!.y);
  });
});