const TypeIdToName = {
    1: "SARC",
    2: "Chaplain",
    3: "Legal",
    4: "Medical",
    5: "Civilian",
    6: "Military Police"
};

const TypeOrder = [
    "SARC",
    "Civilian",
    "Chaplain",
    "Legal",
    "Medical",
    "Military Police"
];

const resultsPerCategory = 5;

const eventListenersAttached = {};
const eventListeners = {}; // Initialize eventListeners object


function searchResponders(inputQuery, servicesQuery, sourcesQuery){
  
  const startEndValues = {};

  var jsonPath = `https://api-search-responders-drupal.safehelpline.org/search?search=${inputQuery}&services=${servicesQuery}&source_of_help=${sourcesQuery}`;
  
  if(servicesQuery === '' && sourcesQuery === ''){
    jsonPath = `https://api-search-responders-drupal.safehelpline.org/search?search=${inputQuery}`;
  }
  else if(servicesQuery != '' && sourcesQuery === ''){
    jsonPath = `https://api-search-responders-drupal.safehelpline.org/search?search=${inputQuery}&services=${servicesQuery}`;
  }
  else if(servicesQuery === '' && sourcesQuery != ''){
    jsonPath = `https://api-search-responders-drupal.safehelpline.org/search?search=${inputQuery}&source_of_help=${sourcesQuery}`;
  }

  let start = resultsPerCategory;
  let end = start + resultsPerCategory;
 
  fetch(jsonPath)
  .then ((response) => {
    console.log ( " We got a response , but the body is not ready yet " ) ;
    console.log ( response ) ;
    return response.json ( ) ;
  })
  .then ( (jsonData ) => {
    console.log ( " We got our data " ) ;
    console.log ( jsonData ) ;

    const services = jsonData.results;
    

    var SARCTable = document.getElementById("SARCTable");
    var civilianTable = document.getElementById("civilianTable");
    var chaplainTable = document.getElementById("chaplainTable");
    var legalTable = document.getElementById("legalTable");
    var medicalTable = document.getElementById("medicalTable");
    var militaryTable = document.getElementById("militaryTable");

    for (const category in eventListeners) {
      const showMoreButton = document.getElementById(`showMore${category}`);
      showMoreButton.removeEventListener("click", eventListeners[category]);
      eventListenersAttached[category] = false; // Reset the attached status
    }


    //Sort Data by SARCType
    TypeOrder.map(category => {
        const filteredServices = services.filter((service) => TypeIdToName[service.SARCType] === category);

        // display Show more buttons once search is initiated
        const showMoreButton = document.getElementById(`showMore${category}`);
        
        if (!startEndValues[category]) {
          startEndValues[category] = { start: resultsPerCategory, end: resultsPerCategory * 2 };
        }

        if (eventListeners[category]) {
          showMoreButton.removeEventListener("click", eventListeners[category]);
        }

        const eventListener = () => {
          const { start, end } = startEndValues[category];

          updateTable(start, end);

          startEndValues[category] = { start: end, end: end + resultsPerCategory };

          if (end >= filteredServices.length) {
              showMoreButton.style.display = "none";
          }
      };

      if (!eventListenersAttached[category]) {
        showMoreButton.style.display = 'block';

        showMoreButton.addEventListener("click", eventListener);
        eventListeners[category] = eventListener; // Store the new event listener
        eventListenersAttached[category] = true;
      }

      if(start >= filteredServices.length){
        showMoreButton.style.display = "none";
      }
        

      const updateTable = (start, end) => {
              
              filteredServices.slice(start, end).forEach((element) => {

              //replaces null values with empty strings  
              if(!element.DSNPhone){
                element.DSNPhone = "";
              }
              if(!element.Phone1){
                element.Phone1 = "";
              }
              if(!element.Phone2){
                element.Phone2 = "";
              }
              if(!element.Phone3){
                element.Phone3 = "";
              }
              if(!element.City){
                element.City = "";
              }


              if(element.SARCType === 5 || element.category === 'Civilian' || element.Service === "Civilian"){
                  var row = `<tr> 
                              <td>${element.DisplayName || element.Name}</td>
                              <td>${element.City}</td>
                              <td>${element.Phone1} <br> ${element.Phone2} <br> ${element.Phone3}</td>
                            </tr>`;
                  civilianTable.innerHTML += row;
                

              }
              else if(category === "SARC"){
                var row = `<tr> 
                          <td>${element.Service}</td>
                          <td>${element.DisplayName || element.Name}</td>
                          <td>${element.Base}</td>
                          <td>${element.DSNPhone}</td>
                          <td>${element.Phone1} <br> ${element.Phone2} <br> ${element.Phone3}</td>
                        </tr>`;
                SARCTable.innerHTML += row;

              } else if(category === "Chaplain"){
                var row = `<tr> 
                          <td>${element.Service}</td>
                          <td>${element.DisplayName || element.Name}</td>
                          <td>${element.Base}</td>
                          <td>${element.DSNPhone}</td>
                          <td>${element.Phone1} <br> ${element.Phone2} <br> ${element.Phone3}</td>
                        </tr>`;
                chaplainTable.innerHTML += row;

              } else if(category === "Legal"){
                var row = `<tr> 
                          <td>${element.Service}</td>
                          <td>${element.DisplayName || element.Name}</td>
                          <td>${element.Base}</td>
                          <td>${element.DSNPhone}</td>
                          <td>${element.Phone1} <br> ${element.Phone2} <br> ${element.Phone3}</td>
                        </tr>`;
                legalTable.innerHTML += row;

              } else if(category === "Medical"){
                var row = `<tr> 
                          <td>${element.Service}</td>
                          <td>${element.DisplayName || element.Name}</td>
                          <td>${element.Base}</td>
                          <td>${element.DSNPhone}</td>
                          <td>${element.Phone1} <br> ${element.Phone2} <br> ${element.Phone3}</td>
                        </tr>`;
                medicalTable.innerHTML += row;

              }else if(category === "Military Police"){
                var row = `<tr> 
                          <td>${element.Service}</td>
                          <td>${element.DisplayName || element.Name}</td>
                          <td>${element.Base}</td>
                          <td>${element.DSNPhone}</td>
                          <td>${element.Phone1} <br> ${element.Phone2} <br> ${element.Phone3}</td>
                        </tr>`;
                militaryTable.innerHTML += row;
              }
            }); 
        }; 

        updateTable(0, resultsPerCategory);


    });
 

  });

  SARCTable.innerHTML = "";
  civilianTable.innerHTML = "";
  chaplainTable.innerHTML = "";
  legalTable.innerHTML = "";
  medicalTable.innerHTML = "";
  militaryTable.innerHTML = "";

  

}