import { Locator, Page } from "@playwright/test";

/**
 * Add a leftover item with specified ingredient, unit, and quantity
 * Uses the new context menu flow from the leftovers page
 */
export default async function openLeftoverContextMenu(
  page: Page,
  ingredientTitle: string,
): Promise<Locator> {
  // Click the menu button (three dots) next to the ingredient
  // Find the listitem containing the ingredient and click its menu button
  const ingredientListItem = page
    .getByRole("listitem")
    .filter({
      has: page.getByRole("link", { name: new RegExp(ingredientTitle) }),
    })
    .first();

  await ingredientListItem.getByRole("button", { name: "menu" }).click();

  const bottomSheet = page.getByRole("dialog", {
    name: new RegExp(ingredientTitle),
  });

  await bottomSheet.waitFor({ state: "visible" });

  return bottomSheet;
}
