function fetchAPI(apiEndPoint) {
  fetch(scriptRoot + apiEndPoint)
    .then(response => {
      return response.json();
    })
    .then(data => {
      document.getElementById("json").textContent = JSON.stringify(data, undefined, 2);
      document.getElementById("results").classList.remove("invisible");
      document.getElementById("loader").classList.add("invisible");
    });
  document.getElementById("results").classList.add("invisible");
  document.getElementById("loader").classList.remove("invisible");

}

let search = () => {
  let m =  document.getElementById('search-input').value;
  fetchAPI(scriptRoot + "/api/getDetailsForSeq?seq=" + encodeURIComponent(m));
}

let fetchSEQBySpecimen = () => {
  fetchAPI("/api/getSEQCountbySpecimenSource");
}

let fetchSEQByLocation = () => {
  fetchAPI("/api/getSEQCountbyLocation");
}

let fetchSEQByTech = () => {
  fetchAPI("/api/getSEQCountbytech");
}

let fetchAllaccessions = () => {
  fetchAPI("/api/getAllaccessions");
};

/**
 * Show form if checked
 */
let fillFormSpot = document.getElementById('metadata_fill_form_spot');
function displayForm() {
  if (document.getElementById('metadata_form').checked) {
    fillFormSpot.classList.remove("invisible");
    return;
  }
  fillFormSpot.classList.add("invisible");
}

/**
 * Add another form field to the group this button is part of.
 */
function addField(e) {
  // Find our parent field-group div
  let fieldGroup = this.parentElement
  
  // Get its keypath
  let keypath = fieldGroup.dataset.keypath
  
  // Find its last field child
  let existingFields = fieldGroup.getElementsByClassName('field')
  let templateField = existingFields[existingFields.length - 1]
  
  // Get its number
  let fieldNumber = templateField.dataset.number
  
  // Duplicate it
  let newField = templateField.cloneNode(true)
  
  // Increment the number and use the keypath and number to set IDs and cross
  // references.
  // TODO: Heavily dependent on the form field HTML. Maybe we want custom
  // elements for the labeled controlsd that know how to be list items?
  fieldNumber++
  newField.dataset.number = fieldNumber
  let newID = keypath + '[' + fieldNumber + ']'
  let newControl = newField.getElementsByClassName('control')[0]
  newControl.id = newID
  newControl.setAttribute('name', newID)
  let newLabel = newField.getElementsByTagName('label')[0]
  newLabel.setAttribute('for', newID)
  
  // Find the minus button
  let minusButton = fieldGroup.getElementsByClassName('remove-field')[0]
  
  // Put new field as a child before the minus button
  fieldGroup.insertBefore(newField, minusButton)
  
  // Enable the minus button
  minusButton.classList.remove('invisible')
}

/**
 * Remove the last form field from the group button is part of.
 */
function removeField(e) {
  // Find our parent field-group div
  let fieldGroup = this.parentElement
  
  // Find its field children
  let existingFields = fieldGroup.getElementsByClassName('field')
  
  if (existingFields.length > 1) {
    // There is a last field we can safely remove.
    let lastField = existingFields[existingFields.length - 1]
    fieldGroup.removeChild(lastField)
  }
  
  if (existingFields.length <= 1) {
    // Collection auto-updates. Now there's only one element. Don't let the
    // user remove it. If they don't want it, they can leave it empty.
    this.classList.add('invisible')
  }
}

// Find all the add and remove field buttons and hook up the listeners.
for (let button of document.getElementsByClassName('add-field')) {
  button.addEventListener('click', addField)
}
for (let button of document.getElementsByClassName('remove-field')) {
  button.addEventListener('click', removeField)
}