import test from 'node:test';
import assert from 'node:assert/strict';
import { w15Fixture } from './w15-fixture.mjs';

test('navbar theme switch follows and persists appearance', {timeout:90000}, async t => {
  const {f,b,wait}=await w15Fixture(t);
  await b.call('Emulation.setEmulatedMedia',{features:[{name:'prefers-color-scheme',value:'light'}]});
  await b.navigate(f.base+'/#/'); await wait('!!document.querySelector("#mode")');
  assert.equal(await b.evaluate('document.querySelector("#theme-switch")?.getAttribute("role")'),'switch');
  await b.evaluate('document.querySelector("#mode").value="system";document.querySelector("#mode").dispatchEvent(new Event("change",{bubbles:true}))');
  assert.equal(await b.evaluate('document.querySelector("#theme-switch").getAttribute("aria-checked")'),'false');
  await b.evaluate('document.querySelector("#theme-switch").click()');
  assert.deepEqual(await b.evaluate('[document.documentElement.dataset.mode,document.querySelector("#mode").value,document.querySelector("#theme-switch").getAttribute("aria-checked")]'),['dark','dark','true']);
  await b.call('Page.reload'); await wait('document.querySelector("#theme-switch")?.getAttribute("aria-checked") === "true"');
  assert.equal(await b.evaluate('document.documentElement.dataset.mode'),'dark');
  await b.evaluate('document.querySelector("#mode").value="dim";document.querySelector("#mode").dispatchEvent(new Event("change"))');
  assert.equal(await b.evaluate('document.querySelector("#theme-switch").getAttribute("aria-checked")'),'true');
  await b.evaluate('document.querySelector("#theme-switch").click()');
  assert.deepEqual(await b.evaluate('[document.documentElement.dataset.mode,document.querySelector("#mode").value]'),['light','light']);
  await b.evaluate('document.querySelector("#mode").value="system";document.querySelector("#mode").dispatchEvent(new Event("change"))');
  assert.equal(await b.evaluate('document.querySelector("#theme-switch").getAttribute("aria-checked")'),'false');
  await b.call('Emulation.setEmulatedMedia',{features:[{name:'prefers-color-scheme',value:'dark'}]});
  await wait('document.querySelector("#theme-switch").getAttribute("aria-checked") === "true"');
  assert.equal(await b.evaluate('document.documentElement.hasAttribute("data-mode")'),false);
  for (const width of [1440,390]) {
    await b.viewport(width,900);
    const v=await b.evaluate(`(()=>{const s=document.querySelector('#theme-switch'),a=document.querySelector('#avatar-button'),r=s.getBoundingClientRect(),ar=a.getBoundingClientRect();return {role:s.getAttribute('role'),name:s.getAttribute('aria-label'),width:r.width,height:r.height,left:r.right<=ar.left,top:Math.abs(r.top-ar.top),overflow:document.documentElement.scrollWidth>innerWidth}})()`);
    assert.deepEqual([v.role,v.name,v.width>=44,v.height>=44,v.left,v.top<15,v.overflow],['switch','Dark mode',true,true,true,true,false],JSON.stringify(v));
  }
});