Feature("Bitmask tool").tag("@regress");

const assert = require("assert");

const IMAGE = "https://data.heartex.net/open-images/train_0/mini/0030019819f25b28.jpg";

const config = `<View>
  <Image name="img" value="$image" smoothing="false"></Image>
  <BitmaskLabels name="tag" toName="img">
    <Label value="Test" background="orange"></Label>
  </BitmaskLabels>
</View>`;

// Add cleanup hook
Before(async ({ I }) => {
  I.amOnPage("/");
});

Scenario("Basic Bitmask drawing", async ({ I, LabelStudio, AtImageView, AtLabels }) => {
  const params = {
    config,
    data: { image: IMAGE },
    annotations: [{ id: 1, result: [] }],
  };

  I.amOnPage("/");
  LabelStudio.init(params);
  LabelStudio.waitForObjectsReady();
  await AtImageView.lookForStage();

  I.say("Select Bitmask tool");
  I.pressKey("B");
  AtLabels.clickLabel("Test");

  I.say("Draw a simple mask");
  AtImageView.drawThroughPoints([
    [20, 20],
    [20, 40],
    [40, 40],
    [40, 20],
    [20, 20],
  ]);

  I.say("Check if mask was created");
  const result = await LabelStudio.serialize();
  assert.strictEqual(result.length, 1);
  assert.ok(result[0].value.imageDataURL);
});

Scenario("Bitmask eraser functionality", async ({ I, LabelStudio, AtImageView, AtLabels }) => {
  const params = {
    config,
    data: { image: IMAGE },
    annotations: [{ id: 1, result: [] }],
  };

  I.amOnPage("/");
  LabelStudio.init(params);
  LabelStudio.waitForObjectsReady();
  await AtImageView.lookForStage();

  I.say("Select Bitmask tool and draw initial mask");
  I.pressKey("B");
  AtLabels.clickLabel("Test");
  AtImageView.drawThroughPoints([
    [20, 20],
    [20, 40],
    [40, 40],
    [40, 20],
    [20, 20],
  ]);

  I.say("Switch to eraser and erase part of the mask");
  I.pressKey("E");
  AtImageView.drawThroughPoints([
    [25, 25],
    [35, 35],
  ]);

  I.say("Check if mask was modified");
  const result = await LabelStudio.serialize();
  assert.strictEqual(result.length, 1);
  assert.ok(result[0].value.imageDataURL);
});

Scenario("Bitmask size controls", async ({ I, LabelStudio, AtImageView, AtLabels }) => {
  const params = {
    config,
    data: { image: IMAGE },
    annotations: [{ id: 1, result: [] }],
  };

  I.amOnPage("/");
  LabelStudio.init(params);
  LabelStudio.waitForObjectsReady();
  await AtImageView.lookForStage();

  I.say("Select Bitmask tool");
  I.pressKey("B");
  AtLabels.clickLabel("Test");

  I.say("Test size increase shortcut");
  I.pressKey("]");
  AtImageView.drawThroughPoints([[30, 30]]);

  I.say("Test size decrease shortcut");
  I.pressKey("[");
  AtImageView.drawThroughPoints([[50, 50]]);

  I.say("Check if masks were created with different sizes");
  const result = await LabelStudio.serialize();
  assert.strictEqual(result.length, 1);
  assert.ok(result[0].value.imageDataURL);
});

Scenario("Bitmask hover and selection", async ({ I, LabelStudio, AtImageView, AtLabels, AtOutliner }) => {
  const params = {
    config,
    data: { image: IMAGE },
    annotations: [{ id: 1, result: [] }],
  };

  I.amOnPage("/");
  LabelStudio.init(params);
  LabelStudio.waitForObjectsReady();
  await AtImageView.lookForStage();

  I.say("Create initial mask");
  I.pressKey("B");
  AtLabels.clickLabel("Test");
  AtImageView.drawThroughPoints([
    [20, 20],
    [20, 40],
    [40, 40],
    [40, 20],
    [20, 20],
  ]);

  I.say("Verify selection behavior");
  AtOutliner.seeRegions(1);

  I.say("Click on the region");
  AtImageView.clickAt(30, 30);
  AtOutliner.seeSelectedRegion();
});

Scenario("Verify Bitmask drawing content", async ({ I, LabelStudio, AtImageView, AtLabels }) => {
  const params = {
    config,
    data: { image: IMAGE },
    annotations: [{ id: 1, result: [] }],
  };

  I.amOnPage("/");
  LabelStudio.init(params);
  LabelStudio.waitForObjectsReady();
  await AtImageView.lookForStage();

  I.say("Select Bitmask tool");
  I.pressKey("B");
  AtLabels.clickLabel("Test");

  I.say("Draw a rectangle mask");
  AtImageView.drawThroughPoints([
    [20, 20],
    [20, 40],
    [40, 40],
    [40, 20],
    [20, 20],
  ]);

  I.say("Verify mask content");
  const result = await LabelStudio.serialize();
  assert.strictEqual(result.length, 1);
  assert.ok(result[0].value.imageDataURL);

  // Verify that the imageDataURL contains actual pixel data
  const imageData = result[0].value.imageDataURL;
  assert.ok(imageData.startsWith("data:image/png;base64,"));

  // Decode base64 and verify it's not empty
  const base64Data = imageData.replace("data:image/png;base64,", "");
  const decodedData = Buffer.from(base64Data, "base64");
  assert.ok(decodedData.length > 0, "Decoded image data should not be empty");
});

Scenario("Verify Bitmask pixel content", async ({ I, LabelStudio, AtImageView, AtLabels }) => {
  const params = {
    config,
    data: { image: IMAGE },
    annotations: [{ id: 1, result: [] }],
  };

  I.amOnPage("/");
  LabelStudio.init(params);
  LabelStudio.waitForObjectsReady();
  await AtImageView.lookForStage();

  I.say("Select Bitmask tool");
  I.pressKey("B");
  AtLabels.clickLabel("Test");

  I.say("Draw a rectangle mask");
  AtImageView.drawThroughPoints([
    [20, 20],
    [20, 40],
    [40, 40],
    [40, 20],
    [20, 20],
  ]);

  I.say("Verify mask content and dimensions");
  const result = await LabelStudio.serialize();
  assert.strictEqual(result.length, 1);
  assert.ok(result[0].value.imageDataURL);

  // Get all data we need before making assertions
  // Retry mechanism to wait for bbox coordinates to be calculated
  let bbox = null;
  let attempts = 0;
  const maxAttempts = 10;

  while (!bbox && attempts < maxAttempts) {
    try {
      bbox = await I.executeScript(() => {
        const region = Htx.annotationStore.selected.regions[0];
        if (!region) return null;
        if (!region.bboxCoordsCanvas) return null;
        return region.bboxCoordsCanvas;
      });

      if (!bbox) {
        attempts++;
        await I.wait(100); // Wait 100ms before retrying
      }
    } catch (error) {
      attempts++;
      await I.wait(100); // Wait 100ms before retrying
    }
  }

  if (!bbox) {
    throw new Error("Bbox coordinates not available after multiple attempts");
  }

  // Define thresholds for assertions
  const THRESHOLD = 5;
  const EXPECTED_SIZE = 40;

  // Verify that the bbox exists
  assert.ok(bbox, "Bounding box should exist");

  // Calculate actual dimensions
  const width = bbox.right - bbox.left;
  const height = bbox.bottom - bbox.top;

  // Verify that the bbox has the expected size
  assert.ok(
    Math.abs(width - EXPECTED_SIZE) <= THRESHOLD,
    `Width should be close to ${EXPECTED_SIZE} pixels (got ${width})`,
  );

  assert.ok(
    Math.abs(height - EXPECTED_SIZE) <= THRESHOLD,
    `Height should be close to ${EXPECTED_SIZE} pixels (got ${height})`,
  );

  // Verify that the bbox is roughly square
  assert.ok(
    Math.abs(width - height) <= THRESHOLD,
    `Width and height should be similar (got width=${width}, height=${height})`,
  );
});

Scenario("Verify Bitmask canvas fit", async ({ I, LabelStudio, AtImageView, AtLabels }) => {
  const params = {
    config,
    data: { image: IMAGE },
    annotations: [{ id: 1, result: [] }],
  };

  I.amOnPage("/");
  LabelStudio.init(params);
  LabelStudio.waitForObjectsReady();
  await AtImageView.lookForStage();

  I.say("Select Bitmask tool");
  I.pressKey("B");
  AtLabels.clickLabel("Test");

  I.say("Draw a mask that covers the entire canvas height");
  AtImageView.drawThroughPoints([
    [10, 0], // Start from top
    [10, 100], // Draw to bottom
    [30, 100], // Complete rectangle
    [30, 0], // Back to top
    [10, 0], // Close the path
  ]);

  I.say("Verify mask content and image scaling");
  const result = await LabelStudio.serialize();
  assert.strictEqual(result.length, 1);
  assert.ok(result[0].value.imageDataURL);

  // Ensure the region is selected
  I.say("Ensure region is selected");
  AtImageView.clickAt(20, 50); // Click in the middle of our drawn region

  // Get canvas dimensions and verify the underlying image scaling
  const canvasInfo = await I.executeScript(() => {
    // Get the canvas element
    const canvas = document.querySelector("canvas");
    if (!canvas) throw new Error("Canvas not found");

    // Get canvas dimensions
    const canvasWidth = canvas.width;
    const canvasHeight = canvas.height;

    // Get the original image element
    const imageElement = document.querySelector("img");
    if (!imageElement) throw new Error("Image element not found");

    // Get the original image dimensions
    const imageWidth = imageElement.naturalWidth;
    const imageHeight = imageElement.naturalHeight;

    // Get the region and its imageDataURL for verification
    const region = Htx.annotationStore.selected.regions[0];
    if (!region) throw new Error("Region not found");

    // For bitmask regions, imageDataURL is stored directly on the region
    const imageDataURL = region.imageDataURL;
    if (!imageDataURL) throw new Error("Region imageDataURL not available");

    return {
      canvasWidth,
      canvasHeight,
      imageWidth,
      imageHeight,
      imageDataURL,
    };
  });

  // Verify canvas dimensions exist
  assert.ok(canvasInfo.canvasWidth > 0, "Canvas width should be positive");
  assert.ok(canvasInfo.canvasHeight > 0, "Canvas height should be positive");
  assert.ok(canvasInfo.imageWidth > 0, "Image width should be positive");
  assert.ok(canvasInfo.imageHeight > 0, "Image height should be positive");
  assert.ok(canvasInfo.imageDataURL, "Image data URL should exist");

  // Verify that the image is properly scaled to fit the canvas
  // The image should be scaled to match the canvas dimensions
  const widthRatio = canvasInfo.canvasWidth / canvasInfo.imageWidth;
  const heightRatio = canvasInfo.canvasHeight / canvasInfo.imageHeight;

  // Check that the scaling ratios are reasonable (image should be scaled to fit canvas)
  assert.ok(widthRatio > 0, "Width scaling ratio should be positive");
  assert.ok(heightRatio > 0, "Height scaling ratio should be positive");

  // The image should be scaled to fit the canvas, but we don't require uniform scaling
  // as the image might be displayed with different aspect ratios or zoom levels
  // Instead, verify that both dimensions are scaled appropriately
  assert.ok(widthRatio >= 1 || heightRatio >= 1, "At least one dimension should be scaled up to fit canvas");

  // Log the scaling information for debugging
  I.say(`Image scaling - Width: ${widthRatio.toFixed(3)}x, Height: ${heightRatio.toFixed(3)}x`);
  I.say(
    `Canvas: ${canvasInfo.canvasWidth}x${canvasInfo.canvasHeight}, Image: ${canvasInfo.imageWidth}x${canvasInfo.imageHeight}`,
  );

  // Get the proper canvas and image frame sizes using the helper functions
  const { width: canvasSizeWidth, height: canvasSizeHeight } = await AtImageView.getCanvasSize();
  const { width: imageFrameWidth, height: imageFrameHeight } = await AtImageView.getImageFrameSize();

  // Verify that the stage/canvas dimensions match the image frame dimensions
  // The stage should be sized to fit the image properly
  assert.ok(
    Math.abs(canvasSizeWidth - imageFrameWidth) <= 1,
    `Stage width (${canvasSizeWidth}) should match image frame width (${imageFrameWidth}) within 1 pixel`,
  );

  assert.ok(
    Math.abs(canvasSizeHeight - imageFrameHeight) <= 1,
    `Stage height (${canvasSizeHeight}) should match image frame height (${imageFrameHeight}) within 1 pixel`,
  );
});