import { jest } from "@jest/globals";
import jsPsych from "jspsych";

import freeSort from ".";

jest.useFakeTimers();

describe("free-sort plugin", function () {
  test("should display stimuli", function () {
    var trial = {
      type: freeSort,
      stimuli: [
        "img/happy_face_1.jpg",
        "img/happy_face_2.jpg",
        "img/happy_face_3.jpg",
        "img/happy_face_4.jpg",
      ],
    };

    jsPsych.init({
      timeline: [trial],
    });

    expect(jsPsych.getDisplayElement().innerHTML).toMatch(
      new RegExp('src="img/happy_face_1.jpg" data-src="img/happy_face_1.jpg"')
    );
    expect(jsPsych.getDisplayElement().innerHTML).toMatch(
      new RegExp('src="img/happy_face_2.jpg" data-src="img/happy_face_2.jpg"')
    );
    expect(jsPsych.getDisplayElement().innerHTML).toMatch(
      new RegExp('src="img/happy_face_3.jpg" data-src="img/happy_face_3.jpg"')
    );
    expect(jsPsych.getDisplayElement().innerHTML).toMatch(
      new RegExp('src="img/happy_face_4.jpg" data-src="img/happy_face_4.jpg"')
    );
  });

  test("should be able to adjust the height and width of free-sort area", function () {
    var trial = {
      type: freeSort,
      stimuli: [
        "img/happy_face_1.jpg",
        "img/happy_face_2.jpg",
        "img/happy_face_3.jpg",
        "img/happy_face_4.jpg",
      ],
      sort_area_height: 500,
      sort_area_width: 700,
    };

    jsPsych.init({
      timeline: [trial],
    });

    expect(jsPsych.getDisplayElement().innerHTML).toMatch(
      new RegExp(
        'class="jspsych-free-sort-arena" style="position: relative; width:700px; height:500px;'
      )
    );
  });

  test("should be able to adjust the height and width of stimuli", function () {
    var trial = {
      type: freeSort,
      stimuli: [
        "img/happy_face_1.jpg",
        "img/happy_face_2.jpg",
        "img/happy_face_3.jpg",
        "img/happy_face_4.jpg",
      ],
      stim_height: 200,
      stim_width: 200,
    };

    jsPsych.init({
      timeline: [trial],
    });

    expect(jsPsych.getDisplayElement().innerHTML).toMatch(
      new RegExp('<img src="img/happy_face_1.jpg".+width:200px; height:200px')
    );
  });

  test("should display prompt", function () {
    var trial = {
      type: freeSort,
      stimuli: [
        "img/happy_face_1.jpg",
        "img/happy_face_2.jpg",
        "img/happy_face_3.jpg",
        "img/happy_face_4.jpg",
      ],
      prompt: "<p>This is a prompt</p>",
    };

    jsPsych.init({
      timeline: [trial],
    });

    expect(jsPsych.getDisplayElement().innerHTML).toMatch(new RegExp("<p>This is a prompt</p>"));
  });

  test('should display prompt at bottom if prompt_location is "below"', function () {
    var trial = {
      type: freeSort,
      stimuli: [
        "img/happy_face_1.jpg",
        "img/happy_face_2.jpg",
        "img/happy_face_3.jpg",
        "img/happy_face_4.jpg",
      ],
      prompt: "<p>This is a prompt</p>",
      prompt_location: "below",
    };

    jsPsych.init({
      timeline: [trial],
    });

    expect(jsPsych.getDisplayElement().innerHTML).toMatch(
      new RegExp('<p>This is a prompt</p>.+<button id="jspsych-free-sort-done-btn"')
    );
  });

  test("should be able to change label of button", function () {
    var trial = {
      type: freeSort,
      stimuli: [
        "img/happy_face_1.jpg",
        "img/happy_face_2.jpg",
        "img/happy_face_3.jpg",
        "img/happy_face_4.jpg",
      ],
      button_label: "Finito",
    };

    jsPsych.init({
      timeline: [trial],
    });

    expect(jsPsych.getDisplayElement().innerHTML).toMatch(
      new RegExp('<button id="jspsych-free-sort-done-btn" class="jspsych-btn".+>Finito</button>')
    );
  });
});
