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

test("New project publishing exposes its checked state", WEB, async ({ t3, app, screen, browser }) => {
  // Hide only the local destination path in public recordings.
  await browser.addInitScript(() => {
    document.addEventListener("DOMContentLoaded", () => {
      const style = document.createElement("style");
      style.textContent = '[data-testid="command-palette"] .truncate.text-xs { visibility: hidden; }';
      document.head.append(style);
    });
  });
  await t3.project("demo");
  await t3.open();
  await screen.getByRole("button", "Add project", { exact: true }).waitFor({ state: "visible" });
  await browser.keyboard.press("Control+k");
  await screen.getByRole("option", "Add project", { exact: false }).tap();
  await screen.getByRole("option", "New project", { exact: false }).tap();
  await screen.getByRole("combobox", "Project name").fill("demo-project");
  const option = screen.getByRole("option", /Create private repository on GitHub/);
  await option.waitFor({ state: "visible" });
  const off = await option.getAttribute("aria-checked");
  const capture = async (label: string) => {
    await browser.evaluate(() => {
      document.getElementById("a11y-evidence")?.remove();
      const row = [...document.querySelectorAll('[role="option"]')].find(el => el.textContent?.includes("Create private repository on GitHub"));
      const panel = document.createElement("pre");
      panel.id = "a11y-evidence";
      panel.style.cssText = "position:fixed;bottom:20px;left:20px;right:20px;z-index:99999;padding:20px;background:#101820;color:#fff;border:2px solid #6bdcff;font:18px/1.5 monospace;white-space:pre-wrap";
      panel.textContent = "Accessibility inspection (live DOM)\n" + JSON.stringify({ role: row?.getAttribute("role"), name: row?.textContent, "aria-checked": row?.getAttribute("aria-checked"), "aria-pressed": row?.getAttribute("aria-pressed"), "aria-selected": row?.getAttribute("aria-selected"), checkboxHidden: row?.querySelector('[role="checkbox"]')?.getAttribute("aria-hidden") }, null, 2);
      document.body.append(panel);
    });
    await app.screenshot(label);
  };
  await capture("publishing-off");
  await option.tap();
  const on = await option.getAttribute("aria-checked");
  await capture("publishing-on");
  await expect(off).toBe("false");
  await expect(on).toBe("true");
});