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

test("Draft project picker follows retained manual project order", WEB, async ({ t3, app, screen, browser }) => {
  await t3.project("server");
  const alpha = await t3.project("alpha");
  const beta = await t3.project("beta");
  const gamma = await t3.project("gamma");
  await t3.open("/settings/general");
  await screen.getByRole("combobox", "Project order").tap();
  await screen.getByRole("option", "Manual").tap();
  await browser.evaluate((paths: string[]) => {
    const key = "t3code:ui-state:v1";
    const state = JSON.parse(localStorage.getItem(key) ?? "{}");
    state.projectOrder = paths.map(path => `legacy-project-cwd:${path}`);
    localStorage.setItem(key, JSON.stringify(state));
  }, [gamma, beta, alpha]);
  await t3.open("/");
  await browser.locator("[data-draft-project-trigger]").tap();
  await screen.getByRole("option", "server", { exact: true }).tap();
  await browser.locator("[data-draft-project-trigger]").tap();
  await app.screenshot("initial-draft-picker");
  await screen.getByRole("option", "gamma", { exact: true }).tap();
  await browser.locator("[data-draft-project-trigger]").tap();
  await app.screenshot("gamma-draft-picker");
  await browser.locator('[role="option"] button[title^="Pin server"]').tap();
  await browser.keyboard.press("Escape");
  await browser.locator("[data-draft-project-trigger]").tap();
  await app.screenshot("pinned-server-picker");
  await expect(screen.getByRole("option")).toHaveText([/gamma$/, /server$/, /beta$/, /alpha$/, "Add project"]);
});