const locationInput = $('#location-box');
const currentBox = $('.current');
const convertBtn = $('button');
const hourlyBox = $('.hourly');
const conversionBox = $('.conversion');
const descriptionBox = $('.description');
const widget = $('.widget');
const WIDGET_HEIGHT = '560px';
let skycons = new Skycons({'color': 'white'});
let geocodedObj = '';
let hData = {};
let wData = {};

let curUnit = 'imperial';
const units = {
  'imperial' : {
    'temp' : '°F',
    'speed' : 'MPH'
  },
  'metric' : {
    'temp' : '°C',
    'speed' : 'KPH'
  }
};


$(document).ready(() => {
// bind events for geolocation or geocoding
  bindEvents();
});

function loadWeather(location) {
  // if geocoded from google api
  if (typeof location === 'object') {
    geocodedObj = location; // save a copy for later
    location = `${location.results[0].geometry.location.lat},${location.results[0].geometry.location.lng}`;
    locationInput.val(geocodedObj.results[0].formatted_address);
  } else {
    locationInput.val('From Geolocation');
  }

  $.ajax({
    method: 'GET',
    dataType: 'jsonp',
    url: REQ_URL + API_KEY + '/' + location,
    success: parseWeather,
    error: logError
  });

}

function logError(err) {
  console.log(err.statusText);
}

function parseLocationFromValue() {
  // change spaces to + signs for URL
  return locationInput.val().split(' ').join('+');
}

function parseWeather(weather) {

  hData = weather.hourly.data;
  wData = weather;
  // expansion animations
  descriptionBox.css('display: block');
  widget.css('height', WIDGET_HEIGHT);

  // Add all data to temps and hourly
  showData();

  // set the weather summary icon and animate
  animateHourlyIcons();

  // animate opacity after all data is added
  currentBox.css('opacity', '1.0');
  hourlyBox.css('opacity', '1.0');
  conversionBox.css('opacity', '1.0');

}

// DarkSky free-tier API key
// Only shown publicly to use on Codepen without a back-end.
// Get your own free API key at https://darksky.net/dev/
const API_KEY = 'ef7f2ef3ac83b2547e25b6380e022f60';
const REQ_URL = 'https://api.darksky.net/forecast/';

function bindEvents() {
  // Geolocation Button Clicked
  $('#geolocate').click(() => {
    locationInput.attr('placeholder', '');
    locationInput.val('Getting Geolocation...');
    if ('geolocation' in navigator) {
      navigator.geolocation.getCurrentPosition((loc) => {
        loadWeather(`${loc.coords.latitude},${loc.coords.longitude}`);
      });
    } else {
      alert('Your browser does not support geolocation or you have not given this page permission to use your location.');
    }
  });

  // Manually Typed Location

  convertBtn.click(() => {
    curUnit = curUnit === 'imperial' ? 'metric' : 'imperial';
    showData();
    animateHourlyIcons();
    if (curUnit === 'metric') {
      convertBtn.text('Convert to Imperial')
    } else {
      convertBtn.text('Convert to Metric');
    }
  });

}

function showData() {


  descriptionBox.html(`<h1>${wData.currently.summary}</h1>`);

  descriptionBox.append(
    `<ul>
      <li>Now <strong>${convert(wData.currently.temperature)}</strong></li> 
      <li>High <strong>${convert(wData.daily.data[0].temperatureMax)}</strong></li>
      <li>Low <strong>${convert(wData.daily.data[0].temperatureMin)}</strong></li>
     </ul>`);

  hourlyBox.html(
    `<div class="row">
      <p><span class="pad-time">${moment.unix(hData[0].time).format('hA')}</span> <canvas id="hour1" width="25" height="25"></canvas> ${hData[0].summary} 
      ${convert(hData[0].temperature)} <span class="right">WS: ${convert(hData[0].windSpeed, 'speed')}</span></p>
     </div>
     <div class="row">
      <p><span class="pad-time">${moment.unix(hData[1].time).format('hA')}</span> <canvas id="hour2" width="25" height="25"></canvas> ${hData[1].summary} 
      ${convert(hData[1].temperature)} <span class="right">WS: ${convert(hData[1].windSpeed, 'speed')}</span></p>
     </div>
     <div class="row">
      <p><span class="pad-time">${moment.unix(hData[2].time).format('hA')}</span> <canvas id="hour3" width="25" height="25"></canvas> ${hData[2].summary} 
      ${convert(hData[2].temperature)} <span class="right">WS: ${convert(hData[2].windSpeed, 'speed')}</span></p>
     </div>
     <div class="row">
      <p><span class="pad-time">${moment.unix(hData[3].time).format('hA')}</span> <canvas id="hour4" width="25" height="25"></canvas> ${hData[3].summary} 
      ${convert(hData[3].temperature)} <span class="right">WS: ${convert(hData[3].windSpeed, 'speed')}</span></p>
     </div>
     <div class="row">
      <p><span class="pad-time">${moment.unix(hData[4].time).format('hA')}</span> <canvas id="hour5" width="25" height="25"></canvas> ${hData[4].summary} 
      ${convert(hData[4].temperature)} <span class="right">WS: ${convert(hData[4].windSpeed, 'speed')}</span></p>
     </div>
     <div class="row">
      <p><span class="pad-time">${moment.unix(hData[5].time).format('hA')}</span> <canvas id="hour6" width="25" height="25"></canvas> ${hData[5].summary} 
      ${convert(hData[5].temperature)} <span class="right">WS: ${convert(hData[5].windSpeed, 'speed')}</span></p>
     </div>
     `);
}

function convert(val, type = 'temp') {
  // rounds and converts between C and F or MPH and KPH for windspeed
  let converted = 0;
  const KPH_RATIO = 1.609344;
  if(curUnit === 'imperial' && type === 'temp') {
    converted = Math.round(Number(val)) + units[curUnit].temp;
  } else if (curUnit === 'metric' && type === 'temp') {
    converted = Math.round((Number(val) - 32) * (5 / 9)) + units[curUnit].temp;
  } else if (curUnit === 'imperial' && type === 'speed') {
    converted = Math.round(Number(val)) + units[curUnit].speed;
  } else {
    converted = Math.round(Number(val) * KPH_RATIO) + units[curUnit].speed;
  }
  return converted;
}

function animateHourlyIcons() {
  skycons.set('summary-icon', wData.currently.icon);
  skycons.set('hour1', hData[0].icon);
  skycons.set('hour2', hData[1].icon);
  skycons.set('hour3', hData[2].icon);
  skycons.set('hour4', hData[3].icon);
  skycons.set('hour5', hData[4].icon);
  skycons.set('hour6', hData[5].icon);
  skycons.play();
}