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

test("the meals page filters by name as you type", async ({ page }) => {
  await registerAndLogin(page, "alice@example.com");
  await createMeal(page, "Spaghetti Bolognese", "");
  await createMeal(page, "Chicken Curry", "");
  await createMeal(page, "Pancakes", "");

  await page.goto("/meals");
  await expect(page.locator(".list-card").filter({ hasText: "Spaghetti Bolognese" })).toBeVisible();
  await expect(page.locator(".list-card").filter({ hasText: "Chicken Curry" })).toBeVisible();
  await expect(page.locator(".list-card").filter({ hasText: "Pancakes" })).toBeVisible();

  // Type a query; only matching meals remain.
  await page.fill("#meal-search", "chicken");
  await expect(page.locator(".list-card").filter({ hasText: "Chicken Curry" })).toBeVisible();
  await expect(page.locator(".list-card").filter({ hasText: "Spaghetti Bolognese" })).toHaveCount(0);
  await expect(page.locator(".list-card").filter({ hasText: "Pancakes" })).toHaveCount(0);

  // Clearing the search restores all meals.
  await page.fill("#meal-search", "");
  await expect(page.locator(".list-card").filter({ hasText: "Spaghetti Bolognese" })).toBeVisible();
  await expect(page.locator(".list-card").filter({ hasText: "Pancakes" })).toBeVisible();
});

test("the meals page shows an empty state when nothing matches", async ({ page }) => {
  await registerAndLogin(page, "alice@example.com");
  await createMeal(page, "Spaghetti Bolognese", "");

  await page.goto("/meals");
  await page.fill("#meal-search", "zzzz");
  await expect(page.locator(".meal-filter-empty")).toBeVisible();
  await expect(page.locator(".list-card")).toHaveCount(0);
});

test("the add-meal picker filters meals as you type", async ({ page }) => {
  await registerAndLogin(page, "alice@example.com");
  await createMeal(page, "Spaghetti Bolognese", "");
  await createMeal(page, "Chicken Curry", "");
  await createList(page, "Weekly shop");

  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();
  await expect(picker.locator(".meal-picker-button").filter({ hasText: "Chicken Curry" })).toBeVisible();

  await picker.locator(".meal-filter").fill("curry");
  await expect(picker.locator(".meal-picker-button").filter({ hasText: "Chicken Curry" })).toBeVisible();
  await expect(picker.locator(".meal-picker-button").filter({ hasText: "Spaghetti Bolognese" })).toHaveCount(0);

  // The search box keeps focus and the modal stays open.
  await expect(picker.locator(".meal-filter")).toBeFocused();
  await expect(picker).toBeVisible();
});