/**
 * E2E: Settings → General → About you edits a fact in place: its wording, category and the spaces it
 * shows in.
 */
import { expect, test } from "@playwright/test";
import type { UserProfileState } from "@rakazo/contracts";
import { captureScreenshot, completeOnboarding, openUserSettings, rpc, signup } from "./helpers";

test("a fact's wording, category and spaces are edited in place", async ({ page }, testInfo) => {
  const stamp = Date.now();
  await signup(page, `profile-edit-${stamp}@rakazo.test`, "password12", "Edit Tester");
  await completeOnboarding(page);
  const side = await rpc<{ id: string }>(page, "spaces/create", { name: "Side project" });
  await rpc(page, "profile/update", {
    addFacts: [{ category: "preferences", value: "Prefers tea" }],
  });

  const settings = await openUserSettings(page);
  const profile = settings.getByTestId("user-profile-settings");
  const tea = profile.getByTestId("user-fact").filter({ hasText: "Prefers tea" });
  await tea.getByRole("button", { name: "Edit" }).click();

  const editor = profile.getByTestId("user-fact-editor");
  const wording = editor.getByRole("textbox", { name: "Fact" });
  await expect(wording).toBeFocused();
  await wording.fill("Prefers green tea");
  await editor.getByRole("combobox", { name: "Category" }).selectOption("habits");
  await editor.getByRole("button", { name: "All spaces" }).click();
  await page.getByRole("menuitemcheckbox", { name: "Side project" }).click();
  await expect(page.getByRole("menuitemcheckbox", { name: "All spaces" })).not.toBeChecked();
  await page.keyboard.press("Escape");
  await expect(editor.getByRole("button", { name: "Side project" })).toBeVisible();
  await captureScreenshot(page, testInfo, "user-profile-edit");

  await editor.getByRole("button", { name: "Save", exact: true }).click();
  await expect(editor).toHaveCount(0);
  const edited = profile
    .getByTestId("user-facts-habits")
    .getByTestId("user-fact")
    .filter({ hasText: "Prefers green tea" });
  await expect(edited).toContainText("Side project");
  await expect(tea).toHaveCount(0);
  const teaFact = async () =>
    (await rpc<UserProfileState>(page, "profile/get", null)).facts.find((fact) =>
      fact.value.includes("tea"),
    );
  expect(await teaFact()).toMatchObject({
    value: "Prefers green tea",
    category: "habits",
    allSpaces: false,
    spaceIds: [side.id],
  });

  // Escape leaves the fact as it was; showing it everywhere again clears the limit.
  await edited.getByRole("button", { name: "Edit" }).click();
  await editor.getByRole("textbox", { name: "Fact" }).fill("Discarded");
  await page.keyboard.press("Escape");
  await expect(editor).toHaveCount(0);
  await expect(edited).toContainText("Prefers green tea");
  await expect(settings).toBeVisible();

  await edited.getByRole("button", { name: "Edit" }).click();
  await editor.getByRole("button", { name: "Side project" }).click();
  await page.getByRole("menuitemcheckbox", { name: "All spaces" }).click();
  await page.keyboard.press("Escape");
  await editor.getByRole("button", { name: "Save", exact: true }).click();
  await expect(editor).toHaveCount(0);
  await expect(edited).not.toContainText("Side project");
  expect(await teaFact()).toMatchObject({
    value: "Prefers green tea",
    allSpaces: true,
    spaceIds: [],
  });
});