"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const fixtures_1 = require("./fixtures");
const fs_1 = __importDefault(require("fs"));
fixtures_1.test.describe('frame spatial info', () => {
    (0, fixtures_1.test)('should include position and pageSize in frameInfo on click', async ({ contentJs, }) => {
        await contentJs.setContentAndInject(`
      <html>
        <body style="margin: 0; padding: 0;">
          <button id="test-button" style="margin: 50px;">Click me</button>
        </body>
      </html>
    `);
        const initialCount = contentJs.receivedMessages.length;
        await contentJs.page.click('#test-button');
        const newMessages = contentJs.receivedMessages.slice(initialCount);
        const clickMessage = newMessages.find((msg) => msg.action === 'record' && msg.listener === 'click');
        (0, fixtures_1.expect)(clickMessage).toBeDefined();
        const frameInfo = clickMessage?.frameInfo;
        (0, fixtures_1.expect)(frameInfo).toBeDefined();
        (0, fixtures_1.expect)(frameInfo.position).toEqual({ x: 0, y: 0 });
        (0, fixtures_1.expect)(frameInfo.pageSize).toBeDefined();
        (0, fixtures_1.expect)(frameInfo.pageSize.width).toBeGreaterThan(0);
        (0, fixtures_1.expect)(frameInfo.pageSize.height).toBeGreaterThan(0);
    });
    (0, fixtures_1.test)('should have correct pageSize matching viewport', async ({ contentJs, }) => {
        await contentJs.page.setViewportSize({ width: 800, height: 600 });
        await contentJs.setContentAndInject(`
      <html>
        <body style="margin: 0; padding: 0;">
          <button id="test-button">Click me</button>
        </body>
      </html>
    `);
        const initialCount = contentJs.receivedMessages.length;
        await contentJs.page.click('#test-button');
        const newMessages = contentJs.receivedMessages.slice(initialCount);
        const clickMessage = newMessages.find((msg) => msg.action === 'record' && msg.listener === 'click');
        (0, fixtures_1.expect)(clickMessage).toBeDefined();
        const frameInfo = clickMessage?.frameInfo;
        (0, fixtures_1.expect)(frameInfo.pageSize).toBeDefined();
        (0, fixtures_1.expect)(frameInfo.pageSize.width).toBe(800);
        (0, fixtures_1.expect)(frameInfo.pageSize.height).toBe(600);
    });
    (0, fixtures_1.test)('should include spatial info in snapshot message', async ({ contentJs, }) => {
        await contentJs.setContentAndInject(`
      <html>
        <body>
          <button id="test-button">Click me</button>
        </body>
      </html>
    `);
        const initialCount = contentJs.receivedMessages.length;
        await contentJs.page.click('#test-button');
        const newMessages = contentJs.receivedMessages.slice(initialCount);
        const snapshotMessage = newMessages.find((msg) => msg.action === 'snapshot' && msg.listener === 'snapshot');
        (0, fixtures_1.expect)(snapshotMessage).toBeDefined();
        const frameInfo = snapshotMessage?.frameInfo;
        (0, fixtures_1.expect)(frameInfo).toBeDefined();
        (0, fixtures_1.expect)(frameInfo.position).toEqual({ x: 0, y: 0 });
        (0, fixtures_1.expect)(frameInfo.pageSize).toBeDefined();
        (0, fixtures_1.expect)(frameInfo.pageSize.width).toBeGreaterThan(0);
        (0, fixtures_1.expect)(frameInfo.pageSize.height).toBeGreaterThan(0);
    });
    (0, fixtures_1.test)('should calculate iframe position relative to main page', async ({ contentJs, }) => {
        const padding = 100;
        await contentJs.setContentAndInject(`
      <html>
        <body style="margin: 0; padding: 0;">
          <div style="padding: ${padding}px;">
            <iframe 
              id="test-iframe" 
              srcdoc="<html><body style='margin:0;'><button id='iframe-button'>Click in iframe</button></body></html>"
              style="border: none; width: 300px; height: 200px;"
            ></iframe>
          </div>
        </body>
      </html>
    `);
        const iframeHandle = await contentJs.page.waitForSelector('#test-iframe');
        const iframe = await iframeHandle?.contentFrame();
        if (iframe) {
            const iframeBoundingBox = await iframeHandle?.boundingBox();
            (0, fixtures_1.expect)(iframeBoundingBox?.x).toBeCloseTo(padding, 0);
            (0, fixtures_1.expect)(iframeBoundingBox?.y).toBeCloseTo(padding, 0);
        }
    });
    (0, fixtures_1.test)('should handle scrolled page and still report correct spatial info', async ({ contentJs, }) => {
        await contentJs.page.setViewportSize({ width: 800, height: 400 });
        await contentJs.setContentAndInject(`
      <html>
        <body style="margin: 0; padding: 0;">
          <div style="height: 1000px; background: linear-gradient(to bottom, #ff0000, #0000ff);">
            Scroll down to find the button
          </div>
          <button id="scroll-button" style="padding: 20px;">
            Click me after scrolling
          </button>
          <div style="height: 500px;"></div>
        </body>
      </html>
    `);
        await contentJs.page.evaluate(() => {
            window.scrollTo(0, 1000);
        });
        await contentJs.page.waitForTimeout(100);
        const initialCount = contentJs.receivedMessages.length;
        await contentJs.page.click('#scroll-button');
        const newMessages = contentJs.receivedMessages.slice(initialCount);
        const clickMessage = newMessages.find((msg) => msg.action === 'record' && msg.listener === 'click');
        (0, fixtures_1.expect)(clickMessage).toBeDefined();
        const frameInfo = clickMessage?.frameInfo;
        (0, fixtures_1.expect)(frameInfo).toBeDefined();
        (0, fixtures_1.expect)(frameInfo.position).toEqual({ x: 0, y: 0 });
        (0, fixtures_1.expect)(frameInfo.pageSize.width).toBe(800);
        (0, fixtures_1.expect)(frameInfo.pageSize.height).toBeGreaterThan(0);
    });
    (0, fixtures_1.test)('should include iframe position in frameInfo when content.js is injected', async ({ contentJs, }) => {
        const iframePadding = 60;
        const contentHeight = 400;
        const buttonMargin = 20;
        const iframeHeight = 200;
        await contentJs.setContentAndInject(`
      <html>
        <body style="margin: 0; padding: 0;">
          <div style="padding: ${iframePadding}px;">
            <iframe 
              id="test-iframe" 
              style="border: none; width: 300px; height: ${iframeHeight}px;"
              srcdoc="
                <html>
                  <body style='margin: 0; padding: 0;'>
                    <div style='height: ${contentHeight}px; background: linear-gradient(#eee, #999);'>
                      Scroll down...
                    </div>
                    <button id='btn' style='margin: ${buttonMargin}px;'>Click me</button>
                    <div style='height: 200px;'></div>
                  </body>
                </html>
              "
            ></iframe>
          </div>
        </body>
      </html>
    `);
        const iframeHandle = await contentJs.page.waitForSelector('#test-iframe');
        const iframe = await iframeHandle?.contentFrame();
        (0, fixtures_1.expect)(iframe).not.toBeNull();
        if (iframe) {
            const iframeBox = await iframeHandle?.boundingBox();
            const iframePosition = { x: iframeBox?.x ?? 0, y: iframeBox?.y ?? 0 };
            (0, fixtures_1.expect)(iframeBox?.x).toBeCloseTo(iframePadding, 0);
            (0, fixtures_1.expect)(iframeBox?.y).toBeCloseTo(iframePadding, 0);
            await contentJs.page.evaluate(() => {
                window.addEventListener('message', (event) => {
                    if (event.data?.type === 'mabl-test-message') {
                        window.__iframeMessages =
                            window.__iframeMessages || [];
                        window.__iframeMessages.push(event.data.message);
                    }
                });
                window.__iframeMessages = [];
            });
            await iframe.evaluate(({ position }) => {
                window.mablFrameInfo = {
                    tabId: 'test-tab',
                    frameId: '1',
                    position,
                    pageSize: { width: 800, height: 600 },
                };
                window.__mablInit = false;
                window.__mablListenersRegistered = false;
                window.mablSendMessageToMain = (message) => {
                    window.parent.postMessage({ type: 'mabl-test-message', message }, '*');
                    if (message.action === 'check-training-status') {
                        return {
                            trainingStatusForTab: true,
                            trainerIsActive: true,
                            recordingStateActive: true,
                        };
                    }
                    return { success: true };
                };
            }, { position: iframePosition });
            const contentJsCode = fs_1.default.readFileSync(fixtures_1.CONTENT_JS_PATH_EXPORT, 'utf-8');
            await iframe.evaluate(contentJsCode);
            await contentJs.page.waitForTimeout(100);
            const iframeMessages = (await contentJs.page.evaluate(() => window.__iframeMessages));
            const contentReloadedMessage = iframeMessages.find((msg) => msg.action === 'content_reloaded');
            (0, fixtures_1.expect)(contentReloadedMessage).toBeDefined();
            const frameInfo = contentReloadedMessage?.frameInfo;
            (0, fixtures_1.expect)(frameInfo).toBeDefined();
            (0, fixtures_1.expect)(frameInfo.position?.x).toBeCloseTo(iframePadding, 0);
            (0, fixtures_1.expect)(frameInfo.position?.y).toBeCloseTo(iframePadding, 0);
            const scrollAmount = contentHeight - 50;
            await iframe.evaluate((scrollY) => {
                window.scrollTo(0, scrollY);
            }, scrollAmount);
            await contentJs.page.waitForTimeout(50);
            const actualScroll = await iframe.evaluate(() => window.scrollY);
            (0, fixtures_1.expect)(actualScroll).toBeCloseTo(scrollAmount, 0);
            const buttonHandle = await iframe.waitForSelector('#btn');
            const buttonBox = await buttonHandle?.boundingBox();
            (0, fixtures_1.expect)(buttonBox).not.toBeNull();
            const buttonDocumentY = contentHeight + buttonMargin;
            const expectedButtonViewportY = iframePadding + (buttonDocumentY - scrollAmount);
            (0, fixtures_1.expect)(buttonBox?.y).toBeCloseTo(expectedButtonViewportY, 5);
            await buttonHandle?.click();
            (0, fixtures_1.expect)(frameInfo.position?.x).toBeCloseTo(iframePadding, 0);
            (0, fixtures_1.expect)(frameInfo.position?.y).toBeCloseTo(iframePadding, 0);
        }
    });
});
