const assert = require("assert");

Feature("Richtext regions interactions");

Scenario(
  "Setting correct cursor on regions in relation creating mode",
  async ({ I, LabelStudio, AtOutliner, AtDetails }) => {
    I.amOnPage("/");
    LabelStudio.init({
      config: `<View>
    <Labels name="label" toName="text">
        <Label value="Label" background="green"/>
    </Labels>
    <Text name="text" value="$text" />
</View>`,
      data: {
        text: "Here is some text.",
      },
      annotations: [
        {
          id: "test",
          result: [
            {
              id: "A",
              from_name: "label",
              to_name: "text",
              type: "labels",
              value: { start: 0, end: 4, labels: ["Label"] },
            },
            {
              id: "B",
              from_name: "label",
              to_name: "text",
              type: "labels",
              value: { start: 5, end: 7, labels: ["Label"] },
            },
            {
              id: "C",
              from_name: "label",
              to_name: "text",
              type: "labels",
              value: { start: 5, end: 7, labels: ["Label"] },
            },
            {
              id: "D",
              from_name: "label",
              to_name: "text",
              type: "labels",
              value: { start: 8, end: 12, labels: ["Label"] },
            },
          ],
        },
      ],
    });
    LabelStudio.waitForObjectsReady();
    AtOutliner.seeRegions(4);

    I.say("Hide last region");
    AtOutliner.toggleRegionVisibility(4);

    I.say("Go into the relation creating mode from the first region");
    AtOutliner.clickRegion(1);
    AtDetails.clickCreateRelation();

    I.say("Cursor should be equal to `crosshair` when element is hovered and it is relation creating mode and visible");
    {
      I.say("Check the same region");
      const elementLocator = locate('[class*="htx-highlight-A"]');

      I.moveCursorTo(elementLocator);
      const cursor = await I.grabCssPropertyFrom(elementLocator, "cursor");

      assert.strictEqual(cursor, "crosshair");
    }
    {
      I.say("Check second region");
      const elementLocator = locate('[class*="htx-highlight-B"]');

      I.moveCursorTo(elementLocator);
      const cursor = await I.grabCssPropertyFrom(elementLocator, "cursor");

      assert.strictEqual(cursor, "crosshair");
    }

    {
      I.say("Check the hidden region");
      const elementLocator = locate('[class*="htx-highlight-D"]');

      I.moveCursorTo(elementLocator);
      const cursor = await I.grabCssPropertyFrom(elementLocator, "cursor");

      assert.notStrictEqual(cursor, "crosshair");
    }

    AtDetails.clickCreateRelation();
    I.say("It's not relation creating mode so there should be cursor equal to `pointer`");
    {
      I.say("Check the same region");
      const elementLocator = locate('[class*="htx-highlight-A"]');

      I.moveCursorTo(elementLocator);
      const cursor = await I.grabCssPropertyFrom(elementLocator, "cursor");

      assert.strictEqual(cursor, "pointer");
    }
    {
      I.say("Check second region");
      const elementLocator = locate('[class*="htx-highlight-B"]');

      I.moveCursorTo(elementLocator);
      const cursor = await I.grabCssPropertyFrom(elementLocator, "cursor");

      assert.strictEqual(cursor, "pointer");
    }
    {
      I.say("Check the hidden region");
      const elementLocator = locate('[class*="htx-highlight-D"]');

      I.moveCursorTo(elementLocator);
      const cursor = await I.grabCssPropertyFrom(elementLocator, "cursor");

      assert.notStrictEqual(cursor, "pointer");
    }
  },
);

Scenario("Hidden region interactions", async ({ I, LabelStudio, AtOutliner, AtDetails }) => {
  I.amOnPage("/");

  LabelStudio.init({
    config: `<View>
    <Labels name="label" toName="text">
        <Label value="Label" background="green"/>
    </Labels>
    <Text name="text" value="$text" />
</View>`,
    data: {
      text: "Here is some text.",
    },
    annotations: [
      {
        id: "test",
        result: [
          {
            id: "a",
            from_name: "label",
            to_name: "text",
            type: "labels",
            value: { start: 0, end: 4, labels: ["Label"] },
          },
          {
            id: "hidden_1",
            from_name: "label",
            to_name: "text",
            type: "labels",
            value: { start: 2, end: 3, labels: ["Label"] },
          },
          {
            id: "hidden_2",
            from_name: "label",
            to_name: "text",
            type: "labels",
            value: { start: 5, end: 7, labels: ["Label"] },
          },
          {
            id: "hidden_3",
            from_name: "label",
            to_name: "text",
            type: "labels",
            value: { start: 8, end: 12, labels: ["Label"] },
          },
          {
            id: "b",
            from_name: "label",
            to_name: "text",
            type: "labels",
            value: { start: 9, end: 11, labels: ["Label"] },
          },
        ],
      },
    ],
  });

  LabelStudio.waitForObjectsReady();

  I.say("Hide last regions");
  AtOutliner.toggleRegionVisibility(2);
  AtOutliner.toggleRegionVisibility(3);
  AtOutliner.toggleRegionVisibility(4);

  I.say("Try to select the first hidden element");
  I.click(locate(".htx-highlight").withText("r"));
  I.say("It should select other visible element");
  I.dontSeeElement(locate(".htx-highlight.__hidden.__active").withText("r"));
  I.seeElement(locate(".htx-highlight.__active").withChild(locate(".htx-highlight.__hidden").withText("r")));

  I.say("Reset selection");
  I.pressKey("u");

  I.say("Try to select the second hidden element");
  I.click(locate(".htx-highlight").withText("is"));
  I.say("It should not select anything");
  I.dontSeeElement(locate(".htx-highlight.__active"));

  I.say("Try to select the visible element over the third hidden one");
  I.click(locate(".htx-highlight:not(.__hidden)").withText("om"));
  I.say("It should become selected");
  I.dontSeeElement(locate(".htx-highlight.__hidden.__active").withChild(locate(".htx-highlight").withText("om")));
  I.seeElement(locate(".htx-highlight.__active:not(.__hidden)").withText("om"));
});