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(
    "REQ_001 - 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 ({ conf }) => {
    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 in single step", async () => {
      // First step
      await requestPage.requestLoc.create.itemStep(1).first().click()
      await expect(requestPage.page.locator('#root')).toMatchAriaSnapshot(requestPage.requestSnapshot.createFastSubmissionStep1);
      await requestPage.requestLoc.actionLetterOfProtection.first().click();

      // Second step
      await requestPage.requestLoc.create.itemStep(2).first().click();
      await expect(requestPage.page.locator('#root')).toMatchAriaSnapshot(requestPage.requestSnapshot.createFastSubmissionStep2);

      // Third step
      await requestPage.requestLoc.create.itemStep(3).first().click();
      await expect(requestPage.page.locator('#root')).toMatchAriaSnapshot(requestPage.requestSnapshot.createFastSubmissionStep3);
      await requestPage.fillDataCreateRequest("Type or select a name", "Name", conf.data.patient);

      // Fourth step
      await requestPage.requestLoc.create.itemStep(4).first().click();
      await expect(requestPage.page.locator('#root')).toMatchAriaSnapshot(requestPage.requestSnapshot.createFastSubmissionStep4);

      // Fifth step
      await requestPage.requestLoc.create.itemStep(5).first().click();
      await expect(requestPage.page.locator('#modal-share')).toMatchAriaSnapshot(requestPage.requestSnapshot.createFastSubmissionStep5);
    });

    await test.step("Verify UI when create multi", async () => {
      await requestPage.gotoCreateRequest("multi");
      await requestPage.dashboardLoc.buttonByText("Add more").click();
      await expect(requestPage.page.locator('#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
              `, { timeout: 35_000 });
    })

    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 expect(requestPage.dashboardLoc.modal.headerModal("Notifications settings")).toBeVisible();

      await requestPage.requestLoc.detail.notification.btnTurnOffAll.click();
      await requestPage.requestLoc.detail.btnCofirmRemove.click();
      await expect(requestPage.dashboardLoc.notificationUpdateSuccess).toBeVisible();
      await requestPage.dashboardLoc.closeMsg.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();
      await requestPage.dashboardLoc.closeMsg.click();

      //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 50 files, with a total combined size of up to 50MB. 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 "Please select the attachment to append to the medical or billing record. Ensure it contains the necessary patient details or relevant updates, and confirm it's the correct document before proceeding." [level=4]
        - heading "Request" [level=3]
        - list:
          - listitem:
            - text: "/Request #\\\\d+ : Medical Bill/"
            - list:
              - img
              - text: /Dat Nguyen posted at \\d+\\/\\d+\\/\\d+/
              - checkbox /Dat Nguyen posted at \\d+\\/\\d+\\/\\d+/
      `);
      await contextB.close();
    })
  })
});