const { serialize } = require("./helpers");

const assert = require("assert");

Feature("Zooming and rotating");

const IMAGE =
  "https://htx-pub.s3.us-east-1.amazonaws.com/examples/images/nick-owuor-astro-nic-visuals-wDifg5xc9Z4-unsplash.jpg";

const BLUEVIOLET = {
  color: "#8A2BE2",
  rgbArray: [138, 43, 226],
};
const getConfigWithShape = (shape, props = "") => `
  <View>
    <Image name="img" value="$image" zoom="true" zoomBy="1.5" zoomControl="true" rotateControl="true"></Image>
    <${shape}Labels ${props} name="tag" toName="img">
        <Label value="Test" background="${BLUEVIOLET.color}"></Label>
    </${shape}Labels>
  </View>`;

const hScaleCoords = ([x, y], w, h) => {
  const ratio = w / h;

  return [x * ratio, y * ratio];
};
const rotateCoords = (point, degree, w, h) => {
  const [x, y] = point;

  if (!degree) return point;

  degree = (360 + degree) % 360;
  if (degree === 90) return hScaleCoords([h - y - 1, x], w, h);
  if (degree === 270) return hScaleCoords([y, w - x - 1], w, h);
  if (Math.abs(degree) === 180) return [w - x - 1, h - y - 1];
  return [x, y];
};

const shapes = [
  {
    shape: "KeyPoint",
    props: 'strokeWidth="5"',
    action: "clickKonva",
    regions: [
      {
        params: [100, 100],
      },
      {
        params: [200, 100],
      },
    ],
  },
  {
    shape: "Polygon",
    action: "clickPolygonPointsKonva",
    regions: [
      {
        params: [
          [
            [95, 95],
            [95, 105],
            [105, 105],
            [105, 95],
          ],
        ],
      },
      {
        params: [
          [
            [400, 10],
            [400, 90],
            [370, 30],
            [300, 10],
          ],
        ],
      },
    ],
  },
  {
    shape: "Rectangle",
    action: "dragKonva",
    regions: [
      {
        params: [95, 95, 10, 10],
      },
      {
        params: [400, 350, -50, -50],
      },
    ],
  },
  {
    shape: "Ellipse",
    action: "dragKonva",
    regions: [
      {
        params: [100, 100, 10, 10],
      },
      {
        params: [230, 300, -50, -30],
      },
    ],
  },
];
const shapesTable = new DataTable(["shape", "props", "action", "regions"]);

shapes.forEach(({ shape, props = "", action, regions }) => {
  shapesTable.add([shape, props, action, regions]);
});

Data(shapesTable).Scenario(
  "Simple rotation",
  async ({ I, LabelStudio, AtImageView, AtOutliner, AtPanels, current }) => {
    const config = getConfigWithShape(current.shape, current.props);

    const params = {
      config,
      data: { image: IMAGE },
    };
    const AtDetailsPanel = AtPanels.usePanel(AtPanels.PANEL.DETAILS);

    I.amOnPage("/");
    LabelStudio.init(params);
    AtDetailsPanel.collapsePanel();
    LabelStudio.waitForObjectsReady();
    AtOutliner.seeRegions(0);
    const canvasSize = await AtImageView.getCanvasSize();

    for (const region of current.regions) {
      I.pressKey(["u"]);
      I.pressKey("1");
      AtImageView[current.action](...region.params);
    }
    const standard = await I.executeScript(serialize);
    const rotationQueue = ["right", "right", "right", "right", "left", "left", "left", "left"];
    let degree = 0;
    let hasPixel = await AtImageView.hasPixelColor(100, 100, BLUEVIOLET.rgbArray);

    assert.equal(hasPixel, true);
    for (const rotate of rotationQueue) {
      I.click(locate(`[aria-label='rotate-${rotate}']`));
      degree += rotate === "right" ? 90 : -90;
      hasPixel = await AtImageView.hasPixelColor(
        ...rotateCoords([100, 100], degree, canvasSize.width, canvasSize.height).map(Math.round),
        BLUEVIOLET.rgbArray,
      );
      assert.strictEqual(hasPixel, true);
      const result = await I.executeScript(serialize);

      for (let i = 0; i < standard.length; i++) {
        assert.deepEqual(standard[i].result, result[i].result);
      }
    }
  },
);

Data(shapesTable).Scenario("Rotate zoomed", async ({ I, LabelStudio, AtImageView, AtOutliner, AtPanels, current }) => {
  const params = {
    config: getConfigWithShape(current.shape, current.props),
    data: { image: IMAGE },
  };
  const AtDetailsPanel = AtPanels.usePanel(AtPanels.PANEL.DETAILS);

  I.amOnPage("/");
  LabelStudio.init(params);
  AtDetailsPanel.collapsePanel();
  LabelStudio.waitForObjectsReady();
  AtOutliner.seeRegions(0);
  const canvasSize = await AtImageView.getCanvasSize();

  for (const region of current.regions) {
    I.pressKey(["u"]);
    I.pressKey("1");
    AtImageView[current.action](...region.params);
  }
  const rotationQueue = ["right", "right", "right", "right", "left", "left", "left", "left"];
  let degree = 0;
  const ZOOM = 3;

  AtImageView.setZoom(ZOOM, -100 * ZOOM, -100 * ZOOM);
  let hasPixel = await AtImageView.hasPixelColor(1, 1, BLUEVIOLET.rgbArray);

  assert.strictEqual(hasPixel, true, "Must have pixel before rotation");
  for (const rotate of rotationQueue) {
    I.click(locate(`[aria-label='rotate-${rotate}']`));
    degree += rotate === "right" ? 90 : -90;
    hasPixel = await AtImageView.hasPixelColor(
      ...rotateCoords([1, 1], degree, canvasSize.width, canvasSize.height).map(Math.round),
      BLUEVIOLET.rgbArray,
    );

    assert.strictEqual(hasPixel, true, `Must have pixel after rotation [${degree}deg]`);
  }
});

const windowSizesTable = new DataTable(["width", "height"]);

windowSizesTable.add([1280, 720]);
windowSizesTable.add([1920, 1080]);
windowSizesTable.add([800, 480]);
windowSizesTable.add([1017, 970]);

Data(windowSizesTable).Scenario(
  "Rotation with different window sizes",
  async ({ I, LabelStudio, AtImageView, AtOutliner, AtPanels, current }) => {
    const config = getConfigWithShape("Rectangle");

    const params = {
      config,
      data: { image: IMAGE },
    };
    const AtDetailsPanel = AtPanels.usePanel(AtPanels.PANEL.DETAILS);

    I.amOnPage("/");
    I.resizeWindow(current.width, current.height);
    LabelStudio.init(params);
    // On small screens you can't see the details panel from the beginning
    if (current.width > 1000) {
      AtDetailsPanel.collapsePanel();
    }
    LabelStudio.waitForObjectsReady();
    AtOutliner.seeRegions(0);
    const canvasSize = await AtImageView.getCanvasSize();
    const imageSize = await AtImageView.getImageFrameSize();
    const rotationQueue = ["right", "right", "right", "right", "left", "left", "left", "left"];

    assert(Math.abs(canvasSize.width - imageSize.width) < 1);
    assert(Math.abs(canvasSize.height - imageSize.height) < 1);
    for (const rotate of rotationQueue) {
      I.click(locate(`[aria-label='rotate-${rotate}']`));
      // Just checking that we see image, to get some time for rotating to be finished and correctly rendered
      I.seeElement('[alt="LS"]');
      I.waitTicks(2);
      const rotatedCanvasSize = await AtImageView.getCanvasSize();
      const rotatedImageSize = await AtImageView.getImageFrameSize();

      assert(Math.abs(rotatedCanvasSize.width - rotatedImageSize.width) < 1);
      assert(Math.abs(rotatedCanvasSize.height - rotatedImageSize.height) < 1);
    }
  },
);

const twoColumnsConfigs = [
  `<View>
    <View style="display:flex;align-items:start;gap:8px;flex-direction:{{direction}}">
        <RectangleLabels name="label" toName="image" showInline="{{showInline}}">
            <Label value="Label 1" background="#2C7873"/>
            <Label value="Label 2" background="#7232F2"/>
        </RectangleLabels>
        <Image name="image" value="$image" zoom="true" rotateControl="true"/>
    </View>
</View>`,
  `<View>
    <View style="display:flex;align-items:start;gap:8px;flex-direction:{{direction}}">
        <RectangleLabels name="label" toName="image" showInline="{{showInline}}">
            <Label value="Label 1" background="#2C7873"/>
            <Label value="Label 2" background="#7232F2"/>
        </RectangleLabels>
        <View style="flex: 100 0 1%; width: 100%">
            <Image name="image" value="$image" zoom="true" rotateControl="true"/>
        </View>
    </View>
</View>`,
];

const layoutVariations = new DataTable(["config", "inline", "reversed"]);

twoColumnsConfigs.forEach((config) => {
  for (const inline of [true, false]) {
    for (const reversed of [true, false]) {
      layoutVariations.add([config, inline, reversed]);
    }
  }
});

const compareSize = async (I, AtImageView, message1, message2) => {
  const { width: canvasWidth, height: canvasHeight } = await AtImageView.getCanvasSize();
  const { width: imageWidth, height: imageHeight } = await AtImageView.getImageFrameSize();

  const widthMessage = `[${message2}] Check width: [${[canvasWidth, imageWidth]}]`;
  const heightMessage = `[${message2}] Check height: [${[canvasHeight, imageHeight]}]`;

  I.say(`${message1} [stage: ${canvasWidth}x${canvasHeight}, image: ${imageWidth}x${imageHeight}]`);
  assert(Math.abs(canvasWidth - imageWidth) <= 1, widthMessage);
  assert(Math.abs(canvasHeight - imageHeight) <= 1, heightMessage);
};

Data(layoutVariations).Scenario(
  "Rotation in the two columns template",
  async ({ I, LabelStudio, AtImageView, AtOutliner, AtSettings, AtPanels, current }) => {
    I.amOnPage("/");
    let isVerticalLayout = false;

    const { config, inline, reversed } = current;

    const direction = (inline ? "column" : "row") + (reversed ? "-reverse" : "");
    const resultConfig = config.replace("{{direction}}", direction).replace("{{showInline}}", `${inline}`);
    const params = {
      config: resultConfig,
      data: { image: IMAGE },
      annotations: [
        {
          id: "rotations",
          result: [
            // The region just for canvas size visually indication
            {
              from_name: "label",
              id: "EUsEHxTyrv",
              image_rotation: 0,
              origin: "manual",
              original_height: 2802,
              original_width: 2242,
              to_name: "image",
              type: "rectanglelabels",
              value: {
                height: 100,
                labels: ["Label 2"],
                rotation: 0,
                width: 100,
                x: 0,
                y: 0,
              },
            },
          ],
        },
      ],
    };
    const AtDetailsPanel = AtPanels.usePanel(AtPanels.PANEL.DETAILS);

    I.say(`Two columns [config: ${twoColumnsConfigs.indexOf(config)}] [${direction}]`);

    LabelStudio.init(params);
    AtDetailsPanel.collapsePanel();
    LabelStudio.waitForObjectsReady();
    AtOutliner.seeRegions(1);

    I.click(locate("[aria-label='rotate-right']"));
    AtOutliner.seeRegions(1);

    I.wait(0.1);
    await compareSize(I, AtImageView, "Dimensions must be equal in landscape", "landscape, rotated");

    I.say("Change to vertcal layout");
    AtSettings.open();
    isVerticalLayout = !isVerticalLayout;
    AtSettings.setLayoutSettings({
      [AtSettings.LAYOUT_SETTINGS.VERTICAL_LAYOUT]: isVerticalLayout,
    });
    AtSettings.close();

    AtOutliner.seeRegions(1);
    I.wait(0.1);
    await compareSize(I, AtImageView, "Dimensions must be equal in portrait", "portrait");

    I.click(locate("[aria-label='rotate-right']"));

    AtOutliner.seeRegions(1);
    I.wait(0.1);
    await compareSize(I, AtImageView, "Dimensions must be equal after rotation in portrain", "portrait, rotated");
  },
);