import { test, expect } from "../../fixtures/index";
import { LoginPage } from "../../pom/login.page";
import { BusinessPage } from "../../pom/business/business.page";

test.describe("UI case for request tests", async () => {
  let loginPage: LoginPage;
  let businessPage: BusinessPage;

  test.beforeEach(async ({ page, conf }) => {
    loginPage = new LoginPage(page);
    businessPage = new BusinessPage(page);

    await loginPage.open();
    await loginPage.login(conf.data.username, conf.data.password);
    await businessPage.open();
  });

  test('BUSINESS_001 - Verify UI when empty state', {
    tag: ['@BUSINESS_001', '@business', '@ui']
  }, async ({ conf }) => {
    await test.step('Verify heading and create button', async () => {
      await expect(businessPage.dashboardLoc.root).toMatchAriaSnapshot(`
      - img
      - text: Businesses
      - button "New Business":
        - img
      `);
    });


    await test.step('Verify empty state', async () => {
      await expect(businessPage.dashboardLoc.root).toMatchAriaSnapshot(`
        - table:
          - rowgroup:
            - row "Pin Type  Business Name  Phone  Email  Address ":
              - cell "Pin"
              - cell "Type "
              - cell "Business Name "
              - cell "Phone "
              - cell "Email "
              - cell "Address "
        - paragraph: /Showing 1 to 1 of 1 entries/
        `);

      expect(async () => {
        const rowCount = await businessPage.getTableRowCount();
        expect(rowCount).toBe(1);
      }).toPass();
    });
  });

  test("BUSINESS_002 - Verify UI when have business", {
    tag: ["@BUSINESS_002", "@business", "@ui"],
  },
    async () => {
      await test.step("Reset to defaul column", async () => {
        await businessPage.resetToDefaultColumn(businessPage.businessProps.customizedColumns);
      })

      await test.step('Verify table: headings, footers', async () => {
        await expect(businessPage.dashboardLoc.root).toMatchAriaSnapshot(`
        - table:
          - rowgroup:
            - row "Pin Type  Business Name  Phone  Email  Address ":
              - cell "Pin"
              - cell "Type "
              - cell "Business Name "
              - cell "Phone "
              - cell "Email "
              - cell "Address "
        - paragraph: /Showing 1 to \\d+ of \\d+ entries/
        - list:
          - listitem:
            - img
            - text: Prev
          - listitem: "1"
          - listitem: "2"
          - listitem: "3"
          - listitem: /\\d+/
          - listitem:
            - text: Next
            - img
        `);
      });

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

  test("BUSINESS_009 - Verify UI create New Business", {
    tag: ["@BUSINESS_009", "@business", "@ui", "@PRODUCTION_READ_ONLY"],
  }, async () => {
    await test.step("Verify UI header create new business", async () => {
      await businessPage.dashboardLoc.buttonByText("New Business").click();
      await expect(businessPage.dashboardLoc.root).toMatchAriaSnapshot(`
        - heading "New Business" [level=3]
        - button "Close"
        `);
    })

    await test.step("Verify UI body create new business", async () => {
        await expect(businessPage.dashboardLoc.root).toMatchAriaSnapshot(`
          - img
          - text: Business Type
          - textbox "Business Type"
          - button "×"
          - text: Business Name *
          - textbox "Business Name *"
          - text: Email Address
          - textbox "Email Address"
          - text: Phone Number
          - textbox "Phone Number"
          - text: Fax number
          - textbox "Fax number"
          - text: Website Address
          - textbox "Website Address"
          - text: Address
          - textbox "Address"
          - text: Suite, unit, etc
          - textbox "Suite, unit, etc"
          - text: City
          - textbox "City"
          - text: State
          - textbox "State"
          - text: Zip/Postal Code
          - textbox
          - text: Tag
          - textbox "Tag"
          - text: Assign a tag(s) that further describes the business.
          `);
    })

    await test.step("Verify UI footer create new business", async () => {
      await expect(businessPage.dashboardLoc.root).toMatchAriaSnapshot(`
        - button "Cancel"
        - checkbox "Create another business"
        - text: Create another business
        - button "Create"
        `);
    })
  })

  test("BUSINESS_010 - Verify detail UI Business", {
    tag: ["@BUSINESS_010", "@business", "@ui", "@PRODUCTION_READ_ONLY"]
  }, async ({ conf }) => {
    await businessPage.getDetailCase(conf.data.business_name);
    await expect(businessPage.dashboardLoc.root).toMatchAriaSnapshot(`
        - text: (Portal_Automation_Testing)
        - img
        - text: "Email Address: -- - Phone Number: -- Website Address: -- - Address: Automation_Testing, Automation_Testing Tag"
        - img
        - paragraph: Contacts
        - paragraph: Cases
        - paragraph: Notes & Preferences
        - button "Update"
        `);
  })

  test("BUSINESS_011 - Verify UI when open modal add new contact in detail business", {
    tag: ["@BUSINESS_011", "@business", "@ui"]
  }, async ({ conf }) => {
    await test.step("Get search business and go to modal add new contact", async () => {
      await businessPage.getDetailCase(conf.data.business_name);
      await expect(businessPage.dashboardLoc.detail.tabName("Contacts")).toBeVisible();
      await businessPage.dashboardLoc.detail.tabName("Contacts").click();
      await businessPage.businessLoc.threeDotsBtn.waitFor({ state: 'visible' });
      await businessPage.waitForSecond(2);
      await businessPage.businessLoc.threeDotsBtn.click({ timeout: 5_000 });
      await businessPage.businessLoc.listActionDropdown("Add new Contact").click();
    })

    await test.step("Verify UI modal add new contact in detail business", async () => {
      await expect(businessPage.dashboardLoc.root).toMatchAriaSnapshot(businessPage.businessSnapshot.createNewContactHeaderInDetailBusiness);
      await expect(businessPage.dashboardLoc.root).toMatchAriaSnapshot(businessPage.businessSnapshot.createNewContactBodyInDetailBusiness);
      await expect(businessPage.dashboardLoc.root).toMatchAriaSnapshot(businessPage.businessSnapshot.createNewContactFooterInDetailBusiness);
    })
  })
});
