import { BusinessPage } from "../../pom/business/business.page";
import { LoginPage } from "../../pom/login.page";
import { test, expect } from "../../fixtures/index";
import { sortArrayAsc } from '../../pom/utils/utlisFunc';
import { Locator, TestInfo } from "@playwright/test";
import { randomString } from "../../utils/array";

test.describe("Verify function for business 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_004 - Verify show entries per page",
    {
      tag: ["@BUSINESS_004", "@business", "@function"],
    },
    async ({ }) => {
      await businessPage.showEntries(30);
      await businessPage.page.waitForTimeout(2000);
      const businessCount = await businessPage.getTotalEntries("businesses");

      await businessPage.showEntries(10);
      await businessPage.page.waitForTimeout(2000);
      const resultMessage1 = await businessPage.page
        .locator(`//p[@class="m-0 text-muted f-14 cl-gray info"]`)
        .innerText();
      const expectedMessage1 = `Showing 1 to 10 of ${businessCount} entries`;
      expect(resultMessage1).toContain(expectedMessage1);

      await businessPage.showEntries(20);
      await businessPage.page.waitForTimeout(2000);
      const resultMessage2 = await businessPage.page
        .locator(`//p[@class="m-0 text-muted f-14 cl-gray info"]`)
        .innerText();
      const expectedMessage2 = `Showing 1 to 20 of ${businessCount} entries`;
      expect(resultMessage2).toContain(expectedMessage2);
    }
  );

  test("BUSINESS_003 - Verify feature Search",
    {
      tag: ["@BUSINESS_003", "@business", "@function"],
    },
    async ({ conf }) => {
      for (const [key, value] of Object.entries(conf.data.search_data as Record<string, any>)) {
        await test.step(`Search with invalid ${key}`, async () => {
          await businessPage.search(value.invalid_data);
          await expect(businessPage.dashboardLoc.table.noResult).toBeVisible();
        });
      }

      for (const [key, value] of Object.entries(conf.data.search_data as Record<string, any>)) {
        await test.step(`Search with valid ${key}`, async () => {
          await businessPage.search(value.valid_data);
          if (key === 'business_phone') {
            await expect(businessPage.dashboardLoc.table.itemInRow(value.invalid_data).first()).toBeVisible();
          } else {
            await expect(businessPage.dashboardLoc.table.itemInRow(value.valid_data).first()).toBeVisible();
          }
        });
      }
    }
  );

  test('BUSINESS_005 - Verify feature sort business', {
    tag: ['@BUSINESS_005', '@business', '@function']
  }, async () => {

    const displayNames = ['Business Name', 'Phone', 'Email'];
    const sortedFieldName = ['name', 'phone_number', 'email_address']
    const propertyNames = ['name', 'phone_number', 'email_address'];
    const directions = ['asc', 'asc', 'asc'];

    for (let i = 0; i < displayNames.length; i++) {
      await expect(businessPage.dashboardLoc.table.headingColumn(displayNames[i])).toBeVisible();
      await businessPage.dashboardLoc.table.headingColumn(displayNames[i]).click();
      await expect(businessPage.page).toHaveURL(
        new RegExp(`.*sort=${sortedFieldName[i]}&direction=${directions[i]}`)
      );

      let apiDataUrl = `businesses?return_type=json&sort=${propertyNames[i]}&direction=${directions[i]}`;
      const data = await businessPage.getDataInTable(displayNames[i], propertyNames[i], apiDataUrl);
      const dataUI = sortArrayAsc(data.dataUI);
      console.log(`Sort by: ${displayNames[i]}, direction: ${directions[i]}, property: ${propertyNames[i]}`)
      expect(data.dataApi).toEqual(dataUI);
    }
  });

  test('BUSINESS_006 - Verify feature filter business', {
    tag: ['@BUSINESS_006', '@business', '@feature']
  }, async ({ conf }) => {
    const filterFields = businessPage.businessProps.filterProperties;
    for (let i = 0; i < filterFields.length; i++) {
      // clear filter
      await businessPage.open();

      // prepare locator
      let fieldLocator: Locator;
      switch (filterFields[i].type) {
        case 'input':
          fieldLocator = businessPage.dashboardLoc.search.filter.popup.inputField(filterFields[i].name);
          break;
        default:
          throw new Error(`Unsupported filter type: ${filterFields[i].type}`);
      }

      // Fill invalid value
      if (filterFields[i].name !== 'business_type_id') {
        await businessPage.dashboardLoc.search.filter.btn.click();
        await expect(businessPage.dashboardLoc.search.filter.popup.container).toBeVisible();
        await fieldLocator.fill(conf.data.filter_data[filterFields[i].name].invalid_data);
        await businessPage.dashboardLoc.search.filter.popup.btnApply.click();
        await expect(businessPage.dashboardLoc.table.noResult).toBeVisible();
      }

      // Fill valid value
      await businessPage.dashboardLoc.search.filter.btn.click();
      await expect(businessPage.dashboardLoc.search.filter.popup.container).toBeVisible();
      if (filterFields[i].name !== 'business_type_id') {
        await fieldLocator.fill(conf.data.filter_data[filterFields[i].name].valid_data);
      } else {
        await fieldLocator.click();
        await expect(businessPage.businessLoc.optionBusinessType("Urgent Care")).toBeVisible();
        await businessPage.businessLoc.optionBusinessType("Urgent Care").click();
      }
      await businessPage.dashboardLoc.search.filter.popup.btnApply.click();
      const dataFilterFields = await businessPage.filterSingleField("businesses", filterFields[i].name, conf.data.filter_data[filterFields[i].name].valid_data, filterFields[i].paramFilter);
      expect(dataFilterFields.every(item => item === conf.data.filter_data[filterFields[i].name].valid_data)).toBeTruthy();
      await expect(businessPage.dashboardLoc.table.noResult).not.toBeVisible();
    }
  });

  test('BUSINESS_007 - Verify feature Pin', {
    tag: ['@BUSINESS_007', '@business', '@feature']
  }, async ({ conf }) => {
    await test.step('Search and verify icon Pin visible', async () => {
      //Search
      await businessPage.businessLoc.inputSearch.fill(conf.data.business_name);
      await expect(businessPage.dashboardLoc.table.headingColumn('Pin')).toBeVisible();

      //verify icon Pin visible
      await expect(businessPage.businessLoc.pinIcon(conf.data.business_name)).toBeVisible()
    });

    await test.step('Verify Pin and unpin feature', async () => {
      //Click Pin icon and verify
      await businessPage.businessLoc.pinIcon(conf.data.business_name).click();
      await expect(businessPage.businessLoc.pinnedIcon(conf.data.business_name)).toBeVisible();
      await expect(businessPage.businessLoc.firstBusiness(conf.data.business_id)).toBeVisible();

      // Click unpin
      await businessPage.businessLoc.pinnedIcon(conf.data.business_name).click()
      await expect(businessPage.businessLoc.pinIcon(conf.data.business_name)).toBeVisible();

    });
  });

  test('BUSINESS_008 - Verify feature customized columns', {
    tag: ['@BUSINESS_008', '@business', '@ui']
  }, async () => {
    const customThreeDotLocator = businessPage.genLoc("//div[contains(@class, 'dropdown d-flex align-items-center')]");
    // Verify default columns displayed
    await test.step("Verify default columns displayed", async () => {
      const customizedColumns = businessPage.businessProps.customizedColumns;
      for (let i = 0; i < customizedColumns.length; i++) {
        if (customizedColumns[i].default) {
          await expect(businessPage.dashboardLoc.listing.heading.headingColumn(customizedColumns[i].tableDisplayName)).toBeVisible();
        }
      }
    });

    // Verify customized column show disable items and active items
    await test.step("Verify customized columns popup state", async () => {
      await businessPage.openThreedotMenu(businessPage.businessProps.threeDotDropdownMenus.customizedColumn, customThreeDotLocator);

      // Verify enabled column and disabled column
      const customizedColumns = businessPage.businessProps.customizedColumns;
      for (let i = 0; i < customizedColumns.length; i++) {
        if (customizedColumns[i].default) {
          await expect(businessPage.dashboardLoc.listing.popup.customizedColumn.columnCheckbox(customizedColumns[i].name)).toBeDisabled();
        } else {
          await expect(businessPage.dashboardLoc.listing.popup.customizedColumn.columnCheckbox(customizedColumns[i].name)).toBeEnabled();
        }
      }
    });

    // Pre-condition: disable all enabled column
    await test.step("Pre-condition: disable all enabled column", async () => {
      const customizedColumns = businessPage.businessProps.customizedColumns;
      for (let i = 0; i < customizedColumns.length; i++) {
        if (!customizedColumns[i].default) {
          await businessPage.dashboardLoc.listing.popup.customizedColumn.columnCheckbox(customizedColumns[i].name).setChecked(false);
        }
      }
      await businessPage.dashboardLoc.listing.popup.customizedColumn.btnApply.click();
    });

    // Check each columns and verify it shown
    await test.step("Check each columns and verify it shown", async () => {
      await businessPage.open();
      const customizedColumns = businessPage.businessProps.customizedColumns.filter(column => !column.default);
      for (let i = 0; i < customizedColumns.length; i++) {
        await businessPage.openThreedotMenu(businessPage.businessProps.threeDotDropdownMenus.customizedColumn, customThreeDotLocator);
        await businessPage.dashboardLoc.listing.popup.customizedColumn.columnCheckbox(customizedColumns[i].name).setChecked(true);
        await businessPage.dashboardLoc.listing.popup.customizedColumn.btnApply.click();
        await expect(businessPage.dashboardLoc.listing.heading.headingColumn(customizedColumns[i].tableDisplayName)).toBeVisible();
      }
    });

    // Uncheck each columns and verify it hidden
    await test.step("Uncheck each columns and verify it hidden", async () => {
      await businessPage.open();
      const customizedColumns = businessPage.businessProps.customizedColumns.filter(column => !column.default);
      for (let i = 0; i < customizedColumns.length; i++) {
        await businessPage.openThreedotMenu(businessPage.businessProps.threeDotDropdownMenus.customizedColumn, customThreeDotLocator);
        await businessPage.dashboardLoc.listing.popup.customizedColumn.columnCheckbox(customizedColumns[i].name).setChecked(false);
        await businessPage.dashboardLoc.listing.popup.customizedColumn.btnApply.click();
        await expect(businessPage.dashboardLoc.listing.heading.headingColumn(customizedColumns[i].tableDisplayName)).not.toBeVisible();
      }
    });
  });

  test("BUSINESS_013 - Verify business creation validation", {
    tag: ['@BUSINESS_013', '@business', '@function']
  }, async ({ conf }) => {
    await test.step("Verify required field validation - business name", async () => {
      await businessPage.dashboardLoc.buttonByText("New Business").click();
      await expect(businessPage.dashboardLoc.modal.headerModal('New Business')).toBeVisible();
      await businessPage.dashboardLoc.buttonByText("Create").click();
      await expect(businessPage.dashboardLoc.modal.errorMessage("The business name is required.")).toBeVisible();
    });

    await test.step("Verify email format validation", async () => {
      const emailInput = businessPage.dashboardLoc.modal.inputByID("input_email_address");

      await emailInput.fill(conf.data.invalid_email);
      await businessPage.dashboardLoc.buttonByText("Create").click();

      await expect(businessPage.dashboardLoc.modal.errorMessageSpan("The email address field is not in the correct format")).toBeVisible();
      await emailInput.clear();
    });

    await test.step("Verify duplicate business name validation", async () => {
      await businessPage.dashboardLoc.modal.inputByID("autocomplete_name").first().fill(conf.data.exist_bussiness);
      await businessPage.waitForSecond(2);
      await businessPage.dashboardLoc.modal.headerModal("New Business").click();
      await businessPage.dashboardLoc.buttonByText("Create").click();

      await expect(businessPage.dashboardLoc.modal.duplicateErrMsg).toBeVisible();

      await businessPage.dashboardLoc.buttonByText("Cancel").nth(5).click();
      await businessPage.dashboardLoc.buttonByText("Leave").click();
    });

    await test.step("Verify character limit validation for all fields", async () => {
      await businessPage.dashboardLoc.buttonByText("New Business").click();
      await expect(businessPage.dashboardLoc.modal.headerModal('New Business')).toBeVisible();

      const inputFields = businessPage.inputCreateBusiness;

      for (const fieldConfig of inputFields) {
        const fieldInput = businessPage.dashboardLoc.modal.inputByID(fieldConfig.id).nth(fieldConfig.child);
        await fieldInput.fill(conf.data.exceed_word);
        await expect(fieldInput).toHaveValue(conf.data.exceed_word);
      }

      await businessPage.dashboardLoc.buttonByText("Create").click();

      for (const fieldConfig of inputFields) {
        const expectedErrorMsg = `The ${fieldConfig.name} field must not be greater than ${fieldConfig.maxExceed} characters.`;

        if (fieldConfig.name === "name") {
          await expect(businessPage.dashboardLoc.modal.errorMessage(expectedErrorMsg)).toBeVisible();
        } else {
          await expect(businessPage.dashboardLoc.modal.errorMessageSpan(expectedErrorMsg)).toBeVisible();
        }
      }
    });
  })

  test("BUSINESS_014 - Verify successful business creation", {
    tag: ['@BUSINESS_014', '@business', '@function']
  }, async ({ conf }) => {
    let createdBusinessName: string = "";
    const createFormData = conf.data.input_create;

    await test.step("Create business without create another option", async () => {
      await businessPage.dashboardLoc.buttonByText("New Business").click();
      await expect(businessPage.dashboardLoc.modal.headerModal('New Business')).toBeVisible();

      await test.step("Fill business creation form", async () => {
        for (const fieldConfig of createFormData) {
          const fieldInput = businessPage.dashboardLoc.modal.inputByID(fieldConfig.input_field).nth(fieldConfig.child);

          switch (fieldConfig.type) {
            case "input":
              if (fieldConfig.input_field === "autocomplete_name") {
                createdBusinessName = fieldConfig.value + randomString(5);
                await fieldInput.fill(createdBusinessName);
                await expect(fieldInput).toHaveValue(createdBusinessName);
              } else {
                await fieldInput.fill(fieldConfig.value);
                await expect(fieldInput).toHaveValue(fieldConfig.value);
              }
              break;

            case "select":
              await fieldInput.fill(fieldConfig.value);
              await expect(businessPage.businessLoc.create.optionDropdown(fieldConfig.value)).toBeVisible();
              await businessPage.businessLoc.create.optionDropdown(fieldConfig.value).click();
              break;

            default:
              console.log(`Unknown field type: ${fieldConfig.type} for ${fieldConfig.input_field}`);
          }
        }
      });

      await test.step("Submit business creation", async () => {
        await businessPage.dashboardLoc.modal.headerModal("New Business").click();
        await businessPage.dashboardLoc.buttonByText("Create").click();

        await expect(businessPage.dashboardLoc.msgCreateSuccess.first()).toBeVisible();
        await expect(businessPage.dashboardLoc.modal.headerModal("New Business")).not.toBeVisible();
      });
    });

    await test.step("Verify created business data persistence", async () => {
      await businessPage.getDetailCase(createdBusinessName);
      await businessPage.dashboardLoc.buttonByText("Update").first().click();
      await expect(businessPage.dashboardLoc.modal.headerModal("Business Detail")).toBeVisible();

      for (const fieldConfig of createFormData) {
        if (fieldConfig.input_field === "autocomplete_name") {
          await expect(businessPage.dashboardLoc.modal.inputByID(fieldConfig.input_field).nth(fieldConfig.child)).toHaveValue(createdBusinessName);
        } else if (fieldConfig.input_field === "multi_select_tags") {
          await expect(businessPage.businessLoc.create.tag(fieldConfig.value)).toBeVisible();
        } else {
          await expect(businessPage.dashboardLoc.modal.inputByID(fieldConfig.input_field).first()).toHaveValue(fieldConfig.value);
        }
      }
    });

    await test.step("Verify business creation with create another option", async () => {
      const anotherBusinessName = `Business${randomString(6)}`;

      await businessPage.open();
      await businessPage.dashboardLoc.buttonByText("New Business").click();
      await expect(businessPage.dashboardLoc.modal.headerModal('New Business')).toBeVisible();

      await businessPage.dashboardLoc.modal.inputByID("autocomplete_name").first().fill(anotherBusinessName);
      await businessPage.businessLoc.create.checkboxCreateAnother.check();
      await businessPage.dashboardLoc.buttonByText("Create").click();

      await expect(businessPage.dashboardLoc.msgCreateSuccess.first()).toBeVisible();
      await expect(businessPage.dashboardLoc.modal.headerModal("New Business")).toBeVisible();
    });
  })

  test("BUSINESS_015 - Verify add tag in business's detail", {
    tag: ['@BUSINESS_015', '@business', '@function']
  }, async ({ conf }) => {
    await test.step("Navigate to business detail", async () => {
      await businessPage.getDetailCase(conf.data.business_name);
    });

    await test.step("Verify add tags with tag count greater than 9 (invalid)", async () => {
      await businessPage.addMultipleTags(10);
      await businessPage.saveTags();
      await expect(businessPage.dashboardLoc.tag.errorMaxTag).toBeVisible();
    });

    await test.step("Verify when add < 9 tag (valid)", async () => {
      await businessPage.removeOneTag();
      await businessPage.saveTags();
      await expect(businessPage.dashboardLoc.msgSuccess.first()).toBeVisible();
      await businessPage.dashboardLoc.btnClosePopupNotification.click();
      await expect(businessPage.dashboardLoc.tag.btnSaveTag).not.toBeVisible();

      const tagCount = await businessPage.getTagCount();
      expect(tagCount).toBe(9);
    });

    await test.step("Clear all tag", async () => {
      await businessPage.clearAllTags();
      await businessPage.saveTags();
      await expect(businessPage.dashboardLoc.msgSuccess).toBeVisible();
      await businessPage.waitForSecond(1);
      await businessPage.dashboardLoc.btnClosePopupNotification.click();
      await expect(businessPage.dashboardLoc.tag.btnSaveTag).not.toBeVisible();

      const tagCount = await businessPage.getTagCount();
      expect(tagCount).toBe(0);
    });
  });

  test("BUSINESS_017 - Verify when click add new contact and add new case", {
    tag: ['@BUSINESS_017', '@business_update', '@function']
  }, async ({ conf }) => {
    await test.step("Verify when click add new contact", async () => {
      await businessPage.getDetailCase(conf.data.business_name);
      await expect(businessPage.dashboardLoc.detail.tabName("Contacts")).toBeVisible();
      await businessPage.waitForSecond(1.5);
      await businessPage.dashboardLoc.detail.tabName("Contacts").click({ force: true });
      await businessPage.businessLoc.detail.threeDotsBtn.click();
      await businessPage.businessLoc.detail.dropdownOption("Add new Contact").click();

      await expect(businessPage.dashboardLoc.modal.headerModal("New Contact")).toBeVisible();
      await expect(businessPage.dashboardLoc.root).toMatchAriaSnapshot(businessPage.businessSnapshot.businessCreateNewContactModal);
    });

    await test.step("Verify when click add new case", async () => {
      await businessPage.dashboardLoc.buttonByText("Cancel").nth(5).click();
      await expect(businessPage.dashboardLoc.modal.headerModal("New Contact")).not.toBeVisible();
      await businessPage.dashboardLoc.detail.tabName("Cases").click();
      await businessPage.waitForSecond(1);
      await businessPage.businessLoc.detail.threeDotsBtn.click();
      await businessPage.businessLoc.detail.dropdownOption("Add new Case").click();

      await expect(businessPage.dashboardLoc.common.spanText("New Case")).toBeVisible();
      await expect(businessPage.businessLoc.create.tag(conf.data.business_name)).toBeVisible();
    });
  });

  test("BUSINESS_018 - Verify list Bulk Edit", {
    tag: ['@BUSINESS_018', '@business', '@function']
  }, async ({ conf }) => {
    // Initialize
    await businessPage.getDetailCase(conf.data.business_name);

    // Test scenarios
    await businessPage.verifyBulkEditForTab("Contacts", 3, "Business Detail");
    await businessPage.verifyBulkEditForTab("Contacts", 5, "Business Detail");
    await businessPage.verifyBulkEditForTab("Cases", 3, "Business Detail");
    await businessPage.verifyBulkEditForTab("Cases", 5, "Business Detail", false);
  });
});

test.describe("Verify function for update business tests", async () => {
  let loginPage: LoginPage;
  let businessPage: BusinessPage;

  test.beforeEach("Login and verify data in modal update business", async ({ page, conf }, testInfo: TestInfo) => {
    let dataFromAPI: any;
    let businessExist: string = testInfo.tags.includes('@verifed') ? conf.data.business_name_verified : conf.data.business_name;

    //Login and redirect to Business Page
    loginPage = new LoginPage(page);
    businessPage = new BusinessPage(page);
    await loginPage.open();
    await loginPage.login(conf.data.username, conf.data.password);
    await businessPage.open();

    //Verify detail and modal data update
    await test.step("Search and verify business exist", async () => {
      await businessPage.businessLoc.inputSearch.fill(businessExist);
      await expect(businessPage.dashboardLoc.dataExistInTableRow(businessExist).first()).toBeVisible();
      await businessPage.waitForSecond(2)
      await businessPage.dashboardLoc.dataExistInTableRow(businessExist).first().click({ force: true });
    })

    await test.step("Verify detail page", async () => {
      await expect(businessPage.businessLoc.nameDetailExist(businessExist)).toBeVisible();
      dataFromAPI = await businessPage.fetchDetailBusiness();
      const dataFromUI = await businessPage.getBusinessDetailUI();
      expect(dataFromAPI).toEqual(dataFromUI);
    })

    await test.step("Verify modal update", async () => {
      await businessPage.dashboardLoc.buttonUpdate.click();
      await expect(businessPage.businessLoc.modalFormHeader).toBeVisible();

      const actual = (await businessPage.businessLoc.inputName.evaluate(el => {
        const text = (el.textContent || "").trim();
        // @ts-ignore
        const val = (el.value ?? "").trim();
        return val || text;
      })) as string;

      expect(actual).toContain(businessExist);
      const dataUpdateUI = await businessPage.getBusinessModalUpdateUI();
      expect(dataUpdateUI).toEqual(dataFromAPI);
    })
  })

  test('BUSINESS_UPDATE_004 - Verify that updating with already-verified business', {
    tag: ['@BUSINESS_UPDATE_004', '@business_update', '@function', '@verifed']
  }, async ({ }) => {
    await businessPage.businessLoc.inputName.click();
    await expect(businessPage.businessLoc.modalSuggestion).toBeVisible();
  });

  test('BUSINESS_UPDATE_005 - Verify when updating an unverified business to one that already exists', {
    tag: ['@BUSINESS_UPDATE_005', '@business_update', '@function']
  }, async ({ conf }) => {
    await businessPage.businessLoc.inputName.fill(conf.data.business_name_updated);
    await businessPage.waitForSecond(2);
    await businessPage.dashboardLoc.buttonUpdateInForm.click();

    await expect(businessPage.businessLoc.msgErrorDuplicateBusiness).toBeVisible();
    await expect(businessPage.businessLoc.modalFormHeader).toBeVisible();
  });

  test("BUSINESS_012 - Verify that the business's address update process successfully normalizes the address", {
    tag: ['@BUSINESS_012', '@business_update', '@function']
  }, async ({ conf }) => {
    await test.step("Clear old address", async () => {
      await businessPage.businessLoc.inputAddress.clear();
      await businessPage.businessLoc.inputCity.clear();
      await businessPage.dashboardLoc.buttonUpdateInForm.click();

      await expect(businessPage.dashboardLoc.modal.headerModal("Business Detail")).not.toBeVisible();
      await expect(businessPage.businessLoc.addressDetail).toContainText("--");
    })

    await test.step("Verify update address and city to normalizes text", async () => {
      await businessPage.dashboardLoc.buttonByText("Update").first().click();
      await expect(businessPage.dashboardLoc.modal.headerModal("Business Detail")).toBeVisible();

      await businessPage.businessLoc.inputAddress.fill(conf.data.address);
      await businessPage.businessLoc.inputCity.fill(conf.data.city);
      await businessPage.dashboardLoc.buttonUpdateInForm.click();

      await expect(businessPage.dashboardLoc.modal.headerModal("Business Detail")).not.toBeVisible();
      await expect(businessPage.businessLoc.addressDetail).toContainText(conf.expect.address);
      await expect(businessPage.businessLoc.addressDetail).toContainText(conf.expect.city);
    })
  });

  test("BUSINESS_016 - Verify update business", {
    tag: ['@BUSINESS_016', '@business_update', '@function']
  }, async ({ conf }) => {
    const createFormData = conf.data.input_update;
    await test.step("Clear all data in this business", async () => {
      await businessPage.businessLoc.btnClearTag.click();
      for (const fieldConfig of createFormData) {
        await businessPage.dashboardLoc.modal.inputByID(fieldConfig.input_field).clear();
        await expect(businessPage.dashboardLoc.modal.inputByID(fieldConfig.input_field)).toHaveValue("");
      }
      await businessPage.dashboardLoc.modal.headerModal("Business Detail").click();
      await businessPage.dashboardLoc.buttonByText("Update").nth(1).click();

      await expect(businessPage.businessLoc.msgSuccess.first()).toBeVisible();
      await businessPage.dashboardLoc.btnClosePopupNotification.click();
      await expect(businessPage.dashboardLoc.modal.headerModal("Business Detail")).not.toBeVisible();
    });

    await test.step("Fill data to update business", async () => {
      await businessPage.dashboardLoc.buttonByText("Update").first().click();
      await expect(businessPage.dashboardLoc.modal.headerModal("Business Detail")).toBeVisible();
      await businessPage.waitForSecond(2);

      for (const fieldConfig of createFormData) {
        const fieldInput = businessPage.dashboardLoc.modal.inputByID(fieldConfig.input_field).first();
        switch (fieldConfig.type) {
          case "input":
            await fieldInput.fill(fieldConfig.value);
            await expect(fieldInput).toHaveValue(fieldConfig.value);
            break;
          case "select":
            await fieldInput.fill(fieldConfig.value);
            await expect(businessPage.businessLoc.create.optionDropdown(fieldConfig.value)).toBeVisible();
            await businessPage.businessLoc.create.optionDropdown(fieldConfig.value).click();
            break;
          default:
            console.log(`Unknown field type: ${fieldConfig.type} for ${fieldConfig.input_field}`);
        }
      }

      await businessPage.dashboardLoc.modal.headerModal("Business Detail").click();
      await businessPage.dashboardLoc.buttonByText("Update").nth(1).click();

      await expect(businessPage.businessLoc.msgSuccess).toBeVisible();
      await businessPage.dashboardLoc.btnClosePopupNotification.click();
      await expect(businessPage.dashboardLoc.modal.headerModal("Business Detail")).not.toBeVisible();
    })
  })
})