import { expect } from "e2e";
import { test, WEB } from "./t3.ts";

test("Project picker footer hints stay inside the palette at narrow and wide widths", WEB, async ({ t3, app, screen, browser }) => {
  await t3.project("demo");
  await browser.setViewport({ width: 390, height: 844 });
  await t3.open();
  await screen.getByTestId("composer-editor").waitFor({ state: "visible" });
  await browser.keyboard.press("Control+k");
  await screen.getByRole("option", "New thread in...", { exact: true }).tap();
  await screen.getByText("Back", { exact: true }).waitFor({ state: "visible" });
  await browser.evaluate(() => {
    const walker = document.createTreeWalker(document.querySelector('[role="dialog"]')!, NodeFilter.SHOW_TEXT);
    while (walker.nextNode()) {
      const node = walker.currentNode;
      if (node.textContent?.includes("/workspaces/")) node.textContent = node.textContent.replace(/\/home\/[^\s]+/g, "/workspace/demo");
    }
  });
  await app.screenshot("narrow-project-picker");
  const narrow = await browser.evaluate(() => {
    const footer = document.querySelector('[data-slot="command-footer"]')!;
    const bounds = footer.getBoundingClientRect();
    return Array.from(footer.querySelectorAll('[data-slot="kbd-group"]')).every(group => {
      const r = group.getBoundingClientRect();
      return r.left >= bounds.left && r.right <= bounds.right && r.top >= bounds.top && r.bottom <= bounds.bottom;
    });
  });
  await browser.setViewport({ width: 1280, height: 844 });
  await app.screenshot("wide-project-picker");
  const wide = await browser.evaluate(() => {
    const footer = document.querySelector('[data-slot="command-footer"]')!;
    const bounds = footer.getBoundingClientRect();
    const groups = Array.from(footer.querySelectorAll('[data-slot="kbd-group"]')).map(g => g.getBoundingClientRect());
    return groups.every(r => r.left >= bounds.left && r.right <= bounds.right && Math.abs(r.top - groups[0]!.top) < 2);
  });
  expect(narrow).toBe(true);
  expect(wide).toBe(true);
});