import { expect, test } from "@playwright/test";
import { DashboardPage } from "../pages/Dashboard";
import { SharedFormPage } from "../pages/SharedForm";
import setup from "../setup";

test.describe("Attachment column", () => {
  let dashboard: DashboardPage;
  let context: any;

  test.beforeEach(async ({ page }) => {
    context = await setup({ page });
    dashboard = new DashboardPage(page, context.project);
  });

  test("Create and verify atttachent column, verify it in shared form,", async ({
    page,
    context,
  }) => {
    await dashboard.treeView.openTable({ title: "Country" });
    await dashboard.grid.column.create({
      title: "testAttach",
      type: "Attachment",
    });

    for (let i = 4; i <= 6; i++) {
      const filepath = `${process.cwd()}/fixtures/sampleFiles/${i}.json`;
      await dashboard.grid.cell.attachment.addFile({
        index: i,
        columnHeader: "testAttach",
        filePath: filepath,
      });
      await dashboard.grid.cell.attachment.verifyFile({
        index: i,
        columnHeader: "testAttach",
      });
    }

    await dashboard.viewSidebar.createFormView({
      title: "Form 1",
    });
    await dashboard.form.toolbar.clickShareView();
    const sharedFormUrl = await dashboard.form.toolbar.shareView.getShareLink();
    await dashboard.form.toolbar.shareView.close();
    await dashboard.viewSidebar.openView({ title: "Country" });

    // Verify attachment in shared form
    const newPage = await context.newPage();
    await newPage.goto(sharedFormUrl);
    const sharedForm = new SharedFormPage(newPage);
    await sharedForm.cell.fillText({
      index: 0,
      columnHeader: "Country",
      text: "test",
    });
    await sharedForm.cell.attachment.addFile({
      columnHeader: "testAttach",
      filePath: `${process.cwd()}/fixtures/sampleFiles/1.json`,
    });
    await sharedForm.submit();
    await sharedForm.verifySuccessMessage();
    await newPage.close();

    // Verify attachment in csv
    await dashboard.grid.toolbar.clickFields();
    await dashboard.grid.toolbar.fields.click({ title: "LastUpdate" });
    await dashboard.grid.toolbar.clickActions();

    // Headless mode observation- menu doesn't render in one go
    // Download button appears before menu is fully rendered
    await dashboard.rootPage.waitForTimeout(500);

    await dashboard.grid.toolbar.actions.click("Download");

    const csvFileData: string = await dashboard.downloadAndGetFile({
      downloadUIAction:
        dashboard.grid.toolbar.actions.clickDownloadSubmenu("Download as CSV"),
    });
    const csvArray = csvFileData.split("\r\n");
    const columns = csvArray[0];
    const rows = csvArray.slice(1);
    const cells = rows[4].split(",");

    await expect(columns).toBe("Country,City List,testAttach");
    await expect(cells[0]).toBe("Anguilla");
    await expect(cells[1]).toBe("South Hill");
    await expect(
      cells[2].includes("4.json(http://localhost:8080/download/")
    ).toBe(true);
  });
});