import { clickTarget, simulateTimeline, startTimeline } from "@jspsych/test-utils";

import imageButtonResponse from ".";

jest.useFakeTimers();

describe("image-button-response", () => {
  test("displays image stimulus", async () => {
    const { getHTML } = await startTimeline([
      {
        type: imageButtonResponse,
        stimulus: "../media/blue.png",
        choices: ["button-choice"],
        render_on_canvas: false,
      },
    ]);

    expect(getHTML()).toContain('<img src="../media/blue.png"');
  });

  test("display button labels", async () => {
    const { getHTML } = await startTimeline([
      {
        type: imageButtonResponse,
        stimulus: "../media/blue.png",
        choices: ["button-choice1", "button-choice2"],
        render_on_canvas: false,
      },
    ]);

    expect(getHTML()).toContain('<button class="jspsych-btn">button-choice1</button>');
    expect(getHTML()).toContain('<button class="jspsych-btn">button-choice2</button>');
  });

  test("display button html", async () => {
    const { getHTML } = await startTimeline([
      {
        type: imageButtonResponse,
        stimulus: "../media/blue.png",
        choices: ["buttonChoice"],
        button_html: '<button class="jspsych-custom-button">%choice%</button>',
        render_on_canvas: false,
      },
    ]);

    expect(getHTML()).toContain('<button class="jspsych-custom-button">buttonChoice</button>');
  });

  test("display should clear after button click", async () => {
    const { getHTML, expectFinished } = await startTimeline([
      {
        type: imageButtonResponse,
        stimulus: "../media/blue.png",
        choices: ["button-choice"],
        render_on_canvas: false,
      },
    ]);

    expect(getHTML()).toContain(
      '<img src="../media/blue.png" id="jspsych-image-button-response-stimulus"'
    );

    clickTarget(document.querySelector("#jspsych-image-button-response-button-0"));
    await expectFinished();
  });

  test("prompt should append below button", async () => {
    const { getHTML } = await startTimeline([
      {
        type: imageButtonResponse,
        stimulus: "../media/blue.png",
        choices: ["button-choice"],
        prompt: "<p>This is a prompt</p>",
        render_on_canvas: false,
      },
    ]);

    expect(getHTML()).toContain(
      '<button class="jspsych-btn">button-choice</button></div></div><p>This is a prompt</p>'
    );
  });

  test("should hide stimulus if stimulus-duration is set", async () => {
    const { getHTML, displayElement } = await startTimeline([
      {
        type: imageButtonResponse,
        stimulus: "../media/blue.png",
        choices: ["button-choice"],
        stimulus_duration: 500,
        render_on_canvas: false,
      },
    ]);

    const stimulusElement = displayElement.querySelector<HTMLElement>(
      "#jspsych-image-button-response-stimulus"
    );
    expect(stimulusElement.style.visibility).toContain("");
    jest.advanceTimersByTime(500);
    expect(stimulusElement.style.visibility).toContain("hidden");
  });

  test("should end trial when trial duration is reached", async () => {
    const { getHTML, expectFinished } = await startTimeline([
      {
        type: imageButtonResponse,
        stimulus: "../media/blue.png",
        choices: ["f", "j"],
        trial_duration: 500,
        render_on_canvas: false,
      },
    ]);

    expect(getHTML()).toContain(
      '<img src="../media/blue.png" id="jspsych-image-button-response-stimulus"'
    );
    jest.advanceTimersByTime(500);
    await expectFinished();
  });

  test("should end trial when button is clicked", async () => {
    const { getHTML, expectFinished } = await startTimeline([
      {
        type: imageButtonResponse,
        stimulus: "../media/blue.png",
        choices: ["button-choice"],
        response_ends_trial: true,
        render_on_canvas: false,
      },
    ]);

    expect(getHTML()).toContain(
      '<img src="../media/blue.png" id="jspsych-image-button-response-stimulus"'
    );

    clickTarget(document.querySelector("#jspsych-image-button-response-button-0"));
    await expectFinished();
  });

  test("should show console warning when trial duration is null and response ends trial is false", async () => {
    const spy = jest.spyOn(console, "warn").mockImplementation(() => {});

    await startTimeline([
      {
        type: imageButtonResponse,
        stimulus: "../media/blue.png",
        choices: ["button-choice"],
        response_ends_trial: false,
        trial_duration: null,
        render_on_canvas: false,
      },
    ]);

    expect(spy).toHaveBeenCalled();
    spy.mockRestore();
  });
});

describe("image-button-response simulation", () => {
  test("data mode works", async () => {
    const timeline = [
      {
        type: imageButtonResponse,
        stimulus: "foo.png",
        choices: ["a", "b", "c"],
        render_on_canvas: false,
      },
    ];

    const { expectFinished, getData } = await simulateTimeline(timeline);

    await expectFinished();

    const response = getData().values()[0].response;

    expect(getData().values()[0].rt).toBeGreaterThan(0);
    expect(response).toBeGreaterThanOrEqual(0);
    expect(response).toBeLessThanOrEqual(2);
  });

  test("visual mode works", async () => {
    const timeline = [
      {
        type: imageButtonResponse,
        stimulus: "foo.png",
        choices: ["a", "b", "c"],
        render_on_canvas: false,
      },
    ];

    const { expectFinished, expectRunning, getHTML, getData } = await simulateTimeline(
      timeline,
      "visual"
    );

    await expectRunning();

    jest.runAllTimers();

    await expectFinished();

    const response = getData().values()[0].response;

    expect(getData().values()[0].rt).toBeGreaterThan(0);
    expect(response).toBeGreaterThanOrEqual(0);
    expect(response).toBeLessThanOrEqual(2);
  });
});