const assert = require("assert");

Feature("Shortcuts functional").config({ waitForAction: 16 });

const createConfig = ({ rows = "1" }) => {
  return `<View>
  <TextArea name="text" toName="audio" editable="true" rows="${rows}">
    <Shortcut alias="[-]" value="-" hotkey="1" />
    <Shortcut alias="[ + ]" value=" + " hotkey="2" />
    <Shortcut alias="[!]" value="!" hotkey="3" />
    <Shortcut alias="[make a ninja]" value="‍👤" hotkey="4" />
  </TextArea>
  <Audio name="audio" value="$audio"/>
  <Labels name="labels" toName="audio" allowempty="true">
    <Label value="Label1"/>
    <Label value="Label2"/>
  </Labels>
</View>
`;
};

const configParams = new DataTable(["inline"]);

[true, false].forEach((inline) => {
  configParams.add([inline]);
});

const AUDIO_URL = "/public/files/barradeen-emotional.mp3";

const TEXT_SELECTOR = "[name='text']";

Data(configParams).Scenario(
  "Should keep the focus and cursor position.",
  async ({ I, LabelStudio, AtOutliner, current }) => {
    const { inline } = current;
    const config = createConfig({
      rows: inline ? "1" : "3",
    });

    const params = {
      config,
      data: { audio: AUDIO_URL },
    };

    I.amOnPage("/");
    LabelStudio.init(params);
    AtOutliner.seeRegions(0);

    // Check if there is right input element
    I.seeElement((inline ? "input" : "textarea") + TEXT_SELECTOR);

    // Input something there
    I.fillField(TEXT_SELECTOR, "A B");

    // Try to use shortcuts
    // A B
    I.click(TEXT_SELECTOR);
    // A B|
    // Shortcut by pressing hotkey (the cursor is at the end)
    I.pressKey("3");
    // A B!|
    I.pressKey("ArrowLeft");
    // A B|!
    I.pressKey("ArrowLeft");
    // A |B!
    // Select space
    I.pressKeyDown("Shift");
    I.pressKey("ArrowLeft");
    I.pressKeyUp("Shift");
    // A| |B!
    // Shortcut by clicking button (the cursor is in the middle)
    I.click(`${locate(".ant-tag").toXPath()}[contains(text(), '[ + ]')]`);
    // A + |B!
    I.pressKey("ArrowLeft");
    // A +| B!
    I.pressKey("ArrowLeft");
    // A |+ B!
    I.pressKey("ArrowLeft");
    // A| + B!
    I.pressKey("ArrowLeft");
    // |A + B!
    // Shortcut by pressing hotkey (the cursor is at the begin)
    I.pressKey("1");
    // -|A + B!
    // Commit
    I.pressKey(["Shift", "Enter"]);

    // If we got an expected result then we didn't lost focus.
    const result = await LabelStudio.serialize();
    assert.equal(result.length, 1);
    assert.equal(result[0].value.text[0], "-A + B!");
  },
);

Data(configParams).Scenario("Should work with emoji.", async ({ I, LabelStudio, AtOutliner, current }) => {
  const { inline } = current;
  const config = createConfig({
    rows: inline ? "1" : "3",
  });

  const params = {
    config,
    data: { audio: AUDIO_URL },
  };

  I.amOnPage("/");
  LabelStudio.init(params);
  AtOutliner.seeRegions(0);

  // Check if there is right input element
  I.seeElement((inline ? "input" : "textarea") + TEXT_SELECTOR);

  // Try to use shortcuts with emoji
  // Input some cats
  I.fillField(TEXT_SELECTOR, "🐱🐱🐱");
  // 🐱🐱🐱
  I.click(TEXT_SELECTOR);
  // 🐱🐱🐱|
  // Move cursor to the end of the second cat emoji
  I.pressKey("ArrowLeft");
  // 🐱🐱|🐱
  // Make the cat a ninja cat
  I.pressKey("4");
  // 🐱🐱‍👤|🐱
  // Commit
  I.pressKey(["Shift", "Enter"]);

  // If we got an expected result then we didn't lost focus.
  const result = await LabelStudio.serialize();
  assert.equal(result.length, 1);
  assert.equal(result[0].value.text[0], "🐱🐱‍👤🐱");
});

Data(configParams).Scenario("Should work with existent regions.", async ({ I, LabelStudio, AtOutliner, current }) => {
  const { inline } = current;
  const config = createConfig({
    rows: inline ? "1" : "3",
  });

  const params = {
    config,
    data: { audio: AUDIO_URL },
    annotations: [
      {
        id: "Test",
        result: [
          {
            value: { text: ["A B"] },
            id: "floE-bRC8E",
            from_name: "text",
            to_name: "audio",
            type: "textarea",
          },
        ],
      },
    ],
  };

  I.amOnPage("/");
  LabelStudio.init(params);
  // Text regions will not be displayed at outliner
  AtOutliner.seeRegions(0);
  LabelStudio.waitForObjectsReady();

  const initialResult = await LabelStudio.serialize();
  assert.equal(initialResult.length, 1);

  // Start editing
  I.click('[aria-label="Edit Region"]');

  // Try to use shortcuts
  // A B|
  // Shortcut by pressing hotkey (the cursor is at the end)
  I.pressKey("3");
  // A B!|
  I.pressKey("ArrowLeft");
  // A B|!
  I.pressKey("ArrowLeft");
  // A |B!
  // Select space
  I.pressKeyDown("Shift");
  I.pressKey("ArrowLeft");
  I.pressKeyUp("Shift");
  // A| |B!
  // Shortcut by clicking button (the cursor is in the middle)
  I.click(`${locate(".ant-tag").toXPath()}[contains(text(), '[ + ]')]`);
  // A + |B!
  I.pressKey("ArrowLeft");
  // A +| B!
  I.pressKey("ArrowLeft");
  // A |+ B!
  I.pressKey("ArrowLeft");
  // A| + B!
  I.pressKey("ArrowLeft");
  // |A + B!
  // Shortcut by pressing hotkey (the cursor is at the begin)
  I.pressKey("1");
  // -|A + B!
  // Commit
  I.pressKey(["Shift", "Enter"]);

  // If we got an expected result then we didn't lost focus.
  const result = await LabelStudio.serialize();
  assert.equal(result.length, 1);
  assert.equal(result[0].value.text[0], "-A + B!");
});

{
  const paramsTable = new DataTable(["isInline", "isPerRegion"]);

  for (const isPerRegion of [true, false]) {
    for (const isInline of [true, false]) {
      paramsTable.add([isInline, isPerRegion]);
    }
  }

  const createConfig = ({ rows = "1" }) => {
    return `<View>
  <Text name="text" value="$text" />
  <TextArea name="comment" toName="text" editable="true" rows="${rows}">
    <Shortcut value="Shortcut" hotkey="Alt+V" />
  </TextArea>
</View>
`;
  };
  const createPerRegionConfig = ({ rows = "1" }) => {
    return `<View>
  <Labels name="label" toName="text">
    <Label value="region" />
  </Labels>
  <Text name="text" value="$text" />
  <TextArea name="comment" toName="text" editable="true" rows="${rows}">
    <Shortcut value="Shortcut" hotkey="Alt+V" />
  </TextArea>
</View>
`;
  };

  Data(paramsTable).Scenario("Initial focus", async ({ I, LabelStudio, AtOutliner, current }) => {
    const { isInline, isPerRegion } = current;
    const config = (isPerRegion ? createPerRegionConfig : createConfig)({
      rows: isInline ? "1" : "3",
    });

    I.amOnPage("/");

    LabelStudio.init({
      config,
      data: { text: "A simple text" },
      annotations: [
        {
          id: "Test",
          result: isPerRegion
            ? [
                {
                  value: {
                    start: 9,
                    end: 13,
                    text: "text",
                    labels: ["region"],
                  },
                  id: "Yk0XNP_zRJ",
                  from_name: "label",
                  to_name: "text",
                  type: "labels",
                  origin: "manual",
                },
              ]
            : [],
        },
      ],
    });

    if (isPerRegion) {
      I.say("Select region");
      AtOutliner.clickRegion(1);
    }
    I.say("Try to use shortcut at the start");
    I.click(locate(".ant-tag").withText("Shortcut"));
    // eslint-disable-next-line
    // pause();

    I.waitForValue('[name="comment"]', "Shortcut");

    I.say("Commit text");
    I.pressKey(["Shift", "Enter"]);

    I.say("Check that shortcuts still work in the edit mode");
    I.click('[aria-label="Edit Region"]');
    I.click(locate(".ant-tag").withText("Shortcut"));
    I.waitForValue('[name^="comment:"]', "ShortcutShortcut");

    I.say("Commit changes");
    I.pressKey(["Shift", "Enter"]);

    I.say("Check that shortcuts work with textarea again");
    I.click(locate(".ant-tag").withText("Shortcut"));
    I.waitForValue('[name="comment"]', "Shortcut");
  });
}