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

test.describe("Invoice Processing columns drawer (AP-45)", () => {
  test("Columns drawer can hide Tagging and Reset restores it", async ({ page }) => {
    await page.goto("/");
    await expect(
      page.getByTestId("grid-pending").locator('.MuiDataGrid-columnHeader[data-field="tagging"]'),
    ).toBeVisible();

    await page.getByTestId("columns-toggle").click();
    const drawer = page.getByTestId("columns-drawer");
    await expect(drawer).toBeVisible();

    const taggingRow = drawer.getByTestId("columns-visible-tagging");
    await taggingRow.scrollIntoViewIfNeeded();
    await taggingRow.locator('input[type="checkbox"]').evaluate((el: HTMLInputElement) => {
      el.click();
    });
    await expect(
      page.getByTestId("grid-pending").locator('.MuiDataGrid-columnHeader[data-field="tagging"]'),
    ).toHaveCount(0);

    await drawer.getByTestId("columns-selector-reset-button").evaluate((el: HTMLElement) => {
      el.click();
    });
    await expect(
      page.getByTestId("grid-pending").locator('.MuiDataGrid-columnHeader[data-field="tagging"]'),
    ).toBeVisible();
  });
});