import { test } from "@fernir2/saas-kit/test/fixtures";
import { UiTester, setUiTestPage } from "@fernir2/saas-kit/test/fd-test-ui-tester";
import { elements, elementPrefixes, elementSuffixes } from "@fernir2/saas-kit/src/meta/constants";
import { tableElementSuffixes } from "@fernir2/saas-kit/src/fd/fd-component-toolbox";
import { assertElementHaveCheckmark } from "@fernir2/saas-kit/fd-meta-tester-ui/page-objects";
import { iconNames } from "@fernir2/saas-kit/fd-component-toolbox/icon";

test(
    "Contact - when selecting multiple checkboxes in multi-browser " +
        "then checkboxes are selected and relations are added",
    async ({ page }) => {
        // Arrange
        setUiTestPage(page);
        const uiTester = new UiTester(page);
        const externalUrl = "https://saas-kit-ten.vercel.app";

        // Login to external site
        await page.goto(externalUrl + "/sign-in");
        await page.waitForLoadState("networkidle");
        await page.getByRole("button", { name: "Sign In" }).click();
        // await page.waitForLoadState("networkidle");

        // Navigate to Contacts page
        // await page.goto(externalUrl + "/view?resource=Contact");
        // await page.waitForLoadState("networkidle");

        // Open Contact view via sidebar navigation
        // await page.getByRole("link", { name: /Contact/ }).click();
        // await page.waitForLoadState("networkidle");

        // Act
        // Click filter button
        const filterButtonId = iconNames.filter + elementSuffixes.filterActionButton;
        await uiTester.click(filterButtonId);

        // Open company multi-browser
        const multiBrowserId =
            elements.multiBrowser.FdMultiBrowser + "companyId" + elements.browser.browserIcon;
        await uiTester.click(multiBrowserId);

        // Select multiple checkboxes
        const rightTablePrefix = elementPrefixes.right + elements.table.tableElementId + 0;
        const checkbox0Id = rightTablePrefix + tableElementSuffixes.checkbox + 0;
        const checkbox1Id = rightTablePrefix + tableElementSuffixes.checkbox + 1;
        const checkbox2Id = rightTablePrefix + tableElementSuffixes.checkbox + 2;

        await uiTester.click(checkbox0Id);
        await uiTester.click(checkbox1Id);
        await uiTester.click(checkbox2Id);

        await uiTester.click(elements.multiBrowser.moveResourcesToLeftTable + 0);
        await uiTester.click(elements.browser.okBrowserButton + 0);

        // Assert
        await assertElementHaveCheckmark(checkbox0Id);
        await assertElementHaveCheckmark(checkbox1Id);
        await assertElementHaveCheckmark(checkbox2Id);
    },
);