const assert = require("assert");
const { countKonvaShapes, switchRegionTreeView } = require("./helpers");

const ALL_VISIBLE_SELECTOR = '[aria-label="Hide all regions"]';
const ALL_VISIBLE_SELECTOR_DISABLED = `${ALL_VISIBLE_SELECTOR}[disabled]`;
const ALL_HIDDEN_SELECTOR = '[aria-label="Show all regions"]';
const ONE_VISIBLE_SELECTOR = ".lsf-tree__node:not(.lsf-tree__node_type_label):not(.lsf-tree__node_hidden)";
const ONE_HIDDEN_SELECTOR = ".lsf-tree__node:not(.lsf-tree__node_type_label).lsf-tree__node_hidden";
const ONE_VISIBILITY_TOGGLE_BUTTON = ".lsf-outliner-item__control_type_visibility button";

const config = `
<View>
  <Image name="img" value="$image"></Image>
  <RectangleLabels name="tag" toName="img" fillOpacity="0.5" strokeWidth="5">
    <Label value="Planet"></Label>
    <Label value="Moonwalker" background="blue"></Label>
  </RectangleLabels>
</View>
`;

const data = {
  image:
    "https://htx-pub.s3.us-east-1.amazonaws.com/examples/images/nick-owuor-astro-nic-visuals-wDifg5xc9Z4-unsplash.jpg",
};

const createRegion = (from_name, type, values) => ({
  id: createRegion.id++,
  source: "$image",
  from_name,
  to_name: "img",
  type,
  origin: "manual",
  value: {
    height: 10.458911419423693,
    rotation: 0,
    width: 12.4,
    x: 50.8,
    y: 5.869797225186766,
    ...values,
  },
});

createRegion.id = 1;

const annotations = [
  {
    id: "1001",
    lead_time: 15.053,
    result: [
      createRegion("tag", "rectanglelabels", { rectanglelabels: ["Moonwalker"] }),
      createRegion("tag", "rectanglelabels", { rectanglelabels: ["Moonwalker"], x: 1 }),
      createRegion("tag", "rectanglelabels", { rectanglelabels: ["Moonwalker"], y: 60 }),
    ],
  },
];

Feature("Toggle regions visibility");

Scenario("Checking mass toggling of visibility", async ({ I, LabelStudio, AtOutliner }) => {
  const checkVisible = async (num) => {
    switch (num) {
      case 0:
        I.seeElement(ALL_HIDDEN_SELECTOR);
        I.seeElement(ONE_HIDDEN_SELECTOR);
        I.dontSeeElement(ONE_VISIBLE_SELECTOR);
        break;
      case 1:
      case 2:
        I.seeElement(ALL_VISIBLE_SELECTOR);
        I.seeElement(ONE_VISIBLE_SELECTOR);
        I.seeElement(ONE_HIDDEN_SELECTOR);
        break;
      case 3:
        I.seeElement(ALL_VISIBLE_SELECTOR);
        I.seeElement(ONE_VISIBLE_SELECTOR);
        I.dontSeeElement(ONE_HIDDEN_SELECTOR);
        break;
    }
    const count = await I.executeScript(countKonvaShapes);

    assert.strictEqual(count, num);
  };
  const hideAll = () => {
    I.click(ALL_VISIBLE_SELECTOR);
  };
  const showAll = () => {
    I.click(ALL_HIDDEN_SELECTOR);
  };
  const hideOne = () => {
    I.moveCursorTo(ONE_VISIBLE_SELECTOR);
    I.click(ONE_VISIBILITY_TOGGLE_BUTTON);
  };
  const showOne = () => {
    I.moveCursorTo(ONE_HIDDEN_SELECTOR);
    I.click(ONE_VISIBILITY_TOGGLE_BUTTON);
  };

  await I.amOnPage("/");
  LabelStudio.init({ annotations, config, data });
  LabelStudio.waitForObjectsReady();
  AtOutliner.seeRegions(3);
  await checkVisible(3);
  hideOne();
  await checkVisible(2);
  showOne();
  await checkVisible(3);
  hideAll();
  await checkVisible(0);
  showOne();
  await checkVisible(1);
  hideOne();
  await checkVisible(0);
  showAll();
  await checkVisible(3);
  hideOne();
  await checkVisible(2);
  hideAll();
  await checkVisible(0);
});

Scenario("Hiding bulk visibility toggle", ({ I, LabelStudio, AtImageView, AtLabels, AtOutliner }) => {
  I.amOnPage("/");
  LabelStudio.init({ config, data });
  LabelStudio.waitForObjectsReady();
  AtOutliner.seeRegions(0);
  I.seeElement(ALL_VISIBLE_SELECTOR_DISABLED);
  AtLabels.clickLabel("Planet");
  AtImageView.dragKonva(300, 300, 50, 50);
  AtOutliner.seeRegions(1);
  I.seeElement(ALL_VISIBLE_SELECTOR);
});

Scenario("Checking regions grouped by label", async ({ I, LabelStudio }) => {
  const checkVisible = async (num) => {
    switch (num) {
      case 0:
        I.seeElement(ALL_HIDDEN_SELECTOR);
        I.seeElement(ONE_HIDDEN_SELECTOR);
        I.dontSeeElement(ONE_VISIBLE_SELECTOR);
        break;
      case 1:
      case 2:
        I.seeElement(ALL_VISIBLE_SELECTOR);
        I.seeElement(ONE_VISIBLE_SELECTOR);
        I.seeElement(ONE_HIDDEN_SELECTOR);
        break;
      case 3:
        I.seeElement(ALL_VISIBLE_SELECTOR);
        I.seeElement(ONE_VISIBLE_SELECTOR);
        I.dontSeeElement(ONE_HIDDEN_SELECTOR);
        break;
    }
    const count = await I.executeScript(countKonvaShapes);

    assert.strictEqual(count, num);
  };
  const hideAll = () => {
    I.click(ALL_VISIBLE_SELECTOR);
  };
  const showAll = () => {
    I.click(ALL_HIDDEN_SELECTOR);
  };
  const hideOne = () => {
    I.moveCursorTo(ONE_VISIBLE_SELECTOR);
    I.click(ONE_VISIBILITY_TOGGLE_BUTTON);
  };
  const showOne = () => {
    I.moveCursorTo(ONE_HIDDEN_SELECTOR);
    I.click(ONE_VISIBILITY_TOGGLE_BUTTON);
  };

  await I.amOnPage("/");
  LabelStudio.init({ annotations, config, data });
  LabelStudio.waitForObjectsReady();

  // Wait for ViewControls to be visible
  I.waitForElement(".lsf-view-controls", 5);

  // Switch to label grouping using UI interaction
  I.click('[data-testid="grouping-manual"]');
  I.waitForElement(".lsf-menu", 2);

  I.waitForElement(".lsf-dropdown.lsf-visible");
  // Click on the "Group by Label" option in the dropdown
  I.click('//div[contains(@class, "lsf-view-controls__label") and contains(text(), "Group by Label")]');

  // Wait for UI to update and verify the grouping button changed
  I.waitForElement('[data-testid="grouping-label"]', 5);

  await checkVisible(3);
  hideOne();
  await checkVisible(2);
  showOne();
  await checkVisible(3);
  hideAll();
  await checkVisible(0);
  showOne();
  await checkVisible(1);
  hideOne();
  await checkVisible(0);
  showAll();
  await checkVisible(3);
  hideOne();
  await checkVisible(2);
  hideAll();
  await checkVisible(0);
});

const examples = [
  require("../examples/audio-regions"),
  require("../examples/image-bboxes"),
  require("../examples/image-ellipses"),
  require("../examples/image-keypoints"),
  require("../examples/image-polygons"),
  require("../examples/ner-url"),
  require("../examples/nested"),
  require("../examples/text-html"),
  require("../examples/text-paragraphs"),
  require("../examples/timeseries-url-indexed"),
];
const examplesTable = new DataTable(["title", "config", "data", "result"]);

examples.forEach((example) => {
  const { annotations, config, data, result = annotations[0].result, title } = example;

  examplesTable.add([title, config, data, result]);
});

Data(examplesTable).Scenario(
  "Check visibility switcher through all examples",
  ({ I, LabelStudio, AtOutliner, current }) => {
    const { config, data, result } = current;
    const params = { annotations: [{ id: "test", result }], config, data };

    const ids = [];

    result.forEach((r) => !ids.includes(r.id) && Object.keys(r.value).length > 1 && ids.push(r.id));

    I.amOnPage("/");
    LabelStudio.init(params);
    const regionsCount = ids.length;

    AtOutliner.seeRegions(regionsCount);

    if (regionsCount) {
      I.seeElement(ALL_VISIBLE_SELECTOR);
      I.seeNumberOfElements(ONE_VISIBLE_SELECTOR, regionsCount);
      I.click(ALL_VISIBLE_SELECTOR);
      I.seeElement(ALL_HIDDEN_SELECTOR);
      I.seeNumberOfElements(ONE_HIDDEN_SELECTOR, regionsCount);
    }
  },
);