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

async function expectTheme(page: import('@playwright/test').Page, theme: 'light' | 'dark') {
  await expect
    .poll(async () =>
      page.evaluate(() => ({
        attr: document.documentElement.getAttribute('data-theme'),
        stored: localStorage.getItem('headroom_theme')
      }))
    )
    .toEqual({ attr: theme, stored: theme });

}

test.describe('Theme persistence', () => {
  test('applies dark theme from localStorage on reload', async ({ page }) => {
    await page.goto('/login');

    await page.evaluate(() => {
      localStorage.setItem('headroom_theme', 'dark');
    });

    await page.reload();
    await expectTheme(page, 'dark');
  });

  test('applies light theme from localStorage on reload', async ({ page }) => {
    await page.goto('/login');

    await page.evaluate(() => {
      localStorage.setItem('headroom_theme', 'light');
    });

    await page.reload();
    await expectTheme(page, 'light');
  });
});