import { randomUUID } from "node:crypto";

import { expect, test } from "@playwright/test";

import { loginViaUi } from "../support/login-via-ui";

import { createCustomerViaUi } from "./support/create-customer-via-ui";
import { searchCustomersViaUi } from "./support/search-customers-via-ui";

test("CUSTOMERS-SORT-001: ordenar por nombre desde UI devuelve ASC y DESC desde el servidor", async ({
  page,
}, testInfo) => {
  await loginViaUi(page);
  const group = `e2esort${randomUUID().replaceAll("-", "")}`;
  const middle = await createCustomerViaUi(page, testInfo, `E2E SORT MMM ${group}`);
  const last = await createCustomerViaUi(page, testInfo, `E2E SORT ZZZ ${group}`);
  const first = await createCustomerViaUi(page, testInfo, `E2E SORT AAA ${group}`);
  await page.goto("/customers");
  await searchCustomersViaUi(page, group);
  const rows = page.locator('[data-testid^="customer-edit-"]');
  await expect(rows).toHaveCount(3);

  for (const [direction, customers] of [
    ["asc", [first, middle, last]],
    ["desc", [last, middle, first]],
  ] as const) {
    await page.getByTestId("data-table-sort-customer").click();
    await page.getByTestId(`data-table-sort-customer-${direction}`).click();
    await expect(page).toHaveURL(
      (url) =>
        url.searchParams.get("sortField") === "name" &&
        url.searchParams.get("sortDirection") === direction
    );
    // Orden de filas visibles, con paginación y ordenación manuales en la tabla real.
    await expect
      .poll(() =>
        rows.evaluateAll((elements) =>
          elements.map((element) => element.getAttribute("data-testid"))
        )
      )
      .toEqual(customers.map((customer) => `customer-edit-${customer.id}`));
  }
});