import { test, expect } from '../../../fixtures/index';
import { LoginPage } from '../../../pom/login.page';
import { CasePage } from '../../../pom/case/case.page';

test.describe('Case Module - UI Validation', async () => {
  let loginPage: LoginPage;
  let casePage: CasePage;

  test.beforeEach(async ({ page, conf, context }) => {
    loginPage = new LoginPage(page);
    casePage = new CasePage(page);
    casePage.loadBusinessNames(conf.data.business_singular, conf.data.business_plural);
    await loginPage.open();

    await loginPage.login(conf.data.username, conf.data.password);
    await expect(loginPage.baseLoc.dashboardContainer).toBeVisible();
    await casePage.open();
  });

  test('CASE_001 - Verify UI when empty state', {
    tag: ['@CASE_001', '@case', '@ui']
  }, async ({ }) => {
    await test.step('Verify heading and create button', async () => {
      await expect(casePage.dashboardLoc.root).toMatchAriaSnapshot(casePage.caseSnapshot.headingAndCreateButton);
    });

    await test.step('Verify empty state', async () => {
      await expect(casePage.dashboardLoc.root).toMatchAriaSnapshot(casePage.caseSnapshot.emptyState);
    });
  });

  test('CASE_002 - Verify UI when have records', {
    tag: ['@CASE_002', '@case', '@ui']
  }, async ({ }) => {
    await casePage.resetToDefaultColumn(casePage.caseProps.customizedColumns);

    await test.step('Verify table: headings, footers', async () => {
      await expect(casePage.dashboardLoc.root).toMatchAriaSnapshot(`
          - heading "Manage" [level=2]:
            - img
          - img
          - text: Show
          - textbox: /\\d+/
          - text: entries
          - button "Bulk Edit":
            - img
          - button "Filter":
            - img
          - img
          - textbox "Search..."
          - table:
            - rowgroup:
              - 'row "Pin Case #  Patient Name  DOI  Status "':
                - cell "Pin"
                - 'cell "Case # "'
                - cell "Patient Name "
                - cell "DOI "
                - cell "Status "
          - paragraph: /Showing 1 to \\d+ of \\d+ entries/
          - list:
            - listitem:
              - img
              - text: Prev
            - listitem: "1"
            - listitem: "2"
            - listitem: "3"
            - listitem: ...
            - listitem: /\\d+/
            - listitem:
              - text: Next
              - img
          `);
    });

    await test.step('Verify have 10 records for the first page', async () => {
      expect(async () => {
        const rowCount = await casePage.getRowCount();
        expect(rowCount).toBe(10);
      }).toPass();
    });
  });

  test("CASE_009 - Verify UI create new case", {
    tag: ['@CASE_009', '@case', '@ui', '@PRODUCTION_READ_ONLY']
  }, async () => {
    await test.step("Verify create case detail", async () => {
      await casePage.caseLoc.buttonByText("New Case").click();
      await expect(casePage.dashboardLoc.root).toMatchAriaSnapshot(`
        - heading "Detail" [level=2]
        - text: Client Name *
        - textbox "Client Name *"
        - text: Enter the name of the client for the Case Date Of Injury (DoI)
        - textbox "Date Of Injury (DoI)"
        - text: If you don't know, leave it blank. Business
        - textbox "Business"
        - text: Choose one or more businesses (law firm, medical practice) that service this case. Category
        - textbox "Category": Unspecified Accident
        - text: Choose a category that describes what type of injury the Case represents Description
        - textbox "Description"
        - text: /Write about the purpose of the this case Character limit \\d+/
        - paragraph: You can add other details after you create the case
        - button "Create Case"
        `);
    });

    await test.step("Verify create case preview", async () => {
      await expect(casePage.dashboardLoc.root).toMatchAriaSnapshot(`
      - heading "Preview" [level=2]
      - heading "Case Name" [level=2]
      - paragraph: Unspecified Accident
      - heading "Client" [level=2]
      - img
      - paragraph: "--"
      - img
      - paragraph: "--"
      - img
      - paragraph: "--"
      - img
      - paragraph: "--"
      - img
      - paragraph: "--"
      - heading "Description" [level=2]
      - paragraph
      `);
    });
  })

  test("CASE_012 - Verify UI case with full information and lack of information", {
    tag: ['@CASE_012', '@case', '@ui', '@PRODUCTION_READ_ONLY']
  }, async ({ conf }) => {
    await test.step("Verify UI with case lack of information", async () => {
      await casePage.getDetailCase(conf.data.case_lack);

      await expect(casePage.page.locator('#root')).toMatchAriaSnapshot(casePage.caseSnapshot.caseDetailLackInfo);
    });

    await test.step("Verify UI with case full information", async () => {
      await casePage.open();
      await casePage.getDetailCase(conf.data.case_full);

      await expect(casePage.page.locator('#main')).toMatchAriaSnapshot(casePage.caseSnapshot.caseDetailFullInfo);
    });
  });

  test("CASE_013 - Verify UI update case", {
    tag: ['@CASE_013', '@case', '@ui']
  }, async ({ conf }) => {
    // Search exist data
    await casePage.getDetailCase(conf.data.case);
    await casePage.caseLoc.detail.buttonUpdateCase.first().click();

    // Verify header
    await expect(casePage.page.locator('#modal-case-detail')).toMatchAriaSnapshot(casePage.caseSnapshot.caseUpdateUIHeader);

    // Verify body form
    await expect(casePage.page.locator('#modal-case-detail')).toMatchAriaSnapshot(casePage.caseSnapshot.caseUpdateUIBody);

    // Verify footer
    await expect(casePage.page.locator('#modal-case-detail')).toMatchAriaSnapshot(casePage.caseSnapshot.caseUpdateUIFooter);
  });
});

