// BEGINNING OF CUSTOM geocoder

const filterEl = document.getElementById("location-filter");
const listingEl = document.getElementById("location-listing");
let userGeonameID;
let userFullPlaceName;


function renderListings(features) {
  const empty = document.createElement("p");
  // Clear any existing listings
  listingEl.innerHTML = "";
  if (features.length) {
    for (const feature of features) {
      const locationTitle = document.createElement("h3");
      const placeName = feature.toponymName;
      const region = feature.adminName1;
      const country = feature.countryName;
      const geonameID = feature.geonameId;

      const fullPlaceName = placeName + ", " + region + ", " + country;
      userFullPlaceName = fullPlaceName;
      locationTitle.textContent = fullPlaceName;

      locationTitle.addEventListener("click", () => {
        userGeonameID = geonameID;
        filterEl.value = fullPlaceName;
        listingEl.style.display = "none";
        enableSubmit(filterEl);
      });
      listingEl.appendChild(locationTitle);
    }
  }
  else if (!userFullPlaceName) {
    empty.textContent = "No results found";
    listingEl.appendChild(empty);
  }
  else {


    // Hide the filter input
    // filterEl.parentNode.style.display = "none";

  }

  filterEl.addEventListener('input', () => {
    if (userFullPlaceName) {
      if (filterEl.value == "" || filterEl.value != userFullPlaceName) {
        let submitBtn = document.querySelector('button.submit');
        submitBtn.disabled = true;
      }
    }
  });
}

// filters locations by user input
filterEl.addEventListener("keyup", (e) => {
  const value = normalize(e.target.value);
  const filtered = [];

  if (filterEl.value.length >= 3) {
    // Filter features that match the input value.
    fetchGeonames(value, function (gnData) {
      var geonameData = gnData;
      listingEl.style.display = "block";
      geonameData.geonames.map(function (val) {
        const name = normalize(val.name)
        console.log("name: " + name);
        filtered.push(val);
      });
      // Populate the dropdown with filtered results
      renderListings(filtered);
    });
  } else {
    listingEl.style.display = "none";
    listingEl.value = "";
  }
});

function normalize(string) {
  return string.trim().toLowerCase();
}

//uses geonames API to gather geolocation data and also 
function fetchGeonames(value, callback) {
  var geonameURL = 'https://secure.geonames.org/searchJSON?name_startsWith=' + value + '&maxRows=5&cities=cities500&type=&username=tastingtomorrow';
  fetch(geonameURL)
    .then((response) => response.json())
    .then((json) => {
      // here's where you access your data
      var newJSON = json;
      callback(newJSON);
    })
    .catch((error) => {
      // handle data errors
      console.log(error);
    });
}
// END OF CUSTOM GEOCODER

function enableSubmit(input) {
  const btn = document.querySelector('button.submit');
  var inpValue = input.value;

  let isValid = false;
  if (inpValue === "" || inpValue.value === null) {
    isValid = false;
  } else {
    isValid = true;
  }

  btn.disabled = !isValid;

}


// BEGIN of supabase pushes
async function testAPI() {
  const userFN = document.querySelector('input#firstname').value;
  const userLN = document.querySelector('input#lastname').value;
  const userEmail = document.querySelector('input#ambassador-email').value;
  const jsonObject = {userFN, userLN, userEmail, userGeonameID};
  console.log("new JSON Object: " + JSON.stringify(jsonObject));
  const options = {
    method: 'POST',
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify(jsonObject)
  };
  const response = await fetch('/ambassadors', options);
  const json = await response.json();
  console.log(JSON.stringify(json));
};

async function pushAmbassador() {
    testAPI();
    const form = document.querySelector('.ambassador-form');
    form.remove();
    successMessage();
    return false;
  }

// END of supabase pushes
function successMessage() {
 
  const container = document.querySelector('div.content');
  const successMessage = document.createElement("h3");
  successMessage.innerText = "Information Received. Thank you for becoming an ambassador.";
  container.appendChild(successMessage);
  console.log('new ambassador pushed');
}

// source: https://www.simplilearn.com/tutorials/javascript-tutorial/email-validation-in-javascript
function validateEmail(input) {
  var validReg = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
  if (input.value.match(validReg)) {
    return true;
  } else {
    return false;
  }
}