Feature("Richtext basic functional");

Before(({ LabelStudio }) => {
  LabelStudio.setFeatureFlags({
    fflag_feat_front_dev_3873_labeling_ui_improvements_short: true,
  });
});

Scenario("Creating, removing and restoring regions", async ({ I, LabelStudio, AtOutliner, AtRichText }) => {
  I.amOnPage("/");

  LabelStudio.init({
    config: `<View>
    <Labels name="label" toName="html">
        <Label value="Highlight" background="rgb(225,180,0)" />
    </Labels>
    <HyperText name="html" value="$html" />
</View>`,
    data: {
      html: "<div>Hello world!</div>",
    },
    annotations: [
      {
        id: "test",
        result: [
          {
            id: "Highlight_1",
            from_name: "label",
            to_name: "html",
            type: "labels",
            value: {
              start: "/div[1]",
              startOffset: 0,
              end: "/div[1]",
              endOffset: 5,
              labels: ["Highlight"],
            },
          },
        ],
      },
    ],
  });

  LabelStudio.waitForObjectsReady();

  const regionALocator = locate(".htx-highlight").withText("Hello");
  const regionAStyleLocator = locate('style[id^="highlight-Highlight_1"]');
  const regionBLocator = locate(".htx-highlight").withText("world");
  const regionBStyleLocator = locate(
    'style[id^="highlight-"]:not([id^="highlight-Highlight_1"]):not([id="highlight-html"])',
  );

  AtOutliner.seeRegions(1);
  I.say("We have 1 preset region. Let's create another one.");
  I.pressKey("1");
  AtRichText.selectTextByGlobalOffset(6, 11);
  AtOutliner.seeRegions(2);

  within({ frame: ".lsf-richtext__iframe" }, () => {
    I.say("We can see all the regions inside the rich text and their styles in head.");
    I.seeElement(regionALocator);
    I.seeElementInDOM(regionAStyleLocator);
    I.seeElement(regionBLocator);
    I.seeElementInDOM(regionBStyleLocator);
  });

  I.say("Delete all regions");
  I.pressKey(["CommandOrControl", "Backspace"]);
  I.acceptPopup();

  AtOutliner.seeRegions(0);
  within({ frame: ".lsf-richtext__iframe" }, () => {
    I.say("Spans and styles should disappear");
    I.dontSeeElement(regionALocator);
    I.dontSeeElementInDOM(regionAStyleLocator);
    I.dontSeeElement(regionBLocator);
    I.dontSeeElementInDOM(regionBStyleLocator);
  });

  I.say("Go back through the history and check that everything is restored");
  I.pressKey(["CommandOrControl", "z"]);

  within({ frame: ".lsf-richtext__iframe" }, () => {
    I.say("We can see all the regions inside the rich text and their styles in head.");
    I.seeElement(regionALocator);
    I.seeElementInDOM(regionAStyleLocator);
    I.seeElement(regionBLocator);
    I.seeElementInDOM(regionBStyleLocator);
  });
});

Scenario("Region should load after change between annotation tabs", async ({ I, LabelStudio }) => {
  I.amOnPage("/");

  LabelStudio.init({
    config: `<View>
    <Labels name="label" toName="html">
        <Label value="Highlight" background="rgb(225,180,0)" />
    </Labels>
    <HyperText name="html" value="$html" />
</View>`,
    data: {
      html: "<div>Hello world!</div>",
    },
    annotations: [
      {
        id: "1234",
        result: [
          {
            id: "Highlight_1",
            from_name: "label",
            to_name: "html",
            type: "labels",
            value: {
              start: "/div[1]",
              startOffset: 0,
              end: "/div[1]",
              endOffset: 5,
              labels: ["Highlight"],
            },
          },
        ],
      },
      {
        id: "1235",
        result: [
          {
            id: "Highlight_2",
            from_name: "label",
            to_name: "html",
            type: "labels",
            value: {
              start: "/div[1]",
              startOffset: 6,
              end: "/div[1]",
              endOffset: 11,
              labels: ["Highlight"],
            },
          },
        ],
      },
    ],
  });

  LabelStudio.waitForObjectsReady();

  // select second annotation
  I.click(".lsf-annotation-button:nth-child(2)");
  // select first annotation
  I.click(".lsf-annotation-button:nth-child(1)");
  // select second annotation again
  I.click(".lsf-annotation-button:nth-child(2)");
  // check if region is visible
  within({ frame: ".lsf-richtext__iframe" }, () => {
    I.seeElement(locate(".htx-highlight").withText("Hello"));
  });
  // select first annotation again
  I.click(".lsf-annotation-button:nth-child(1)");
  // check if region is visible
  within({ frame: ".lsf-richtext__iframe" }, () => {
    I.seeElement(locate(".htx-highlight").withText("world"));
  });
});

Scenario("Rich text content consistency", async ({ I, LabelStudio, AtOutliner, AtRichText }) => {
  I.amOnPage("/");

  LabelStudio.init({
    config: `<View>
    <Labels name="label" toName="html">
        <Label value="Highlight" background="#617ADA" />
    </Labels>
    <HyperText name="html" value="$html" />
</View>`,
    data: {
      html: "<div>One two three</div>",
    },
    annotations: [
      {
        id: "test",
        result: [],
      },
    ],
  });

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

  const checkThatRegionsDoNotAffectContent = async (startOffset, endOffset) => {
    within({ frame: ".lsf-richtext__iframe" }, async () => {
      I.seeElement(locate("div").withText("One two three"));
    });

    I.say(`Create region in range [${startOffset},${endOffset}]`);
    I.pressKey("u");
    I.pressKey("1");
    AtRichText.selectTextByGlobalOffset(startOffset, endOffset);
    AtOutliner.seeRegions(1);

    within({ frame: ".lsf-richtext__iframe" }, () => {
      I.seeElement(locate("div").withText("One two three"));
    });

    I.say("Remove region");
    AtOutliner.clickRegion(1);
    I.pressKey("Backspace");
    AtOutliner.seeRegions(0);

    within({ frame: ".lsf-richtext__iframe" }, () => {
      I.seeElement(locate("div").withText("One two three"));
    });

    I.say("Go back through the history");
    I.pressKey(["CommandOrControl", "z"]);

    within({ frame: ".lsf-richtext__iframe" }, () => {
      I.seeElement(locate("div").withText("One two three"));
    });

    I.say("Go forward through the history");
    I.pressKey(["CommandOrControl", "shift", "z"]);

    within({ frame: ".lsf-richtext__iframe" }, () => {
      I.seeElement(locate("div").withText("One two three"));
    });
  };

  checkThatRegionsDoNotAffectContent(0, 3);
  checkThatRegionsDoNotAffectContent(8, 13);
  checkThatRegionsDoNotAffectContent(4, 7);
});