//Global Variables: 
//is_f - tracks farenhiet vs celcius, myTemps - stores globally temp data for function use, myBtns - id counter for tabs
let is_f = window.localStorage.getItem('is_f') == "true" ? true : false;
let myTemps;
let myBtns = 0;

//Runs on document loaded - starts the browser geolocation search and loads tabs-------------------------------------
document.addEventListener("DOMContentLoaded", function() {
  //Set waiting mouse cursor, load location tabs
  document.getElementById("main").classList.add('waiting');
  loadTabs();
  //Check for geolocation compatibility, call getWeatherInfo with geodata or default lat,lon
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(getWeatherInfo, geoError);
  } else {
    alert("Cannot Get Location: GeoLocation not currently availabe in this browser! Using default location!");
    getWeatherInfo({coords: {latitude: 33.6054149, longitude: -112.125051}});
  }
});

//Runs if geolocation errors - gets weather with default lat/lon-----------------------------------------------
function geoError() {
  alert("Cannot Get Location: GeoLocation failed to provide information! Using default location!");
  getWeatherInfo({coords: {latitude: 33.6054149, longitude: -112.125051}});
}

//function - use FCC weather API and gets weather for provided position, updates html elements with the info----------
function getWeatherInfo(position) {  
  const BASEURL = "https://weather-proxy.freecodecamp.rocks/api/current";

  //default lat,lon if none provided
  let lat = 33.6054149;
  let lon = -112.125051;
  
  //get lat,lon from provided position data
  if (position.coords.latitude) {
     lat = position.coords.latitude;
     lon = position.coords.longitude;
  }
  
  //create query URL for the API get request
  let query = "?lon=" + lon + "&lat=" + lat;
  let fullUrl = BASEURL + query;

  //Send get request to FCC weather API
  const req = new XMLHttpRequest();
  req.open("GET", fullUrl, true);
  req.send();
  req.onload = () => {
    const weather = JSON.parse(req.responseText);
    // default weather data - used while editing page design to prevent excessive requests during refreshes
   // const weather = {"coord":{"lon":-83.1053,"lat":40.0876},"weather":[{"id":804,"main":"Clouds","description":"overcast clouds","icon":"https://cdn.freecodecamp.org/weather-icons/04n.png"}],"base":"stations","main":{"temp":22,"feels_like":19.11,"temp_min":17.6,"temp_max":20.31,"pressure":1008,"humidity":87},"visibility":10000,"wind":{"speed":0.89,"deg":153,"gust":0.89},"clouds":{"all":92},"dt":1653022722,"sys":{"type":2,"id":2016648,"country":"US","sunrise":1653041568,"sunset":1653093924},"timezone":-14400,"id":5152333,"name":"Dublin","cod":200};
  
  //Pull weather variables from the returned weather data object
  lat = weather.coord.lat;
  lon = weather.coord.lon;
  let {main, description, icon} = weather.weather[0];
  myTemps = weather.main;
  let {speed, deg, gust} = weather.wind;
  let name = weather.name;
  let sunrise = new Date(weather.sys.sunrise*1000);
  let sunset = new Date(weather.sys.sunset*1000);
  
  //Fill in HTML elements with provided weather data
  document.getElementById('location').innerHTML = 'Location: ' + name + 
    ' - <span class="latlon"> (Lat: ' +lat+ ', Lon: ' +lon + ')</span>';
  document.getElementById('icon').innerHTML = '<img src="' + icon + '" alt="Weather Icon" width="75" height="75"/>';
  document.getElementById('status').innerHTML = '<span class="stat">'+main + '</span><br> <span class="desc">' + description + '</span>';
  //function to fill in Tempurature HTML elements with appropriate f or c selector
  drawTemps();
  //Fill in remaining HTML elements with provided weather data, rotate the wind indicator element
  document.getElementById('direction').style.transform = "rotate(" + deg + "deg)";
  document.getElementById('wind-info').innerHTML = 'Vel: <span class="value">'+Math.round(speed*2.23694)+' mph</span><br>Gust:<span class="value"> '+ ((gust)? Math.round(gust*2.23694): "--")+' mph</span><br>From: <span class="value">'+ deg +'°</span>'
  document.getElementById('daylight').innerHTML = '<span class="title">Morning/Evening Times:</span> <br><br>Sunrise: <span class="value">'+makeTime(sunrise)+' <br></span>Sunset: <span class="value">' + makeTime(sunset)+" </span>";
   }
  //Provide src value for the weather map iframe based on lat,lon
  document.getElementById('weathermap').src = 'https://www.rainviewer.com/map.html?loc='+lat+','+lon+',10&oFa=0&oC=0&oU=0&oCS=0&oF=0&oAP=1&c=3&o=83&lm=1&layer=radar&sm=1&sn=1';
  //Remove the waiting mouse icon now that update is complete
  document.getElementById("main").classList.remove('waiting');
}

//Function returns an html color for a provided temperature based on its value (red=hot, blue=cold)
function tempColor (t) {
    if (t >= 29) {
      return'#DD0000';
    } else if (t < 29 && t >= 24 ) {
      return '#DDAA00';
    } else if (t < 24 && t >= 12 ) {
      return '#00DD00';
    } else if (t < 12 && t >= 0 ) {
      return '#00DDAA';
    } else if (t < 0) {
      return '#0000DD';
    }
    return '#FFFFFF'
}

//Function returns provided temp with appropriate f/c conversion based on global is_f variable
function convTemps(t) {
  if (is_f) {
    return (Math.round((t*9/5 + 32) * 10)/10);
  } else {
    return (Math.round(t*10)/10);
  }
}

//Function to update temperature related html elements with global temp data for when f/c is changed
function drawTemps() {
  //pull variables from global myTemps variable, convert and get temperature color
  let {temp, feels_like, temp_min, temp_max, humidity, pressure} = myTemps;
  let theColor = tempColor(temp);
  temp = Math.round(convTemps(temp));
  let convTemp = convTemps(temp);
  
  //Fill in temperature related html elements with the data
  document.getElementById('current-temp').innerHTML = '<span class="current-temp" style="color: '+theColor+'">'+temp+'°</span> <span class="feels"><br>Feels Like <span class="value">' + convTemps(feels_like) + '°</span></span>';
  document.getElementById('f-or-c').innerHTML = is_f?"F":"C";
  document.getElementById('temps').innerHTML = 'Today\'s High: <span class="value">' + convTemps(temp_max) + '°</span><br>Today\'s Low: <span class="value">' + convTemps(temp_min) + "°</span>";
  document.getElementById('humidity').innerHTML = 'Humidity: <span class="value">' + humidity + ' % </span><br>Pressure: <span class="value">' + pressure + ' hpa</span>';
}

//Function executes on F/C button press - changes global is_f and update temps
function switchFC() {
  is_f = !is_f;
  window.localStorage.setItem('is_f', is_f);
  drawTemps();
}

//Function accepts date object, returns a readable 12hr time string
function makeTime(t) {
  let hr = parseInt(t.getHours());
  let mins = t.getMinutes();
  let ampm = hr > 11?"PM":"AM";
  if (hr == 0) {
    hr = 12;
  } else if (hr > 12) {
    hr = hr - 12;
  }
  
  return hr + ":" + (mins < 10? "0" + mins : mins) + " " + ampm;
}

//Runs on form Search button press, use openstreetmap api to get lat,lon from search query
function changeLocation () {
  //Get value from text input, setup URL for get request
  const BASEURL = "https://nominatim.openstreetmap.org/search";
  let query = document.getElementById("search").value;
  document.getElementById("search").value = "";
  let queryurl = "?q="+query+"&format=json&limit=1"
  let fullUrl = BASEURL + queryurl;
  
  if (query.length > 0) {
    //Set mouse icon and header to waiting status
    document.getElementById("main").classList.add('waiting');
    document.getElementById("location").innerHTML = "Location: Loading...";
    //Sent GET request to openstreetmaps to get lat,lon from text input
    const req = new XMLHttpRequest();
    req.open("GET", fullUrl, true);
    req.send();
    req.onload = () => {
      const geodata = JSON.parse(req.responseText);
      
      //If found - perform weather lookup with new lat,lon and add a tab to the search bar
      if (geodata[0]) {
        let {lat,lon} = geodata[0];
        getWeatherInfo({coords: {latitude: lat, longitude: lon}});
        updateTabs(query, lat, lon);
      } else {   
        //Remove wait cursor and show error in header if geo search failed
        document.getElementById("main").classList.remove('waiting');
        document.getElementById("location").innerHTML = 'Error! "' + query + '" not found!' ;
      }
    }
  }
}

//Function executes when a quick location tab is pressed... performs weather lookup for stored lat,lon
function fastLocate(lat,lon) {
  //set waiting icon and header message, and perform weather lookup
  document.getElementById("main").classList.add('waiting');
  document.getElementById("location").innerHTML = "Location: Loading..."
  getWeatherInfo({coords: {latitude: lat, longitude: lon}});
}

//Function to add a tab to the tab bar, creates a tab with provided data if fewer than 5 already exist
function updateTabs(query, lat, lon) {
  if (document.querySelectorAll(".hist-btn").length < 5) {
    //update global tab index, add <div> element to tab bar
    myBtns++;
    document.getElementById("hist-bar").innerHTML = document.getElementById("hist-bar").innerHTML + 
        '<div id="btn'+myBtns+'" class="hist-btn" onclick="fastLocate('+lat+','+lon+')">'+query+'<div class="hist-del" onclick="deleteTab('+myBtns+')">X</div></div>';
    //Run function to save tabs to localStorage
    saveTabs();
  }
}

//Ran on delete tab button press, removes the selected dom element, updates tabbar in storage
function deleteTab(tab) {
  document.getElementById("btn" + tab).remove();
  event.stopPropagation();
  saveTabs();
}

//Ran on page load - Pulls the tab list from localStorage, updates tab bar if found... updates tab index 
function loadTabs() {
  const tabStr = window.localStorage.getItem('tabs');
  if (tabStr) {
    document.getElementById("hist-bar").innerHTML = tabStr;
    myBtns = parseInt(window.localStorage.getItem("tabIndex"));
  }
}

//Ran when tabbar is changed, saves tabbar contents and tab index to localStorage
function saveTabs() {
  const tabStr = document.getElementById("hist-bar").innerHTML;
  window.localStorage.setItem('tabs', tabStr);
  window.localStorage.setItem('tabIndex', myBtns);
}