Feature("Max usage");

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

const createImageToolsConfig = ({ maxUsage }) => `
<View>
  <Image name="img" value="$image" width="50%"/>
  <Rectangle name="Rectangle" toName="img" />
  <Ellipse name="Ellipse" toName="img" />
  <Brush name="Brush" toName="img" />
  <KeyPoint name="KeyPoint" toName="img" />
  <Polygon name="Polygon" toName="img" />
  <Labels name="Labels" toName="img" ${maxUsage ? ` maxUsages="${maxUsage}"` : ""}>
    <Label value="Label_0" />
    <Label value="Label_1" hotkey="1" />
  </Labels>
</View>`;

const createImageLabelsConfig = ({ maxUsage }) => `
<View>
  <Image name="img" value="$image" width="50%" />
  <RectangleLabels name="Rectangle" toName="img" ${maxUsage ? ` maxUsages="${maxUsage}"` : ""}>
    <Label value="Rectangle_0" />
    <Label value="Rectangle_1" hotkey="1" />
  </RectangleLabels>
  <EllipseLabels name="Ellipse" toName="img" ${maxUsage ? ` maxUsages="${maxUsage}"` : ""}>
    <Label value="Ellipse_0" />
    <Label value="Ellipse_1" hotkey="2" />
  </EllipseLabels>
  <BrushLabels name="Brush" toName="img" ${maxUsage ? ` maxUsages="${maxUsage}"` : ""}>
    <Label value="Brush_0" />
    <Label value="Brush_1" hotkey="3" />
  </BrushLabels>
  <KeyPointLabels name="KeyPoint" toName="img" ${maxUsage ? ` maxUsages="${maxUsage}"` : ""}>
    <Label value="KeyPoint_0" />
    <Label value="KeyPoint_1" hotkey="4" />
  </KeyPointLabels>
  <PolygonLabels name="Polygon" toName="img" ${maxUsage ? ` maxUsages="${maxUsage}"` : ""}>
    <Label value="Polygon_0" />
    <Label value="Polygon_1" hotkey="5" />
  </PolygonLabels>
 </View>`;

const shapes = {
  Rectangle: {
    drawAction: "drawByDrag",
    shortcut: "r",
    hotkey: "1",
    byBBox(x, y, width, height) {
      return {
        params: [x, y, width, height],
      };
    },
  },
  Ellipse: {
    drawAction: "drawByDrag",
    shortcut: "o",
    hotkey: "2",
    byBBox(x, y, width, height) {
      return {
        params: [x + width / 2, y + height / 2, width / 2, height / 2],
      };
    },
  },
  Brush: {
    drawAction: "clickAt",
    shortcut: "b",
    hotkey: "3",
    byBBox(x, y, width, height) {
      return {
        params: [x + width / 2, y + height / 2],
      };
    },
  },
  KeyPoint: {
    drawAction: "clickAt",
    shortcut: "k",
    hotkey: "4",
    byBBox(x, y, width, height) {
      return {
        params: [x + width / 2, y + height / 2],
      };
    },
  },
  Polygon: {
    drawAction: "drawByClickingPoints",
    shortcut: "p",
    hotkey: "5",
    byBBox(x, y, width, height) {
      const points = [];

      points.push([x, y]);
      points.push([x + width, y]);
      points.push([x + width / 2, y + height]);
      return {
        params: [[...points, points[0]]],
      };
    },
  },
};

function drawShapeByBbox(Shape, x, y, width, height, where) {
  where[Shape.drawAction](...Shape.byBBox(x, y, width, height).params);
}

const maxUsageImageToolsDataTable = new DataTable(["maxUsage", "shapeName"]);

[1, 3].forEach((maxUsage) => {
  Object.keys(shapes).forEach((shapeName) => {
    maxUsageImageToolsDataTable.add([maxUsage, shapeName]);
  });
});

const maxUsageDataTable = new DataTable(["maxUsage"]);

[1, 3].forEach((maxUsage) => {
  maxUsageDataTable.add([maxUsage]);
});

Data(maxUsageImageToolsDataTable).Scenario(
  "Max usages of separated labels in ImageView on region creating",
  async ({ I, LabelStudio, AtImageView, AtOutliner, AtPanels, Modals, current }) => {
    const { maxUsage, shapeName } = current;
    const shape = shapes[shapeName];
    const annotations = [];
    const AtDetailsPanel = AtPanels.usePanel(AtPanels.PANEL.DETAILS);

    for (let k = 0; k < maxUsage; k++) {
      annotations.push({
        value: {
          x: k,
          y: 1,
          width: 0.6666666666666666,
          labels: ["Label_1"],
        },
        id: k,
        from_name: "Labels",
        to_name: "img",
        type: "labels",
      });
    }

    I.amOnPage("/");
    LabelStudio.init({
      config: createImageToolsConfig({ maxUsage }),
      data: {
        image: IMAGE,
      },
      annotations: [
        {
          id: "test",
          result: annotations,
        },
      ],
    });
    AtDetailsPanel.collapsePanel();
    LabelStudio.waitForObjectsReady();
    await AtImageView.lookForStage();
    AtOutliner.seeRegions(maxUsage);

    I.pressKey("1");
    I.pressKey(shape.shortcut);
    AtImageView.clickAt(50, 50);

    Modals.seeWarning(`You can't use Label_1 more than ${maxUsage} time(s)`);
  },
);

Data(maxUsageImageToolsDataTable).Scenario(
  "Max usages of labels in ImageView on region creating",
  async ({ I, LabelStudio, AtImageView, AtOutliner, AtPanels, Modals, current }) => {
    const { maxUsage, shapeName } = current;
    const shape = shapes[shapeName];
    const AtDetailsPanel = AtPanels.usePanel(AtPanels.PANEL.DETAILS);

    I.amOnPage("/");
    LabelStudio.init({
      config: createImageLabelsConfig({ maxUsage }),
      data: {
        image: IMAGE,
      },
    });
    AtDetailsPanel.collapsePanel();

    LabelStudio.waitForObjectsReady();
    await AtImageView.lookForStage();
    AtOutliner.seeRegions(0);

    for (let k = 0; k < maxUsage; k++) {
      I.pressKey(shape.hotkey);
      drawShapeByBbox(shape, 1 + 50 * k, 1, 30, 30, AtImageView);
      I.pressKey("u");
      AtOutliner.seeRegions(k + 1);
      I.waitTicks(2);
    }

    I.pressKey(shape.hotkey);
    AtImageView.clickAt(50, 50);

    Modals.seeWarning(`You can't use ${shapeName}_1 more than ${maxUsage} time(s)`);
  },
);

Data(maxUsageDataTable).Scenario(
  "Max usages of labels in Audio on region creation",
  async ({ I, LabelStudio, AtOutliner, AtAudioView, Modals, current }) => {
    const { maxUsage } = current;

    I.amOnPage("/");
    LabelStudio.init({
      config: `
<View>
  <Labels name="label" toName="audio" maxUsages="${maxUsage}">
    <Label value="Label_0" />
    <Label value="Label_1" hotkey="1"/>
  </Labels>
  <Audio name="audio" value="$audio" />
</View>`,
      data: {
        audio: "/public/files/barradeen-emotional.mp3",
      },
    });

    await AtAudioView.waitForAudio();
    await AtAudioView.lookForStage();
    AtOutliner.seeRegions(0);

    for (let k = 0; k < maxUsage; k++) {
      I.pressKey("1");
      AtAudioView.dragAudioElement(10 + 40 * k, 30);
      I.pressKey("u");
    }
    I.pressKey("1");
    AtAudioView.dragAudioElement(10 + 40 * maxUsage, 30);

    AtOutliner.seeRegions(maxUsage);
    Modals.seeWarning(`You can't use Label_1 more than ${maxUsage} time(s)`);
  },
);

Data(maxUsageDataTable).Scenario(
  "Max usages of labels in RichText on region creation",
  async ({ I, LabelStudio, AtOutliner, AtRichText, Modals, current }) => {
    const { maxUsage } = current;

    I.amOnPage("/");
    LabelStudio.init({
      config: `
<View>
  <Labels name="label" toName="text" maxUsages="${maxUsage}">
    <Label value="Label_0" />
    <Label value="Label_1" hotkey="1"/>
  </Labels>
  <HyperText name="text" valueType="url" value="$url" inline="true" />
</View>`,
      data: {
        url: "https://htx-pub.s3.amazonaws.com/example.txt",
      },
    });

    AtOutliner.seeRegions(0);
    LabelStudio.waitForObjectsReady();

    for (let k = 0; k < maxUsage; k++) {
      I.pressKey("1");
      AtRichText.selectTextByGlobalOffset(1 + 5 * k, 5 * (k + 1));
      I.pressKey("u");
    }
    I.pressKey("1");
    AtRichText.selectTextByGlobalOffset(1 + 5 * maxUsage, 5 * (maxUsage + 1));

    Modals.seeWarning(`You can't use Label_1 more than ${maxUsage} time(s)`);
  },
);

Data(maxUsageDataTable).Scenario(
  "Max usages of labels in Paragraphs on region creation",
  async ({ I, LabelStudio, AtOutliner, AtParagraphs, current }) => {
    const { maxUsage } = current;

    I.amOnPage("/");
    LabelStudio.init({
      config: `
<View>
  <ParagraphLabels name="label" toName="text" maxUsages="${maxUsage}">
    <Label value="Label_0" />
    <Label value="Label_1" hotkey="1"/>
  </ParagraphLabels>
  <Paragraphs audioUrl="$audio" name="text" value="$dialogue" layout="dialogue" savetextresult="no" />
</View>`,
      data: require("../examples/text-paragraphs").data,
    });

    AtOutliner.seeRegions(0);
    LabelStudio.waitForObjectsReady();

    for (let k = 0; k < maxUsage; k++) {
      I.pressKey("1");
      AtParagraphs.selectTextByOffset(k + 1, 0, 3);
      I.pressKey("u");
      I.pressKey("Escape");
    }

    I.pressKey("1");
    AtParagraphs.selectTextByOffset(maxUsage + 1, 0, 3);

    // Verify that exactly maxUsage regions exist (not maxUsage + 1)
    AtOutliner.seeRegions(maxUsage);

    // Additional validation: Check that the 4th region creation was prevented
    I.executeScript((maxUsageValue) => {
      const regions = window.Htx.annotation?.regionStore?.regions || [];
      const label1Regions = regions.filter((r) => r.hasLabel("Label_1"));

      if (label1Regions.length > maxUsageValue) {
        throw new Error(
          `Max usage validation failed: ${label1Regions.length} Label_1 regions created, but max is ${maxUsageValue}`,
        );
      }
    }, maxUsage);
  },
);

Data(maxUsageDataTable).Scenario(
  "Max usages of labels in Timeseries on region creation",
  async ({ I, LabelStudio, AtOutliner, AtTimeSeries, Modals, current }) => {
    const { maxUsage } = current;

    I.amOnPage("/");
    LabelStudio.init({
      config: `
<View>
  <TimeSeriesLabels name="label" toName="ts" maxUsages="${maxUsage}">
    <Label value="Label_0" />
    <Label value="Label_1" hotkey="1"/>
  </TimeSeriesLabels>
  <TimeSeries name="ts" value="$timeseries" valueType="json" timeColumn="time" format="date" overviewChannels="two">
    <Channel units="Hz" displayFormat=",.1f" strokeColor="#1f77b4" legend="Sensor 1" column="one" />
    <Channel units="Hz" displayFormat=",.1f" strokeColor="#ff7f0e" legend="Sensor 2" column="two" />
  </TimeSeries>
</View>`,
      data: require("../examples/data/sample-sin.json"),
    });

    AtOutliner.seeRegions(0);
    LabelStudio.waitForObjectsReady();
    await AtTimeSeries.lookForStage();

    for (let k = 0; k < maxUsage; k++) {
      I.pressKey("1");
      AtTimeSeries.drawByDrag(1 + k * 20, 10);
      I.pressKey("u");
    }
    I.pressKey("1");
    AtTimeSeries.drawByDrag(1 + maxUsage * 20, 10);

    Modals.seeWarning(`You can't use Label_1 more than ${maxUsage} time(s)`);
  },
);