const { FFlagMatrix, FFlagScenario } = require("../../utils/feature-flags");

Feature("Audio Regions");

const config = `
<View>
  <Header value="Select regions:"></Header>
  <Labels name="label" toName="audio" choice="multiple">
    <Label value="Beat" background="yellow"></Label>
    <Label value="Voice" background="red"></Label>
    <Label value="Guitar" background="blue"></Label>
    <Label value="Other"></Label>
  </Labels>
  <Header value="Select genre:"></Header>
  <Choices name="choice" toName="audio" choice="multiple">
    <Choice value="Lo-Fi" />
    <Choice value="Rock" />
    <Choice value="Pop" />
  </Choices>
  <Header value="Listen the audio:"></Header>
  <Audio name="audio" value="$url"></Audio>
</View>
`;

const configSpeech = `
<View>
    <Audio name="audio" value="$url"></Audio>
    <Labels name="label" toName="audio">
      <Label value="Speech"/>
      <Label value="Noise" background="grey"/>
    </Labels>
    <TextArea name="transcription" toName="audio"
              perRegion="true" whenTagName="label" whenLabelValue="Speech"
              displayMode="region-list"/>
    <Choices name="sentiment" toName="audio" showInline="true"
             perRegion="true" whenTagName="label" whenLabelValue="Speech">
        <Choice value="Positive"/>
        <Choice value="Neutral"/>
        <Choice value="Negative"/>
    </Choices>
  </View>
`;

const data = {
  url: "/public/files/barradeen-emotional.mp3",
};

const annotations = [
  {
    from_name: "choice",
    id: "hIj6zg57SY",
    to_name: "audio",
    type: "choices",
    origin: "manual",
    value: {
      choices: ["Lo-Fi"],
    },
  },
  {
    from_name: "label",
    id: "JhxupEJWlW",
    to_name: "audio",
    original_length: 98.719925,
    type: "labels",
    origin: "manual",
    value: {
      channel: 1,
      end: 59.39854733358493,
      labels: ["Other"],
      start: 55.747572792986325,
    },
  },
];

const params = { annotations: [{ id: "test", result: annotations }], config, data };
const paramsSpeech = { annotations: [{ id: "test", result: [] }], config: configSpeech, data };

FFlagMatrix(["fflag_feat_front_lsdv_e_278_contextual_scrolling_short"], (flags) => {
  FFlagScenario("Check if regions are selected", async ({ I, LabelStudio, AtAudioView, AtOutliner }) => {
    LabelStudio.setFeatureFlags({
      ff_front_dev_2715_audio_3_280722_short: true,
      ...flags,
    });
    I.amOnPage("/");

    LabelStudio.init(params);

    await AtAudioView.waitForAudio();
    await AtAudioView.lookForStage();

    AtOutliner.seeRegions(1);

    // creating a new region
    I.pressKey("1");
    AtAudioView.dragAudioElement(160, 80);
    I.pressKey("u");

    AtOutliner.seeRegions(2);

    AtAudioView.clickAt(170);
    AtOutliner.seeSelectedRegion();
    AtAudioView.clickAt(170);
    AtOutliner.dontSeeSelectedRegion();
    AtAudioView.dragAudioElement(170, 40);
    AtOutliner.seeSelectedRegion();
    AtAudioView.clickAt(220);
    AtOutliner.dontSeeSelectedRegion();
  })
    .tag("@flakey")
    .retry(3);

  // Don't need to test this for both scenarios of flags, as it is the same code and is verified in the above test
  if (!flags.fflag_feat_front_lsdv_e_278_contextual_scrolling_short) {
    FFlagScenario(
      "Check if multiple regions are working changing labels",
      async ({ I, LabelStudio, AtAudioView, AtOutliner, AtLabels }) => {
        LabelStudio.setFeatureFlags({
          ff_front_dev_2715_audio_3_280722_short: true,
          ...flags,
        });
        I.amOnPage("/");

        LabelStudio.init(paramsSpeech);

        await AtAudioView.waitForAudio();
        await AtAudioView.lookForStage();

        for (let i = 0; i < 10; i++) {
          // creating a new region
          I.pressKey("1");
          AtLabels.seeSelectedLabel("Speech");
          AtAudioView.dragAudioElement(40 * i + 10, 30);
          AtOutliner.dontSeeSelectedRegion();
          AtAudioView.clickAt(40 * i + 20);
          AtOutliner.seeSelectedRegion();
          I.pressKey("2");
          I.pressKey("1");
          I.pressKey("u");
        }

        AtOutliner.seeRegions(10);

        for (let i = 0; i < 10; i++) {
          // creating a new region
          AtAudioView.clickAt(40 * i + 20);
          AtOutliner.seeSelectedRegion();
          I.pressKey("u");
        }

        AtOutliner.seeRegions(10);

        I.pressKey("u");

        AtOutliner.dontSeeSelectedRegion();
      },
    )
      .tag("@flakey")
      .retry(3);

    FFlagScenario("Can select a region below a hidden region", async ({ I, LabelStudio, AtAudioView, AtOutliner }) => {
      LabelStudio.setFeatureFlags({
        ff_front_dev_2715_audio_3_280722_short: true,
        ...flags,
      });
      I.amOnPage("/");

      LabelStudio.init(paramsSpeech);

      await AtAudioView.waitForAudio();
      await AtAudioView.lookForStage();

      // create a new region
      I.pressKey("1");
      AtAudioView.dragAudioElement(50, 80);
      I.pressKey("u");

      AtOutliner.seeRegions(1);

      // create a new region above the first one
      I.pressKey("2");
      AtAudioView.dragAudioElement(49, 81);
      I.pressKey("u");

      AtOutliner.seeRegions(2);

      // click on the top-most region visible to select it
      AtAudioView.clickAt(51);
      AtOutliner.seeSelectedRegion("Noise");

      // hide the region
      AtOutliner.toggleRegionVisibility("Noise");

      // click on the region below the hidden one to select it
      AtAudioView.clickAt(51);
      AtOutliner.seeSelectedRegion("Speech");
    })
      .tag("@flakey")
      .retry(3);

    FFlagScenario(
      "Selecting a region brings it to the front of the stack",
      async ({ I, LabelStudio, AtAudioView, AtOutliner }) => {
        LabelStudio.setFeatureFlags({
          ff_front_dev_2715_audio_3_280722_short: true,
          ...flags,
        });
        I.amOnPage("/");

        LabelStudio.init(paramsSpeech);

        await AtAudioView.waitForAudio();
        await AtAudioView.lookForStage();

        // create a new region
        I.pressKey("1");
        AtAudioView.dragAudioElement(50, 80);
        I.pressKey("u");

        AtOutliner.seeRegions(1);

        // create a new region above the first one
        I.pressKey("2");
        AtAudioView.dragAudioElement(49, 81);
        I.pressKey("u");

        AtOutliner.seeRegions(2);

        // click on the top-most region visible to select it
        AtAudioView.clickAt(51);
        AtOutliner.seeSelectedRegion("Noise");

        // Select the bottom most region to bring it to the top
        AtOutliner.clickRegion("Speech");
        AtOutliner.seeSelectedRegion("Speech");

        // click on the overlapping region will deselect it, which shows that it is now the top in the list
        AtAudioView.clickAt(51);
        AtOutliner.dontSeeSelectedRegion("Speech");
        AtOutliner.dontSeeSelectedRegion("Noise");

        // click on the overlapping region will select the top item of the list, which will now be the item which was brought to the front by the original interaction.
        AtAudioView.clickAt(51);
        AtOutliner.seeSelectedRegion("Speech");
      },
    );

    FFlagScenario("Delete region by pressing delete hotkey", async ({ I, LabelStudio, AtAudioView, AtOutliner }) => {
      LabelStudio.setFeatureFlags({
        ff_front_dev_2715_audio_3_280722_short: true,
        ...flags,
      });
      I.amOnPage("/");

      LabelStudio.init(params);

      await AtAudioView.waitForAudio();
      await AtAudioView.lookForStage();

      AtOutliner.seeRegions(1);

      // creating a new region
      AtAudioView.dragAudioElement(160, 80);

      I.pressKey("Delete");

      I.pressKey("1");

      AtOutliner.seeRegions(1);
    });

    FFlagScenario("Check if there are ghost regions", async ({ I, LabelStudio, AtAudioView, AtOutliner }) => {
      LabelStudio.setFeatureFlags({
        ff_front_dev_2715_audio_3_280722_short: true,
        ...flags,
      });
      I.amOnPage("/");

      LabelStudio.init(paramsSpeech);

      await AtAudioView.waitForAudio();
      await AtAudioView.lookForStage();

      // creating a new region
      I.pressKey("1");
      AtAudioView.dragAudioElement(300, 80);
      I.pressKey("u");

      // creating a ghost region
      I.pressKey("1");
      AtAudioView.dragAudioElement(160, 80, false);
      I.pressKey("1");
      I.waitTicks(2);
      I.pressMouseUp();
      I.waitTicks(2);

      // checking if the created region is selected
      AtAudioView.clickAt(310);
      AtOutliner.seeSelectedRegion();

      // trying to select the ghost region, if there is no ghost region, the region will keep selected
      // as ghost region is not selectable and impossible to change the label, the created region will be deselected if there is a ghost region created.
      AtAudioView.clickAt(170);
      I.pressKey("2");
      AtOutliner.seeSelectedRegion();

      AtOutliner.seeRegions(2);
    });
  }
});