import { test, expect } from "../../fixtures/index";
import { LoginPage } from "../../pom/login.page";
import { RequestPage } from "../../pom/request/request.page";
import { getEnv } from "../../utils/env";

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

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

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

  test(
    "Verify UI when empty state",
    {
      tag: ["@REQ_001", "@request", "@ui"],
    },
    async () => {
      await test.step('Verify heading and create button', async () => {
        await expect(requestPage.dashboardLoc.root).toMatchAriaSnapshot(requestPage.requestSnapshot.headingAndCreateButton);
      });

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

  test("REQ_011 - Verify UI create request with Step by Step", {
    tag: ["@REQ_011", "@request", "@ui", "@PRODUCTION_READ_ONLY"],
  }, async () => {
    await requestPage.gotoCreateRequest("step");
    await expect(requestPage.dashboardLoc.root).toMatchAriaSnapshot(requestPage.requestSnapshot.createRequestStepByStep);
  })

  test("REQ_012 - Verify UI create request with Fast Submission", {
    tag: ["@REQ_012", "@request", "@ui", "@PRODUCTION_READ_ONLY"],
  }, async () => {
    await test.step("Verify UI create request with single record type", async () => {
      await requestPage.gotoCreateRequest("multi");
      await expect(requestPage.dashboardLoc.root).toMatchAriaSnapshot(requestPage.requestSnapshot.createRequestFastSubmission);
    });

    await test.step("Verify UI create request with multi record type", async () => {
      await requestPage.dashboardLoc.buttonByText("Add more").click();
      await expect(requestPage.dashboardLoc.root).toMatchAriaSnapshot(requestPage.requestSnapshot.createRequestFastSubmissionMulti);
    });
  })

  test("REQ_015 - Verify UI self-generated request details", {
    tag: ["@REQ_015", "@request", "@ui"],
  }, async ({ conf }) => {
    await test.step("Verify detail request", async () => {
      await requestPage.getDetailCase(conf.data.case);
      await expect(requestPage.dashboardLoc.root).toMatchAriaSnapshot(requestPage.requestSnapshot.detailRequestHeader);
      await expect(requestPage.dashboardLoc.root).toMatchAriaSnapshot(requestPage.requestSnapshot.detailRequestBody);
    })

    await test.step("Verify edit share business request", async () => {
      await requestPage.requestLoc.detail.btnDropdownEditBusiness.click();
      await expect(requestPage.dashboardLoc.root).toMatchAriaSnapshot(requestPage.requestSnapshot.detailRequestEditShare);
    })
  })

  test("REQ_015A - Verify UI self-generated request details in production", {
    tag: ["@REQ_015A", "@request", "@ui", "@PRODUCTION_READ_ONLY"],
  }, async ({ conf }) => {
    test.skip(getEnv() !== 'production', 'Only run in production');
    await test.step("Verify detail request", async () => {
      await requestPage.getDetailCase(conf.data.case);
      await expect(requestPage.dashboardLoc.root).toMatchAriaSnapshot(requestPage.requestSnapshot.detailRequestHeaderProduction);
    })

    await test.step("Verify edit share business request", async () => {
      await requestPage.requestLoc.detail.btnDropdownEditBusiness.click();
      await expect(requestPage.dashboardLoc.root).toMatchAriaSnapshot(requestPage.requestSnapshot.detailRequestEditShareProduction);
    })
  })

  test("REQ_022 - Verify UI snapshot with action type medical bill", {
    tag: ["@REQ_022", "@request", "@function"]
  }, async ({ conf, browser }) => {
    await test.step("Verify UI by request owner", async () => {
      await requestPage.getDetailCase(conf.data.case);
      await expect(requestPage.dashboardLoc.root).toMatchAriaSnapshot(`
              - listitem:
                - text: /Minh Phong .* Balance/
                - paragraph: /\\$\\d+,\\d+\\.\\d+/
                - text: Finalize Reduction Update Balance
              `);
    })

    await test.step("verify UI of the person receiving the share request", async () => {
      const { context: contextB, requestPage: requestPageB } = await requestPage.loginInAnotherBrowser(browser, conf.data.username_recive, conf.data.password);
      await requestPageB.open();
      await requestPageB.getDetailCase(conf.data.case);
      await expect(requestPageB.dashboardLoc.root).toMatchAriaSnapshot(`
            - listitem:
                - text: /Minh Phong .* Balance/
                - paragraph: /\\$\\d+,\\d+\\.\\d+/
                - text: Finalize Reduction
              `);
      await contextB.close();
    })
  })

  test("REQ_029 - Verify UI when turn off all Notification", {
    tag: ["@REQ_029", "@request", "@function"]
  }, async ({ conf }) => {
    await test.step("Turn off all notifications", async () => {
      await requestPage.getDetailCase(conf.data.case);
      await requestPage.requestLoc.detail.notification.btnOpenModalNoti.nth(1).click();
      await requestPage.requestLoc.detail.notification.btnTurnOffAll.click();
      await requestPage.requestLoc.detail.btnCofirmRemove.click();

      //Verify UI turn off all in app
      await requestPage.requestLoc.detail.notification.btnToggleSettingNoti.first().click();
      await expect(requestPage.page.locator('#flush-collapse-3').first()).toMatchAriaSnapshot(`
              - text: Responses
              - checkbox "Responses"
              - text: Comments
              - checkbox "Comments"
              - text: Discussions
              - checkbox "Discussions"
              `);

      //Verify UI turn off all in mail
      await requestPage.requestLoc.detail.notification.btnToggleSettingNoti.nth(1).click();
      await expect(requestPage.page.locator('#flush-collapse-3').first()).toMatchAriaSnapshot(`
              - text: Comments
              - checkbox "Comments"
              - text: Discussions
              - checkbox "Discussions"
              `);
    })

    await test.step("Turn on all notifications", async () => {
      await requestPage.requestLoc.detail.notification.btnTurnOnAll.click();
      await expect(requestPage.dashboardLoc.notificationUpdateSuccess).toBeVisible();

      //Verify UI turn on all in app
      await requestPage.requestLoc.detail.notification.btnToggleSettingNoti.first().click();
      await expect(requestPage.page.locator('#flush-collapse-3').first()).toMatchAriaSnapshot(`
              - text: Responses
              - checkbox "Responses" [checked]
              - text: Comments
              - checkbox "Comments" [checked]
              - text: Discussions
              - checkbox "Discussions" [checked]
              `);

      //Verify UI turn on all in mail
      await requestPage.requestLoc.detail.notification.btnToggleSettingNoti.first().click();
      await expect(requestPage.page.locator('#flush-collapse-3').first()).toMatchAriaSnapshot(`
              - text: Comments
              - checkbox "Comments" [checked]
              - text: Discussions
              - checkbox "Discussions" [checked]
              `);
    })
  })

  test("REQ_035 - Verify UI Declaration with Authorized Business Affidavit and Non-Authorized Business Affidavit", {
    tag: ["@REQ_035", "@request", "@function"]
  }, async ({ conf, browser }) => {
    await test.step("Verify UI Non-Authorized Business Affidavit", async () => {
      await requestPage.getDetailCase(conf.data.request_not_authorized);
      await requestPage.dashboardLoc.buttonLinkByText("Respond").click();
      await expect(requestPage.page.locator('#modal-snapshot-respond')).toMatchAriaSnapshot(`
          - paragraph: Use the suggested content to jump right in, or type or upload your own content.
          - listitem: Type New
          - listitem: Upload
          - text: Click on
          - img
          - text: to expand the editor to full screen
          - listitem "Font family":
            - button:
              - img
            - img
          - listitem "Font size":
            - button:
              - img
            - img
          - listitem "Fill color or set the text color":
            - button:
              - img
            - img
          - listitem "Bold":
            - button:
              - img
          - listitem "Italic":
            - button:
              - img
          - listitem "Underline":
            - button:
              - img
          - listitem "Strike through":
            - button:
              - img
          - listitem "Insert Unordered List":
            - button:
              - img
            - img
          - listitem "Insert Ordered List":
            - button:
              - img
            - img
          - listitem "Align":
            - button:
              - img
            - img
          - listitem "Insert Image":
            - button:
              - img
          - listitem "Insert table":
            - button:
              - img
          - listitem "Open in fullsize":
            - button:
              - img
          - paragraph
          - text: "Chars: 0 Words: 0"
          - listitem "Select all":
            - button:
              - img
          - text: /You can upload up to 5 files\\. Files can be upto [\\d,.]+[bkmBKM]+\\. Only PDF and image \\(jpg,jpeg,png\\) files are accepted\\./
          - paragraph: Browse or Drop
          - paragraph: files here
          `);
    })

    await test.step("Verify UI Authorized Business Affidavit", async () => {
      const { context: contextB, requestPage: requestPageB } = await requestPage.loginInAnotherBrowser(browser, conf.data.user_affidavit, conf.data.password);
      await requestPageB.open();
      await requestPageB.getDetailCase(conf.data.request_authorized);
      await requestPageB.dashboardLoc.buttonLinkByText("Provide").click();
      await expect(requestPageB.page.locator('#modal-prepare-records-request')).toMatchAriaSnapshot(`
              - heading "Request" [level=3]
              - list:
                - listitem:
                  - text: "/Request #\\\\d+ : Medical Bill/"
                  - list:
                    - img "Dat Nguyen"
                    - text: /Dat Nguyen posted at \\d+\\/\\d+\\/\\d+/
                    - checkbox /Dat Nguyen Dat Nguyen posted at \\d+\\/\\d+\\/\\d+/
              `);
      await contextB.close();
    })
  })
});