const assert = require("assert");

const config = `
<View>
  <Collapse accordion="false">
    <Panel value="FAQ">
      <Header value="Main questions" />
      <View>
        <Collapse>
          <Panel value="How to add info to config">
            <Text name="q1" value="You can use View, Collapse, Header and Text" />
          </Panel>
          <Panel value="How to add images to config">
            <Text name="q2" value="You can use Image tag with name and static value" />
          </Panel>
        </Collapse>
      </View>
    </Panel>
    <Panel value="Labeling UI">
      <Text name="text" value="$text" />
    </Panel>
  </Collapse>
  <Style>.tall { height: 200px; }</Style>
  <View className="tall">
    <Header size="6">Small header</Header>
  </View>
  <Header size="3">Usual header</Header>
</View>
`;

const data = {
  text: "The quick brown fox jumps over the lazy dog",
};

Feature("Visual tags");

Scenario("Check Collapse, Header and Style", async ({ I, LabelStudio }) => {
  // @todo usual click should work because of role=button
  // @todo or at least locate('[role=button]'), but both of them are failing
  const clickCollapse = (text) => I.click(locate(".ant-collapse-header").withText(text));

  LabelStudio.setFeatureFlags({
    fflag_fix_front_dev_3391_interactive_view_all: true,
  });
  await I.amOnPage("/");
  LabelStudio.init({ config, data });
  I.see("FAQ");
  I.say("Every panel is hidden at the beginning and no duplicates");
  I.dontSee("Main questions");
  I.dontSee("fox");
  I.dontSee("How to add info");

  I.say("accordion=false should open every panel independently");
  clickCollapse("FAQ");
  I.see("Main questions");
  I.dontSee("fox");
  clickCollapse("Labeling UI");
  I.see("Main questions");
  I.see("fox");

  I.say("acordion=true (default) should show one panel maximum");
  I.dontSee("You can use View");
  I.dontSee("You can use Image");
  clickCollapse("How to add info");
  I.see("You can use View");
  I.dontSee("You can use Image");
  clickCollapse("How to add images");
  I.dontSee("You can use View");
  I.see("You can use Image");
  clickCollapse("How to add images");
  I.dontSee("You can use View");
  I.dontSee("You can use Image");

  I.say("Check correct sizes of headers");
  I.seeElement(locate("h4").withText("Small header"));
  I.seeElement(locate("h2").withText("Usual header"));
  I.seeElement(locate(".tall").withChild("h4"));

  I.say("Styles should be applied by classname");
  const height = await I.grabElementBoundingRect(".tall", "height");

  assert(height >= 200, true);
});