<!-- <script src="https://gsvlabs-confluence-files.s3-us-west-2.amazonaws.com/js/esg/addJudgeScript.js"> </script> -->
<script>
/* 
ReadME: 
This script can be added to any page to add in an "Add/Remove/View" judge entity. Made to be paired with the event page from confiform macro. 
*/

// global variables for judge script 
let judges_parent_container_selector = "#hosts-details-container"; 
let modal_parent_container_selector = "body"; 
let insert_tab = false; 
let tab_container_selector = "";
let insert_stylesheets = ["https://gsvlabs-confluence-files.s3-us-west-2.amazonaws.com/stylesheets/ESG/addEventJudgeStyles.css"];
let arj_group_name = entryId + "-judges"

/* MODAL FUNCTIONS */
const closeArjModal = (identifier) => {
  // refresh form
  refreshArjForm(identifier)
  $(identifier).fadeOut();
}

// to do: disable button
const refreshArjForm = (identifier) => {
  // reset response
  $(identifier + " #arj-form-response-container").hide();
  $("#arj-successful-img").hide();
  $("#arj-form-response-text").text(" ");
  $("#arj-form-response-text").hide();
  $("#arj-form-response-btn").hide();
  // reset form
  $(identifier + " form")[0].reset();
  // disable button

  // show form
  $(identifier + " form").show();

}

// to do: add fall back for entry id disabled="disabled"
const getForm = (form_type, user_display_name, username) => {
  if(form_type === "add"){
   return `        <h2 class="form-title fullSite" id="form-title-addjudgeglobalfinalists">Add New Judge</h2>
            <form id="formaddeventjudge" class="add-user-form fullSite">
              <input type="text" id="user_first_name" name="user_first_name" placeholder="First Name" required="" class="add-user-input fullSite">
              <input type="text" id="user_last_name" name="user_last_name" placeholder="Last Name" required="" class="add-user-input fullSite">
              <input type="text" id="user_email" name="email" placeholder="Email" required="" class="add-user-input fullSite">
              <input type="hidden" name="groups" value="judge-users,${arj_group_name},event-judges" checked="" class="fullSite">
              <input type="hidden" name="addUserType" value="judge" checked="" class="fullSite">
              <input type="hidden" name="event_name" value="`+AJS.params.pageTitle+`" checked="" class="fullSite">
              <input type="submit" id="form_submit_addjudgeglobalfinalists" name="Submit" class="pressbtn add-form-submit add-user-submit fullSite" value="Add Event Judge" >
            </form>`
  } else {
   return `<h2 class="delete-text fullSite" id="remove-text-adminsremove">Are you sure you want to remove ${user_display_name}?</h2>
            <div class="remove-button-container fullSite">
              <button id="no-cancel-button-adminsremove" class="pressbtn modal-button fullSite" onclick="closeArjModal('#addremovejudge')" style="display: block;">No, Cancel</button>
              <form id="user_form_deactivate_adminsremove" class="fullSite" style="display: block;">
                <input class="hidden fullSite" value="${username}" type="text" id="remove_username_adminsremove" name="user_email" placeholder="Email" required="">
                <input type="hidden" id="remove_groups_adminsremove" name="groups" class="fullSite" value="${arj_group_name}">
                <input type="submit" class="pressbtn modal-button delete-submit-button fullSite" name="Submit" value="Yes, Delete">
              </form>
            </div>
    `
  }
}

const insertModal = () => {
  let modal_html = `
  <div id="addremovejudge" class="arj-modal-overlay" style="display: none;">
    <div class="arj-modal-content">
      <div class="arj-invitation">
        <span class="arj-closeModalBtn" onclick="closeArjModal('#addremovejudge')">X</span>
          <div id="modal-content-container"> </div>
          <div id="modal-waiting-container" style="display:none;"><div class="loader fullSite" id="modal-loader" style="margin: 65px auto;"> </div></div>
          <div id="arj-form-response-container" style="display:none" class="arj-form-response-container">
            <img id="arj-successful-img" class="arj-successful-img" style="display: none;" src="https://passport-media.s3-us-west-1.amazonaws.com/ESG/judgingdashboard/successful_invite-ESG.png">
            <p id="arj-form-response-text" style="display: none;" class="arj-form-response-text"> </p>
            <button id="arj-form-response-btn" style="display: none;" class="arj-pressbtn arj-modal-button arj-form-response-button" onclick="refreshArjForm('#addremovejudge')">Refresh Form</button>
        </div>
      </div>
    </div>
  </div>`
  return modal_html;
}

const openArjModal = (modal_type, user_display_name, username) => {
  let modal_form = getForm(modal_type, user_display_name, username);
  $("#modal-content-container").html(modal_form)
  $("#formaddeventjudge").submit(function(e){ console.log("in jquery submit"); e.preventDefault(); handleAddForm(); })
  // todo: add on input change toggle disable button
  $("#addremovejudge").show();
}


/* END MODAL FUNCTIONS */

/* CONTENT FUNCTIONS */
const insertARJHTML = () => {
  let arj_skeleton = `
    <div class="arj-container">
      <h2>Event Judges</h2>
      <div class="arj-button" onclick="openArjModal('add')">Add Judge</div>
      <div id="arj-judges">

      </div>
    </div>
  `;
  return arj_skeleton;
}

const generateARJJudgeHTML = (judge) => {
    let judge_html = "";
    var button_html =
      `<div class="fixed-button-container arj-fixed-button-container" onclick="openArjModal('remove', '`+judge.displayName+`', '`+judge.username+`')" data-remove_groups="${arj_group_name}" data-username="`+judge.username+`" data-displayname="`+judge.displayName+`">
        <img src="https://passport-media.s3-us-west-1.amazonaws.com/ESG/judgingdashboard/trash-ESG.png"/>
      </div>`;
    judge_html +=
    `<div class="judging-card-container arj-card">
        <div class="image-container arj-card-image-container">
        <a href="#">
          <p class="judging-card-subtitle arj-card-subtitle">`+ judge.displayName +`</p></a>` + button_html + `
        </div>
        
    </div>`
    return judge_html;
}

const getARJJudges = async () => {
  res = "";
  res = await jQuery.ajax({
    url: "/rest/api/group/"+arj_group_name+"/member?", 
    type: "get", 
    dataType: 'json', 
    async: true
  }).then(res => res);

  res = res.results;
  return res;
}

const insertARJJudges = async () => {
  let arj_judges_html = '';
  if(arj_group_name){
    // get judges in entry ID group
    let arj_judges_arr = await getARJJudges();
    console.log(arj_judges_arr)
    for(var i = 0; i < arj_judges_arr.length; i++){
      arj_judges_html += generateARJJudgeHTML(arj_judges_arr[i]); 
    }
  }
  return arj_judges_html;
}
/* END CONTENT FUNCTIONS */

/* FORM SUBMIT FUNCTIONS */ 
const addJudge = async (judge_info) => {
  // let judge_info_obj = {
  //     "fullname": "Fareeha Ahmed", "email" : "fareeha@gsvlabs.com", "event_name": "Delhi City Finals", "group" : ["judge-users"], "addUserType":"judge"
  //   }
  console.log("add judge initiated", judge_info)
  res = await jQuery.ajax({
    url: "/rest/scriptrunner/latest/custom/addEventJudge",
    headers: {
      "X-Atlassian-Token": "nocheck",
      "Content-type": "application/json",
    },
    type: "POST",
    dataType: "json",
    data: JSON.stringify(judge_info),
    async: true
    }).then(res => res);

  return res;
}

const removeJudge = async (judge_info) => {
  // let judge_info = {"username":"95far.eeha@gmail.com", "group" : ["b3d465e0-cc9b-4ee9-b83f-5aeb78493f3e-judges"]}
  console.log("remove judge initiated", judge_info)
  res = await jQuery.ajax({
    url: "/rest/scriptrunner/latest/custom/removeEventJudge",
    headers: {
      "X-Atlassian-Token": "nocheck",
      "Content-type": "application/json",
    },
    type: "POST",
    dataType: "json",
    data: JSON.stringify(judge_info),
    async: true
    }).then(res => res);

  return res;
}

const handleAddForm = async () => {
  console.log("handle add form called")
  // show loading indicator & hide form
  $("#formaddeventjudge").hide();
  $("#modal-waiting-container").show();
  // format data
  let formInputArr = $("#formaddeventjudge").serializeArray();
  let formInputObj = {};
  for(var i = 0; i < formInputArr.length; i++){
    obj_name = formInputArr[i].name;
    formInputObj[obj_name] = formInputArr[i].value; 
  }
  formInputObj.fullname = formInputObj["user_first_name"] + formInputObj["user_first_name"];
  formInputObj.group = formInputObj["groups"].split(",");
  console.log("right before adding", formInputObj)
  // run add
  await addJudge(formInputObj).then(async res => {
      console.log("returned", res)
      // hide loading indicator
      $("#modal-waiting-container").hide();
      // set response
      $("#arj-successful-img").show();
      $("#arj-form-response-text").text("Judge has been added successfully.");
      $("#arj-form-response-text").show();
      $("#arj-form-response-container").show();
      setTimeout(function(){ 
        closeArjModal('#addremovejudge');
      }, 1000);
      let arj_judges_html = await insertARJJudges();
      $("#arj-judges").html(arj_judges_html);

      // hide loading indicator, show message, close modal, refresh users
    }).catch(err => {
      console.log(err)
      $("#modal-waiting-container").hide();
      $("#arj-form-response-text").text("Oops, something went wrong.");
      $("#arj-form-response-text").show();
      $("#arj-form-response-container").show();
      $("#arj-form-response-btn").show();
    });
  return false;
}

const handleRemoveForm = async () => {
  console.log("handle remove form called")
  // show loading indicator & hide form
  $(".remove-button-container").hide();
  $("#modal-waiting-container").show();
  // format data
  let formInputArr = $("#user_form_deactivate_adminsremove").serializeArray();
  let formInputObj = {};
  for(var i = 0; i < formInputArr.length; i++){
    obj_name = formInputArr[i].name;
    formInputObj[obj_name] = formInputArr[i].value; 
  }
  formInputObj.group = formInputObj["groups"].split(",");
  console.log("right before removing", formInputObj)
  // run add
  await removeJudge(formInputObj).then(async res => {
      console.log("returned remove", res)
      // hide loading indicator
      $("#modal-waiting-container").hide();
      // set response
      $("#arj-successful-img").show();
      $("#arj-form-response-text").text("Judge has been removed successfully.");
      $("#arj-form-response-text").show();
      $("#arj-form-response-container").show();
      setTimeout(function(){ 
        closeArjModal('#addremovejudge');
      }, 1000);
      let arj_judges_html = await insertARJJudges();
      $("#arj-judges").html(arj_judges_html);

      // hide loading indicator, show message, close modal, refresh users
    }).catch(err => {
      console.log(err)
      $("#modal-waiting-container").hide();
      $("#arj-form-response-text").text("Oops, something went wrong.");
      $("#arj-form-response-text").show();
      $("#arj-form-response-container").show();
      setTimeout(function(){ 
        closeArjModal('#addremovejudge');
      }, 1000);
    });
  return false;
}

/* END FORM SUBMIT FUNCTIONS */



// insert stylesheets
$(window).load(() => {
  let insert_html = ""
  for(var i = 0; i < insert_stylesheets.length; i++){
    let curr_stylesheet = insert_stylesheets[i]
    insert_html += `<link type="text/css" rel="stylesheet" href="${curr_stylesheet}" />`
  } 
  $("head").append(insert_html);
})


async function startJudgeScript(){
  // create and insert modal which will hold the add and remove forms 
  let modal_html  = insertModal();
  let arj_html = insertARJHTML();
  let arj_judges_html = await insertARJJudges();
  $(judges_parent_container_selector).append(arj_html);
  $("#arj-judges").html(arj_judges_html);
  $(modal_parent_container_selector).append(modal_html);
}

document.addEventListener("load", startJudgeScript(), false);

// $(document).ready(function() { 
//   // create and insert modal which will hold the add and remove forms 
//   let modal_html  = insertModal();
//   let arj_html = insertARJHTML();
//   let arj_judges_html = await insertARJJudges();
//   $(judges_parent_container_selector).append(arj_html);
//   $("#arj-judges").append(arj_judges_html);
//   $(modal_parent_container_selector).append(modal_html);
// });

</script>