import { ParameterType } from 'jspsych';
import { html } from './text-stimuli';
import getColourMap from './colours';

const info = {
  name: 'object-moving',
  version: "1.1",
  parameters: {
    selector: {
      type: ParameterType.STRING,
      pretty_name: 'Selector',
    },
    together_side: {
      type: ParameterType.STRING,
      pretty_name: 'together side',
    },
    location: {
      type: ParameterType.INT,
      pretty_name: 'Location',
    },
    together_colour: {
      type: ParameterType.STRING,
      pretty_name: 'Together colour',
    },
  },
  // prettier-ignore
  citations: '__CITATIONS__'
};

class jsPsychObjectMoving {
  constructor(jsPsych) {
    this.jsPsych = jsPsych;
  }
  static {
    this.info = info;
  }

  trial(display_element, trial) {

    const colourMap = getColourMap(trial.together_colour);

    const left_goal = trial.together_side === 'left' ? 'together' : 'alone';
    const right_goal = trial.together_side === 'left' ? 'alone' : 'together';

    const left_colour = trial.together_side === 'left' ? colourMap.get('togetherbg') : colourMap.get('alonebg');
    const right_colour = trial.together_side === 'left' ? colourMap.get('alonebg') : colourMap.get('togetherbg');

    display_element.innerHTML = html`
    <div class="flex flex-row min-w-screen absolute top-0 left-0 min-h-screen">
      <div id="${left_goal}-goal" class="w-1/12 ${left_colour}"></div>
      <div id="workspace" class="w-10/12"></div>
      <div id="${right_goal}-goal" class="w-1/12 ${right_colour}"></div>
      <div id="info-box" class="z-10 absolute bottom-1/40 min-w-screen justify-center items-center"></div>
    </div>
    `;

    const workspace = document.getElementById('workspace');
    const info_box = document.getElementById('info-box');
    const workspace_width = workspace.clientWidth;
    const viewport_width = window.visualViewport.width;
    const goal_offset = viewport_width * (1/12);
    const box_width = viewport_width * (3/100);
    const workspace_offset = workspace_width * trial.location/100;

    const offset_left = workspace_offset + goal_offset - box_width/2;

    const viewport_height = window.visualViewport.height;
    const top_offset = viewport_height * .5;
    const separation = box_width * 1.5;

    const objects = html`
    <div id="object-partner" class="object-moving-box ${colourMap.get('object-disabled')} absolute z-10" style="left: ${offset_left}px; top: ${top_offset - separation}px"></div>
    <div id="object-participant" class="object-moving-box ${colourMap.get('object-disabled')} absolute z-10" style="left: ${offset_left}px; top: ${top_offset + separation}px"></div>
    `;

    workspace.innerHTML = objects;

    const object_partner = document.getElementById('object-partner');
    const object_participant = document.getElementById('object-participant');

    object_partner.addEventListener('click', () => issue_alert('partner_click'));
    object_participant.addEventListener('click', () => issue_alert('early_click_choice'));

    const partner_turn = html`<span class="font-semi-bold text-gray-800 text-xl">Awaiting your partner's selection</span>
    <div class='loading'></div>`

    let choice;
    let go_clicked = false;
    let partner_finished = false;
    let participant_finished = false;
    let partner_choice_made = false;

    const jsPsych = this.jsPsych;

    let start_time = 0;
    let response_time = 0;

    if (trial.selector === 'participant') {
      display_choices();

    } else {
      info_box.innerHTML = partner_turn;

      const partner_choice_delay = jsPsych.randomization.sampleExGaussian(2000, 250, 1/100, true);

      let random = Math.random();


      //These probabilities are based on Azaad and Sebanz (2025)
      
      if (trial.location > 48 && trial.location < 52) {
        choice = random < 0.64 ? 'together' : 'alone';
      } else if (trial.location > 31 && trial.location < 35) {
        choice = random < 0.58 ? 'together' : 'alone';
      } else if (trial.location > 64 && trial.location < 68) {
        choice = random < 0.67 ? 'together' : 'alone';
      }

      setTimeout(() => {
        info_box.innerHTML = '';
        clear_boxes();
        display_go();
        initiate_partner_action();
      }, partner_choice_delay);
    }

    function display_choices(){
      info_box.innerHTML = html`<div class="flex flex-row justify-center items-center gap-2">
      <div id="${left_goal}-button" class="w-1/12 py-1 text-slate-50 ${left_colour}">${left_goal.charAt(0).toUpperCase() + left_goal.slice(1)}</div>
      <div id="${right_goal}-button" class="w-1/12 py-1 text-slate-50 ${right_colour}">${right_goal.charAt(0).toUpperCase() + right_goal.slice(1)}</div>
      </div>`;

      const left_goal_button = document.getElementById(`${left_goal}-button`);
      const right_goal_button = document.getElementById(`${right_goal}-button`);

      start_time = Date.now();

      left_goal_button.addEventListener('click', () => {
        choice = left_goal;
        handle_choice_made(left_goal_button,right_goal_button);
      });

      right_goal_button.addEventListener('click', () => {
        choice = right_goal;
        handle_choice_made(left_goal_button,right_goal_button);
      });
    }

    function handle_choice_made(left_goal_button,right_goal_button){
      left_goal_button.removeEventListener('click', handle_choice_made);
      right_goal_button.removeEventListener('click', handle_choice_made);
      left_goal_button.remove();
      right_goal_button.remove();
      clear_boxes();
      display_go();
      response_time = Date.now() - start_time;
      if (choice === 'together') {
        initiate_partner_action();
      }
    }

    function initiate_partner_action(){
      const go_delay = trial.selector === 'participant' ? 1400 : 1000
      const partner_go_delay = jsPsych.randomization.sampleExGaussian(go_delay, 500, 1/100, true);
      const partner_teleport_delay = jsPsych.randomization.sampleExGaussian(1400, 300, 1/100, true);
      
      setTimeout(() => {
        change_object_colour(object_partner);
        partner_choice_made = true;
      }, partner_go_delay);

      setTimeout(() => {
        teleport_object(object_partner);
        partner_finished = true;
        check_finished();
      }, partner_teleport_delay + partner_go_delay);
    }

    function clear_boxes() {
      if (choice === 'together') {
        return;
      }
      if (trial.selector === 'participant') {
        object_partner.remove();
      } else {
        object_participant.remove();
      }
    }

    let go_button;

    function display_go() {
      if (choice === 'alone' && trial.selector === 'partner') {
        return;
      }
      info_box.innerHTML = html`<div id="go-button" class="mx-auto font-semi-bold ${colourMap.get('gobg')} text-slate-50 text-xl w-1/20 p-2">Go</div>`;
      go_button = document.getElementById('go-button');
      object_participant.addEventListener('click', () => issue_alert('early_click_go'));
      go_button.addEventListener('click', () => handle_go_click(go_button));
    }
    
    function handle_go_click() {
      go_button.removeEventListener('click', handle_go_click);
      go_button.removeEventListener('click', () => issue_alert('early_click_go'));
      go_clicked = true;
      go_button.remove();
      change_object_colour(object_participant);
      object_participant.addEventListener('click', () => handle_teleport_click());

    }

    function handle_teleport_click(){
      teleport_object(object_participant);
      participant_finished = true;
      check_finished();
    }


  function change_object_colour(object){
    object.classList.remove(colourMap.get('object-disabled'));
    object.classList.add(colourMap.get('object-enabled'));
  }

  function teleport_object(object){
      let goal_side = 'left';
      if (choice === 'together' && trial.together_side === 'right') {
        goal_side = 'right';
      }
      if (choice === 'alone' && trial.together_side === 'left') {
        goal_side = 'right';
      }
      const mid_goal_offset = viewport_width * (1/24);
      const new_left_offset = goal_side === 'left' ? mid_goal_offset - box_width/2 : viewport_width - mid_goal_offset - box_width/2;
      object.style.transition = 'left 0.35s';  
      object.style.left = `${new_left_offset}px`;
  }

    function check_finished(){
      let finished = false;
      if (choice === 'together') {
        if (partner_finished && participant_finished) {
            finished = true;
          }
        }
        if (choice === 'alone') {
          if (partner_finished || participant_finished) {
            finished = true;
        }
      }
      if (finished) {
        object_partner.removeEventListener('click', () => issue_alert('partner_click'));
        object_participant.removeEventListener('click', () => issue_alert('early_click_choice'));

        const save_data = {
          choice: choice,
          selector: trial.selector,
          together_side: trial.together_side,
          response_time: response_time,
        }
        

        setTimeout(() => {
          jsPsych.finishTrial(save_data);
        }, 500);
      }
    }

    async function show_alert(message) {
      const dialog = document.createElement("dialog");
      document.body.appendChild(dialog);
      dialog.className = "z-20 fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 p-4 bg-slate-100 text-red-700 rounded-lg shadow-lg";
      dialog.innerText = message;
      dialog.show();
      setTimeout(function () {
        dialog.close();
      }, 2000);
    }

    function issue_alert(issue){
      if (issue === 'partner_click'){
        show_alert(`That is your partner's object. Please click the lower object.`)
      }
      if (issue === 'early_click_go' && !go_clicked){
        show_alert(`You need to click 'Go' before clicking your object.`)
      }
      if (issue === 'early_click_choice'){
        if (!partner_choice_made && trial.selector === 'partner'){
          show_alert(`Please wait for your partner to make a choice.`)
        }
        if (!choice && trial.selector === 'participant'){
          show_alert(`Please make a choice using the buttons below before clicking your object.`)
        }
      }
    }

  }
}

export default jsPsychObjectMoving;