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();

        // 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);

        // Get company names before moving
        const company0RowId = rightTablePrefix + tableElementSuffixes.row + 0;
        const company1RowId = rightTablePrefix + tableElementSuffixes.row + 1;
        const company2RowId = rightTablePrefix + tableElementSuffixes.row + 2;

        const company0Text = await page.locator(`#${company0RowId}`).textContent();
        const company1Text = await page.locator(`#${company1RowId}`).textContent();
        const company2Text = await page.locator(`#${company2RowId}`).textContent();

        // Move selected companies to left table
        await page.locator(`#${elements.multiBrowser.moveResourcesToLeftTable}0`).first().click();
        await uiTester.click(elements.browser.okBrowserButton + 0);

        // Assert checkboxes are selected
        await assertElementHaveCheckmark(checkbox0Id);
        await assertElementHaveCheckmark(checkbox1Id);
        await assertElementHaveCheckmark(checkbox2Id);

        // Assert companies are moved to left side
        const leftTableId = elements.multiBrowser.leftTable + 0;

        // Check if left table exists
        const leftTableExists = await uiTester.isElementExists(leftTableId);
        test.expect(leftTableExists).toBeTruthy();

        // Verify rows exist in the left table
        const leftTableRowPrefix = leftTableId + tableElementSuffixes.row;
        const leftRow0Id = leftTableRowPrefix + 0;
        const leftRow1Id = leftTableRowPrefix + 1;
        const leftRow2Id = leftTableRowPrefix + 2;

        const leftRow0Exists = await uiTester.isElementExists(leftRow0Id);
        const leftRow1Exists = await uiTester.isElementExists(leftRow1Id);
        const leftRow2Exists = await uiTester.isElementExists(leftRow2Id);

        test.expect(leftRow0Exists).toBeTruthy();
        test.expect(leftRow1Exists).toBeTruthy();
        test.expect(leftRow2Exists).toBeTruthy();

        // Verify content exists in the left table rows
        const leftRow0Text = await page.locator(`#${leftRow0Id}`).textContent();
        const leftRow1Text = await page.locator(`#${leftRow1Id}`).textContent();
        const leftRow2Text = await page.locator(`#${leftRow2Id}`).textContent();

        test.expect(leftRow0Text).toBeTruthy();
        test.expect(leftRow1Text).toBeTruthy();
        test.expect(leftRow2Text).toBeTruthy();

        // Verify that the moved companies match the selected ones
        // Note: Order might be different on the left side, so check if all companies are present
        const leftCompanyTexts = [leftRow0Text, leftRow1Text, leftRow2Text];

        // Check if each selected company text is contained in one of the left table rows
        test.expect(
            leftCompanyTexts.some((text) => text && company0Text && text.includes(company0Text)),
        ).toBeTruthy();

        test.expect(
            leftCompanyTexts.some((text) => text && company1Text && text.includes(company1Text)),
        ).toBeTruthy();

        test.expect(
            leftCompanyTexts.some((text) => text && company2Text && text.includes(company2Text)),
        ).toBeTruthy();
    },
);