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

test.describe('UI case for member tests', async () => {
    let loginPage: LoginPage;
    let memberPage: MemberPage;

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

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

        await memberPage.open();
    });

    test('SETTING_005 - Verify UI Member when empty state', {
        tag: ['@SETTING_005', '@member', '@ui']
    }, async ({ page }) => {
        await expect(page.locator('#root')).toMatchAriaSnapshot(`
    - img
    - text: Members
    - heading "Manage" [level=2]
    - img
    - text: Show
    - textbox: /\\d+/
    - text: entries
    - img
    - textbox "Search..."
    - table:
      - rowgroup:
        - row "Full Name  Phone Number  Email Address  Address  Status ":
          - cell "Full Name "
          - cell "Phone Number "
          - cell "Email Address "
          - cell "Address "
          - cell "Status "
      - rowgroup:
        - row "Auto Test.Empty -- portal_auto_empty@testmail.loprx.com -- Active":
          - cell "Auto Test.Empty":
            - link "Auto Test.Empty":
              - /url: /setting/members/62
          - cell "--":
            - link "--":
              - /url: /setting/members/62
          - cell "portal_auto_empty@testmail.loprx.com":
            - link "portal_auto_empty@testmail.loprx.com":
              - /url: /setting/members/62
          - cell "--":
            - link "--":
              - /url: /setting/members/62
          - cell "Active":
            - link "Active":
              - /url: /setting/members/62
    - paragraph: Showing 1 to 1 of 1 entries
    `);
    });

    test('SETTING_006 - Verify UI Member when have shared request', {
        tag: ['@SETTING_006', '@member', '@ui']
    }, async ({ page }) => {
        await expect(page.locator('#root')).toMatchAriaSnapshot(`
    - text: Show
    - textbox: /\\d+/
    - text: entries
    - img
    - textbox "Search..."
    `);

        await expect(async () => {
            const rowCount = await memberPage.dashboardLoc.table.container.locator('tbody').locator('tr').count();
            expect(rowCount).toBeGreaterThan(1);
        }).toPass();

        // Verify default columns visible
        const defaultColumns = ['Full Name', 'Phone Number', 'Email Address', 'Address', 'Status'];
        for (let i = 0; i < defaultColumns.length; i++) {
            await expect(memberPage.dashboardLoc.table.headingColumn(defaultColumns[i])).toBeVisible();
        }
    });

    test('SETTING_007 - Verify feature Search Member', {
        tag: ['@SETTING_007', '@member', '@ui']
    }, async ({ conf }) => {
        for (const [key, value] of Object.entries(conf.data.search_data.invalid as Record<string, any>)) {
            await test.step(`Search with invalid ${key}`, async () => {
                await memberPage.search(value);
                await expect(async () => {
                    const rowCount = await memberPage.dashboardLoc.table.container.locator('tbody').locator('tr').count();
                    expect(rowCount).toBe(0);
                }).toPass();
                await expect(memberPage.dashboardLoc.table.noResult.first()).toBeVisible();
            });
        }

        for (const [key, value] of Object.entries(conf.data.search_data.valid as Record<string, any>)) {
            await test.step(`Search with valid ${key}`, async () => {
                await memberPage.search(value);
                if (key === 'phone') {
                    await expect(memberPage.dashboardLoc.table.itemInRow(conf.data.search_data.invalid.invalid_phone).first()).toBeVisible();
                    await expect(async () => {
                        const rowCount = await memberPage.dashboardLoc.table.container.locator('tbody').locator('tr').count();
                        expect(rowCount).toBe(1);
                    }).toPass();
                    await expect(memberPage.dashboardLoc.table.noResult.first()).not.toBeVisible();
                } else {
                    await expect(memberPage.dashboardLoc.table.itemInRow(value).first()).toBeVisible();
                    await expect(async () => {
                        const rowCount = await memberPage.dashboardLoc.table.container.locator('tbody').locator('tr').count();
                        expect(rowCount).toBe(1);
                    }).toPass();
                    await expect(memberPage.dashboardLoc.table.noResult.first()).not.toBeVisible();
                }
            });
        }

        await expect(async () => {
            const rowCount = await memberPage.dashboardLoc.table.container.locator('tbody').locator('tr').count();
            expect(rowCount).toBe(1);
        }).toPass();
    });
});