import { expect, test } from '@playwright/test';

test('the home page explains the app and its guides fit the screen', async ({ page }) => {
  const errors: string[] = [];
  page.on('pageerror', (error) => errors.push(error.message));
  await page.goto('/');
  await expect(page.getByRole('heading', { level: 1 })).toHaveText(
    'A great floor starts with a little planning.',
  );
  await expect(page.getByRole('heading', { name: 'Scotia or skirting board?' })).toBeVisible();
  await expect(page.getByRole('link', { name: 'Plan my floor' })).toHaveCount(1);
  await expect(page.getByRole('link', { name: 'Plan my floor' }).first()).toBeInViewport();
  await page.getByRole('link', { name: 'First time fitting a floor?' }).click();
  await expect(page).toHaveURL(/#guide$/);
  await expect(page.getByRole('heading', { name: /Your first floor/ })).toBeInViewport();
  await expect(page.getByRole('link', { name: 'Open planner' })).toBeInViewport();
  const header = await page.getByRole('banner').boundingBox();
  const guide = await page.getByRole('heading', { name: /Your first floor/ }).boundingBox();
  expect(header!.y).toBe(0);
  expect(guide!.y).toBeGreaterThanOrEqual(header!.height);
  await page.reload();
  await expect(page.getByRole('heading', { name: /Your first floor/ })).toBeInViewport();
  await page.getByRole('link', { name: 'Back to top' }).click();
  await expect(page.getByRole('heading', { level: 1 })).toBeInViewport();
  expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(
    page.viewportSize()!.width,
  );
  expect(errors).toEqual([]);
});

for (const [name, selector] of [
  ['header', '.landing-header'],
  ['hero', '.landing-hero'],
]) {
  test(`the ${name} CTA opens a working planner and browser history returns home`, async ({
    page,
  }) => {
    await page.goto('/');
    if (name === 'header') {
      await page.getByRole('contentinfo').scrollIntoViewIfNeeded();
      await expect(page.getByRole('link', { name: 'Open planner' })).toBeInViewport();
    }
    await page.locator(selector).locator('a[href="?planner"]').click();
    await expect(page.getByRole('heading', { name: 'Room measurements' })).toBeVisible();
    await expect(page.getByLabel('Room width', { exact: true })).toHaveValue('4800');
    await expect(page).toHaveURL(/\?version=\d+&/);
    await page.getByLabel('Room name', { exact: true }).fill('My first floor');
    const projectUrl = page.url();
    await page.reload();
    await expect(page.getByLabel('Room name', { exact: true })).toHaveValue('My first floor');
    await page.goBack();
    await expect(page.getByRole('heading', { level: 1 })).toContainText('A great floor');
    await page.goForward();
    await expect(page).toHaveURL(projectUrl);
    await expect(page.getByLabel('Room name', { exact: true })).toHaveValue('My first floor');
  });
}

test('returning through the home page resumes the saved project', async ({ page }) => {
  await page.goto('/?planner');
  await page.getByLabel('Room name', { exact: true }).fill('Weekend project');
  await page.getByLabel('Room width', { exact: true }).fill('4200');
  await page.getByRole('link', { name: 'Floor planner home' }).click();
  await expect(page.getByRole('heading', { level: 1 })).toContainText('A great floor');
  await page.getByRole('link', { name: 'Plan my floor' }).first().click();
  await expect(page.getByLabel('Room name', { exact: true })).toHaveValue('Weekend project');
  await expect(page.getByLabel('Room width', { exact: true })).toHaveValue('4200');
});