import { expect } from "@playwright/test";
import { test } from "../fixtures";
import { registerAndLogin, createList, createMealWithIngredients } from "../helpers";

test("a user can add a meal's ingredients to a list via the picker", async ({ page }) => {
  await registerAndLogin(page, "alice@example.com");
  await createMealWithIngredients(page, "Spaghetti Bolognese", [
    { name: "Penne", quantity: "500g" },
    { name: "Tomato", quantity: "2" },
  ]);
  await createList(page, "Weekly shop");

  // Open the add-meal picker.
  await page.click(".add-meal-button");
  const picker = page.locator(".meal-picker-backdrop");
  await expect(picker).toBeVisible();
  await expect(picker.locator(".meal-picker-button").filter({ hasText: "Spaghetti Bolognese" })).toBeVisible();

  // Select the meal.
  await picker.locator(".meal-picker-button").filter({ hasText: "Spaghetti Bolognese" }).click();

  // The picker closes and the meal's ingredients appear as items.
  await expect(picker).toHaveCount(0);
  await expect(page.locator(".item-row").filter({ hasText: "Penne" })).toBeVisible();
  await expect(page.locator(".item-row").filter({ hasText: "Tomato" })).toBeVisible();
  await expect(page.locator(".item-row").filter({ hasText: "Penne" }).locator(".item-qty")).toHaveText("(500g)");
});

test("the add-meal picker closes via the close button", async ({ page }) => {
  await registerAndLogin(page, "alice@example.com");
  await createMealWithIngredients(page, "Spaghetti Bolognese", [{ name: "Penne" }]);
  await createList(page, "Weekly shop");

  await page.click(".add-meal-button");
  const picker = page.locator(".meal-picker-backdrop");
  await expect(picker).toBeVisible();

  await picker.locator(".meal-picker-close").click();
  await expect(picker).toHaveCount(0);
});

test("the add-meal picker closes when clicking outside", async ({ page }) => {
  await registerAndLogin(page, "alice@example.com");
  await createMealWithIngredients(page, "Spaghetti Bolognese", [{ name: "Penne" }]);
  await createList(page, "Weekly shop");

  await page.click(".add-meal-button");
  const picker = page.locator(".meal-picker-backdrop");
  await expect(picker).toBeVisible();

  // Click the backdrop itself (outside the modal card), at the viewport corner.
  await page.mouse.click(10, 10);
  await expect(picker).toHaveCount(0);
});