import { test, expect } from '../../fixtures/index';
import { ClientPage } from '../../pom/client.page';
import { LoginPage } from '../../pom/login.page';
import { takeScreenshot, verifyScreenshot } from '../../utils/screenshot';


test.describe('UI case for client tests', async () => {
    let loginPage: LoginPage;
    let clientPage: ClientPage;

    test.beforeEach(async ({ page, conf }) => {
        loginPage = new LoginPage(page);
        clientPage = new ClientPage(page);
        clientPage.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 clientPage.open();
    });

    test('CLIENT_001 - Verify màn client UI - empty state', {
        tag: ['@CLIENT_001', '@client', '@ui']
    }, async ({ conf }) => {
        await expect(clientPage.clientLoc.heading).toBeVisible();

        // Verify New client button shown and enabled
        await verifyScreenshot('client-empty-ui.png', clientPage.clientLoc.mainContainer);
    });

    test('CLIENT_002 - Verify màn client UI - have records', {
        tag: ['@CLIENT_002', '@client', '@ui']
    }, async ({ conf }) => {
        await test.step('Verify default settings', async () => {
            // Search bar
            await expect(clientPage.clientLoc.heading).toBeVisible();
            await verifyScreenshot('client-personal-search-bar.png', clientPage.clientLoc.personalSearch);

            // Filter popup
            await clientPage.clientLoc.btnFilter.click();
            await expect(clientPage.clientLoc.filterDialog.container).toBeVisible();
            await verifyScreenshot('client-filter-ui.png', clientPage.clientLoc.filterDialog.container);
            await clientPage.clientLoc.filterDialog.iconClose.click();
            await expect(clientPage.clientLoc.filterDialog.container).not.toBeVisible();

            // Customize column popup
            await clientPage.clientLoc.btnThreedot.click();
            await expect(clientPage.clientLoc.customizedColumnMenu).toBeVisible();
            await clientPage.clientLoc.customizedColumnMenu.click();
            await expect(clientPage.clientLoc.modalCustomizedColumn).toBeVisible();
            await verifyScreenshot('client-customized-column-ui.png', clientPage.clientLoc.modalCustomizedColumn);
            await clientPage.clientLoc.iconCloseModalCustomizedColumn.click();
            await expect(clientPage.clientLoc.modalCustomizedColumn).not.toBeVisible();

            // Archived client function work
            await clientPage.clientLoc.btnThreedot.click();
            await expect(clientPage.clientLoc.archivedClient).toBeVisible();
            await clientPage.clientLoc.archivedClient.click();
            await expect(clientPage.clientLoc.archivedClientFilter).toBeVisible();
            await clientPage.clientLoc.btnThreedot.click();
            await expect(clientPage.clientLoc.unarchivedClient).toBeVisible();
            await clientPage.clientLoc.unarchivedClient.click();
            await expect(clientPage.clientLoc.archivedClientFilter).not.toBeVisible();

            // Verify new client popup
            await clientPage.clientLoc.btnNewClient.click();
            await expect(clientPage.clientLoc.newClientDialog).toBeVisible();
            await verifyScreenshot('client-new-client-ui.png', clientPage.clientLoc.newClientDialog);
            await clientPage.clientLoc.btnCancel.click();
            await expect(clientPage.clientLoc.newClientDialog).not.toBeVisible();
        })
    });

    test("CLIENT_007 - Verify UI create new client", {
        tag: ['@CLIENT_007', '@client', '@ui', "@PRODUCTION_READ_ONLY"]
    }, async () => {
        await clientPage.dashboardLoc.buttonByText("New Client").click();

        await test.step("Verify UI header create client", async () => {
            await expect(clientPage.dashboardLoc.root).toMatchAriaSnapshot(`
            - heading "New Client" [level=3]
            - button "Close"
            `);
        })

        await expect(clientPage.dashboardLoc.root).toMatchAriaSnapshot(`
          - img
          - text: First Name *
          - textbox "First Name *"
          - text: Last Name *
          - textbox "Last Name *"
          - text: Date Of Birth (DoB)
          - textbox "Date Of Birth (DoB)"
          - text: Phone Number
          - textbox "Phone Number"
          - text: Gender
          - textbox "Gender"
          - text: Email Address
          - textbox "Email 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 "Zip/Postal Code"
          - text: Tag
          - textbox "Tag"
          - text: Assign a tag(s) that further describes the client. Note
          - textbox "Note"
          `);

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