const Helpers = require("../helpers");
const Asserts = require("../../utils/asserts");

Feature("Creating regions over other regions").tag("@regress");

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 getConfigWithShapes = (shapes, props = "") => `
   <View>
    <Image name="img" value="$image" zoom="true" zoomBy="1.5" zoomControl="true" rotateControl="true" maxWidth="750px" maxHeight="auto"/>
    ${shapes
      .map(
        (shape) => `
    <${shape}Labels ${props} name="${shape}" toName="img">
      <Label value="${shape}" background="${BLUEVIOLET.color}"></Label>
    </${shape}Labels>`,
      )
      .join("")}
  </View>`;

const createShape = {
  Rectangle: {
    byBBox(x, y, width, height, opts = {}) {
      return {
        ...opts,
        action: "drawByDrag",
        params: [x, y, width, height],
        result: {
          width,
          height,
          rotation: 0,
          x,
          y,
        },
      };
    },
  },
  Ellipse: {
    byBBox(x, y, width, height, opts = {}) {
      return {
        ...opts,
        action: "drawByDrag",
        params: [x + width / 2, y + height / 2, width / 2, height / 2],
        result: {
          radiusX: width / 2,
          radiusY: height / 2,
          rotation: 0,
          x: x + width / 2,
          y: y + height / 2,
        },
      };
    },
  },
  Polygon: {
    byBBox(x, y, width, height, opts = {}) {
      const points = [];

      points.push([x, y]);
      points.push([x + width, y]);
      points.push([x + width, y + height]);
      points.push([x, y + height]);
      return {
        ...opts,
        action: "drawByClickingPoints",
        params: [[...points, points[0]]],
        result: {
          points,
          closed: true,
        },
      };
    },
  },
  Brush: {
    byBBox(x, y, width, height, opts = {}) {
      const points = [];
      const startPoint = { x: x + 5, y: y + 5 };
      const endPoint = { x: x + width - 5, y: y + height - 5 };
      const rows = Math.ceil((endPoint.y - startPoint.y) / 10);
      const step = (endPoint.y - startPoint.y) / rows;

      for (let j = 0; j < rows; j++) {
        const cY = startPoint.y + step * j;

        points.push([startPoint.x, cY]);
        points.push([endPoint.x, cY]);
      }
      return {
        ...opts,
        action: "drawThroughPoints",
        params: [points],
      };
    },
  },
  // Temporary disable to pass tests
  // KeyPoint: {
  //   byBBox(x, y, width, height, opts = {}) {
  //     return {
  //       ...opts,
  //       action: "drawByClickingPoints",
  //       params: [[[x + width / 2, y + height / 2]]],
  //       result: {
  //         x: x + width / 2,
  //         y: y + height / 2,
  //         width: 5,
  //       },
  //     };
  //   },
  // },
};

Scenario("Drawing with ctrl pressed", async ({ I, LabelStudio, AtOutliner, AtImageView, AtPanels }) => {
  const params = {
    config: getConfigWithShapes(Object.keys(createShape), 'strokewidth="5"'),
    data: { image: IMAGE },
  };
  const AtDetailsPanel = AtPanels.usePanel(AtPanels.PANEL.DETAILS);

  I.amOnPage("/");
  LabelStudio.init(params);
  AtDetailsPanel.collapsePanel();
  AtDetailsPanel.seeExpandButton();
  LabelStudio.waitForObjectsReady();
  AtOutliner.seeRegions(0);
  I.waitTicks(2);
  const canvasSize = await AtImageView.getCanvasSize();
  const size = Math.min(canvasSize.width, canvasSize.height);
  const convertToImageSize = Helpers.getSizeConvertor(canvasSize.width, canvasSize.height);
  const regionPairs = [];

  Object.keys(createShape).forEach((shapeName, shapeIdx) => {
    const hotKey = `${shapeIdx + 1}`;

    Object.values(createShape[shapeName]).forEach((creator) => {
      const outerRegion = creator(50, 50, size - 50 * 2, size - 50 * 2, {
        hotKey,
        shape: shapeName,
      });
      const innerRegion = creator(150, 150, size - 150 * 2, size - 150 * 2, {
        hotKey,
        shape: shapeName,
      });

      if (outerRegion.result) outerRegion.result[`${shapeName.toLowerCase()}labels`] = [shapeName];
      if (innerRegion.result) innerRegion.result[`${shapeName.toLowerCase()}labels`] = [shapeName];
      regionPairs.push([outerRegion, innerRegion]);
    });
  });
  for (const regionPair of regionPairs) {
    const [outerRegion, innerRegion] = regionPair;

    LabelStudio.init(params);
    LabelStudio.waitForObjectsReady();
    AtOutliner.seeRegions(0);
    AtDetailsPanel.seeExpandButton();
    I.say(`Drawing ${innerRegion.shape} on ${outerRegion.shape}`);
    await AtImageView.lookForStage();
    I.pressKey(outerRegion.hotKey);
    AtImageView[outerRegion.action](...outerRegion.params);
    AtOutliner.seeRegions(1);
    I.pressKey(["u"]);
    I.pressKey(innerRegion.hotKey);
    I.pressKeyDown("CommandOrControl");
    AtImageView[innerRegion.action](...innerRegion.params);
    I.pressKeyUp("CommandOrControl");
    const result = await LabelStudio.serialize();

    AtOutliner.seeRegions(2);
    for (let i = 0; i < 2; i++) {
      if (regionPair[i].result) {
        Asserts.deepEqualWithTolerance(result[i].value, convertToImageSize(regionPair[i].result));
      }
    }
  }
});

Scenario("How it works without ctrl", async ({ I, LabelStudio, AtOutliner, AtImageView }) => {
  const params = {
    config: getConfigWithShapes(Object.keys(createShape)),
    data: { image: IMAGE },
    settings: {
      preserveSelectedTool: false,
    },
  };

  I.amOnPage("/");
  LabelStudio.init(params);
  LabelStudio.waitForObjectsReady();
  AtOutliner.seeRegions(0);
  const canvasSize = await AtImageView.getCanvasSize();
  const size = Math.min(canvasSize.width, canvasSize.height);
  const regionPairs = [];

  Object.keys(createShape).forEach((shapeName, shapeIdx) => {
    const hotKey = `${shapeIdx + 1}`;

    Object.values(createShape[shapeName]).forEach((creator) => {
      for (let n = 0; n < 2; n++) {
        const outerRegion = Object.values(createShape)[n].byBBox(50, 50, size - 50 * 2, size - 50 * 2, {
          hotKey: `${n + 1}`,
          shape: Object.keys(createShape)[n],
        });
        const innerRegion = creator(150, 150, size - 150 * 2, size - 150 * 2, {
          hotKey,
          shape: shapeName,
        });

        if (outerRegion.result) outerRegion.result[`${outerRegion.shape.toLowerCase()}labels`] = [outerRegion.shape];
        if (innerRegion.result) innerRegion.result[`${shapeName.toLowerCase()}labels`] = [shapeName];
        regionPairs.push([outerRegion, innerRegion]);
      }
    });
  });
  for (const regionPair of regionPairs) {
    const [outerRegion, innerRegion] = regionPair;

    // Brush is not relevant in this case anymore (it will not interact with other regions)
    if (innerRegion.shape === "Brush") continue;

    LabelStudio.init(params);
    LabelStudio.waitForObjectsReady();
    AtOutliner.seeRegions(0);
    I.say(`Drawing ${innerRegion.shape} on ${outerRegion.shape}`);
    I.pressKey(["u"]);
    await AtImageView.lookForStage();
    I.pressKey(outerRegion.hotKey);
    AtImageView[outerRegion.action](...outerRegion.params);
    I.pressKey(["u"]);
    I.pressKey(innerRegion.hotKey);
    AtImageView[innerRegion.action](...innerRegion.params);
    AtOutliner.seeRegions(1);
  }
});