<!-- <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"
 let arj_group_name = "confluence-administrators"

/* MODAL FUNCTIONS */
const closeArjModal = (identifier) => {
  $(identifier).hide();
}

// to do: add fall back for entry id
const getForm = (form_type) => {
  if(form_type === "add"){
   return `        <h2 class="form-title fullSite" id="form-title-addjudgeglobalfinalists">Add New Judge</h2>
            <form id="formaddjudgeglobalfinalists" 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="user_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="submit" id="form_submit_addjudgeglobalfinalists" name="Submit" class="pressbtn add-form-submit add-user-submit fullSite" value="Add Event Judge" disabled="disabled">
            </form>
    `
  } else {
   return `        <h2 class="form-title fullSite" id="form-title-addjudgeglobalfinalists">Add New Judge</h2>
            <form id="formaddjudgeglobalfinalists" 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="user_email" placeholder="Email" required="" class="add-user-input fullSite">
              <input type="hidden" name="groups" value="" 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" disabled="disabled">
            </form>
    `
  }
}

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="arj-form-response-container" 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/EWC/judgingdashboard/successful_invite.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">Refresh Form</button>
        </div>
      </div>
    </div>
  </div>`
  return modal_html;
}

const openArjModal = (modal_type) => {
  let modal_form = getForm(modal_type);
  $("#modal-content-container").html(modal_form)
  $("#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) => {

    var button_html = "$paramButton" == "true" ? 
      `<div class="fixed-button-container arj-fixed-button-container" onclick="openArjModal('remove')" 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/EWC/judgingdashboard/remove.png"/>
      </div>`
        : "";
    setHTML +=
    `<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>`

}

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
    arj_judges_arr = await getARJJudges();
    for(var i = 0; i < arj_judges_arr; i++){
      arj_judges_html += generateARJJudgeHTML(arj_judges_arr[i]); 
    }
  }
  return arj_judges_html;
}
/* END CONTENT 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);
})

$(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>