import getColourMap from './colours.js';

// Define image URLs
const blueImages = {
  instructions_1: '/images/blue/instructions_1.png',
  instructions_2: '/images/blue/instructions_2.png',
  instructions_3: '/images/blue/instructions_3.png',
  instructions_4: '/images/blue/instructions_4.png',
};

const redImages = {
  instructions_1: '/images/red/instructions_1.png',
  instructions_2: '/images/red/instructions_2.png',
  instructions_3: '/images/red/instructions_3.png',
  instructions_4: '/images/red/instructions_4.png',
};

const html = (strings, ...values) =>
  strings
    .reduce((result, str, i) => result + str + (values[i] || ''), '')
    .trim();

function getStimulusMap(together_colour) {
  const colourMap = getColourMap(together_colour);

  const stimulusMap = new Map();

  // Select the appropriate image map based on the color
  const imageMap = together_colour === 'blue' ? blueImages : redImages;

  stimulusMap.set(
    'pre_consent_info',
    html`
      <p class="leading-relaxed">
        This experiment will need some browser permissions. Please ensure that,
        when prompted, you allow the experiment to run in fullscreen and that
        you allow yourself to be redirected to Prolific after the experiment is
        complete.
      </p>
      <p class="mt-6">
        Press
        <strong>SPACE</strong>
        to continue.
      </p>
    `
  );

  stimulusMap.set(
    'consent',
    html`
      <div class="text-left leading-relaxed">
        <h1 class="text-2xl font-bold mt-4">
          General Participant Information and Consent
        </h1>
        <h2 class="text-xl font-bold mt-2">
          Title of the study: Decision-making with Others
        </h2>
        <p class="font-semibold mt-2">1. Description of the research project</p>
        Welcome to our study on Decision-making with Others. We are
        investigating how people choose courses of action when working with
        others. The experiment will take less than 20 minutes, with short pauses
        in between. However, since this is a multi-participant study, we ask
        that you complete the task fully without taking additional breaks. If
        you have any further questions, please contact the investigator.
        <p class="font-semibold mt-2">
          2. Voluntary participation and anonymity
        </p>
        Participation in the study is voluntary. You can withdraw your consent
        to participate in this study at any time and without giving reasons and
        without suffering any disadvantages. Even if you terminate the study
        early, you are entitled to compensation for your time up to that point.
        <p class="font-semibold mt-2">3. Compensation</p>
        For participating in the study, you will receive the rate indicated on
        the Prolific.com page for this study. The fee will be paid through the
        Prolific platform.
        <p class="font-semibold mt-2">
          4. Scope of data collection and processing
        </p>
        We will save your responses and judgements to the questions and stimuli
        presented in this study. We will also collect information about your
        response times. We also ask for your gender, age, and thoughts about the
        study following completion. These data will be de-identified, so that
        your responses are not saved in a way that one could identify you from
        your responses (or which responses are yours). The results and data of
        this study will be published as a scientific publication. This will be
        done in an anonymized form, i.e. without the data being assigned to a
        specific person. The completely anonymized data of this study will be
        made available as open data in a secure, internet-based data archive
        (osf.io). This study thus follows the recommendations of the German
        Research Foundation (DFG) and the German Society for Psychology (DGPs)
        for quality assurance in research.
        <p class="font-semibold mt-2">5. Legal basis</p>
        The legal basis for processing the personal data mentioned is the
        consent in accordance with Art. 6 (1) letter a EU GDPR.
        <p class="font-semibold mt-2">6. Revocation</p>
        You have the right to revoke your consent to data protection at any
        time. The revocation of your consent does not affect the legality of the
        processing carried out on the basis of your consent until the
        revocation. (Revocation with effect for the future). Address your
        revocation to the person responsible. You will not suffer any
        disadvantages as a result of the revocation
        <p class="font-semibold mt-2">
          7. Name and Address of the person responsible
        </p>
        The controller within the meaning of the EU General Data Protection
        Regulation (GDPR) and other national data protection laws of the member
        states, as well as other data protection regulations is the Westfälische
        Wilhelms-Universität Münster (WWU), represented by the Rector, Prof. Dr.
        Johannes Wessels, Schlossplatz 2, 48149 MünsterTel.: + 49 251
        83-0E-Mail: verwaltung@uni-muenster.de
        <p class="font-semibold mt-2">
          8. Contact details of the data protection officer
        </p>
        The data protection officer of the WWU Münster is: Nina Meyer-Pachur
        Schlossplatz 2, 48149 Münster Tel.: + 49 251 83-22446 E-Mail:
        datenschutz@uni-muenster.de
        <p class="font-semibold mt-2">
          9. Reference to the rights of those affected
        </p>
        <p class="leading-relaxed">
          According to the General Data Protection Regulation, you basically
          have the right to: information (Article 15 GDPR), objection (Article
          21 GDPR), data portability (Article 20 GDPR), erasure (Article 17
          GDPR), restriction of processing (Article 18 GDPR), rectification
          (Article 16 GDPR). If you would like to exercise one of these rights,
          please contact one of the contact persons mentioned. You also have the
          right to lodge a complaint with the supervisory authority: State
          Commissioner for Data Protection and Freedom of Information North
          Rhine-Westphalia Helga Block Kavalleriestraße 2-440213
          DüsseldorfTelephone: 02 11/384 24-0E-Mail: poststelle@ldi.nrw.de
          Homepage: http://www.ldi.nrw.de
        </p>

        <p class="font-semibold mt-2">
          10. Consent to the collection and processing of personal data
        </p>
        By clicking continue, I hereby voluntarily consent to the collection and
        processing of my personal data as part of the research project
        ‘Decision-making with others’. I have read the data protection
        declaration for the project in question, have been adequately informed
        and have had the opportunity to ask questions. I have been informed of
        the consequences of revoking my consent under data protection law at any
        time. I have been informed that my revocation of my consent does not
        affect the legality of the processing carried out on the basis of the
        consent up to the time of revocation.
      </div>
    `
  );

  stimulusMap.set(
    'no_consent',
    html`
        <p class="leading-relaxed mt-6">
          You are being redirected to Prolific. If you are not redirected within 10 seconds, please paste the following link into your browser:
          <span class="text-blue-500">
            ${import.meta.env.VITE_NO_CONSENT_URL}
          </a>
        </p>
    `
  );

  stimulusMap.set(
    'multi_user_instructions',
    html`
      <p class="leading-relaxed">
        In this experiment, you will connect and work with a partner.
      </p>
      <p class="leading-relaxed">
        It is
        <i>critical</i>
        that you only continue if you are able to complete the entire experiment
        without interruption and with a stable internet connection.
      </p>
      <p class="leading-relaxed mt-6">
        Press
        <strong>SPACE</strong>
        once you are ready to be paired with a partner.
      </p>
    `
  );

  stimulusMap.set(
    'instructions_1',
    html`
      <p class="leading-relaxed">
        In this study, you will work with your partner to complete a task
        involving moving objects to one of two goals.
      </p>
      <p class="leading-relaxed mt-2">
        In each round, one of you will be assigned the role of the
        <strong>Selector.</strong>
        The Selector will choose to which goal the object(s) will be moved.
      </p>
      <img
        class="w-6/12 mx-auto my-8 border-3 border-gray-500 rounded-md"
        src="${imageMap.instructions_1}"
        alt="instructions_1"
      />
      <p class="leading-relaxed mt-6">
        Press
        <strong>SPACE</strong>
        to continue.
      </p>
    `
  );

  stimulusMap.set(
    'instructions_2',
    // prettier-ignore
    html`
    <p class="leading-relaxed">
      One of the goals (labelled
      <span class="font-semibold ${colourMap.get('together')}">
        Together</span>)
      will require both of you to move an object each. The other goal
      (labelled
      <span class="font-semibold ${colourMap.get('alone')}">
        Alone</span>)
      will
      <i>only</i>
      require the Selector to move an object.
    </p>
    <p class="leading-relaxed mt-2">
      When you are the Selector, you will see two buttons at the bottom of your
      screen. The buttons colours correspond to the colour of the goal location
      (e.g., red button for the red goal).
    </p>
    <img
      class="w-6/12 mx-auto my-8 border-3 border-gray-500 rounded-md"
      src="${imageMap.instructions_2}"
      alt="instructions_2"
    />
    <p class="leading-relaxed mt-6">
      Press
      <strong>SPACE</strong>
      to continue.
    </p>
  `
  );

  stimulusMap.set(
    'instructions_3',
    html`
      <p class="leading-relaxed">
        If you are not the Selector, you will need to wait until your partner
        makes a decision.
      </p>
      <p class="leading-relaxed mt-2">
        Once a decision is made, you will first need to click the
        <span class="${colourMap.get('go')} font-semibold">Go</span>
        button to make your object movable. Then, once you click an object, it
        will teleport to the goal location.
      </p>
      <img
        class="w-6/12 mx-auto my-8 border-3 border-gray-500 rounded-md"
        src="${imageMap.instructions_3}"
        alt="instructions_3"
      />
      <p class="leading-relaxed mt-6">
        Press
        <strong>SPACE</strong>
        to continue.
      </p>
    `
  );

  stimulusMap.set(
    'instructions_4',
    html`
      <p class="leading-relaxed">
        If the Selector chooses the
        <span class="font-semibold ${colourMap.get('alone')}">Alone</span>
        goal, one object will disappear, and the Selector will move the
        remaining object.
      </p>
      <p class="leading-relaxed mt-2">
        Otherwise, if the Selector chooses
        <span class="font-semibold ${colourMap.get('together')}">
          Together
        </span>
        , each of you will need to click an object - only click the object that
        is lower on your screen. The other is for your partner.
      </p>
      <img
        class="w-6/12 mx-auto my-8 border-3 border-gray-500 rounded-md"
        src="${imageMap.instructions_4}"
        alt="instructions_4"
      />
      <p class="leading-relaxed mt-6">
        Press
        <strong>SPACE</strong>
        to continue.
      </p>
    `
  );

  stimulusMap.set(
    'pre_practice_instructions',
    html`
      <p class="leading-relaxed">
        You will now complete a short practice task with your partner.
      </p>
      <p class="leading-relaxed mt-6">
        Press
        <strong>SPACE</strong>
        to continue.
      </p>
    `
  );

  stimulusMap.set(
    'pre_task_instructions',
    html`
      <p class="leading-relaxed">
        Practice complete. You will now complete the main task. This will take
        around five minutes.
      </p>
      <p class="leading-relaxed">
        Press
        <strong>SPACE</strong>
        to continue.
      </p>
    `
  );

  stimulusMap.set(
    'debrief',
    html`
      <div class="text-left leading-relaxed">
        <h1 class="text-2xl font-bold">Debriefing statement</h1>
        <h2 class="text-xl font-bold mt-2">
          Title of the study: Decision-making with others
        </h2>
        <p class="mt-2">
          Thank you for participating in our study. In this study, we seek to
          investigate 1) to what extent online participants suspect that their
          interaction partners are not real people and 2) how and when they
          report such suspicions.
        </p>
        <p class="mt-2">
          To this end, we created the appearance of additional participants in
          the experiment – in reality, you performed the task alone. The results
          of our study will lend insight into the mechanisms by which we form a
          shared understanding of the world around us.
        </p>
        <p class="mt-2">
          Should you have any additional questions, you may contact Dr Shaheed
          Azaad at sazaad@uni-muenster.de.
        </p>
        <p class="mt-6">
          Press
          <strong>SPACE</strong>
          to return to Prolific.
        </p>
      </div>
    `
  );

  stimulusMap.set(
    'complete',
    html`You are being redirected to Prolific. If you are not redirected within 10 seconds, please paste the following link into your browser:
          <span class="text-blue-500">
            ${import.meta.env.VITE_COMPLETE_URL}
          </a>
    `
  );
  return stimulusMap;
}

export { getStimulusMap, html };