'use strict'
/* global alert io google $ mapuser userid disp noHeader mapKey navigator token */


// Variables
let map, marker, elevator, newLoc
const mapElem = document.getElementById('map')
const socket = io('//' + window.location.hostname)
const IDLE_TIMEOUT = 300 // 5 minutes in seconds
let _idleSecondsCounter = 0

// Idle timeout listeners
function resetIdleSecondsCounter () {
  _idleSecondsCounter = 0
}
document.onclick = resetIdleSecondsCounter
document.onmousemove = resetIdleSecondsCounter
document.onkeypress = resetIdleSecondsCounter

// Disconnect socket.io if user is idle for longer than IDLE_TIMEOUT seconds
window.setInterval( function CheckIdleTime () {
  _idleSecondsCounter++
  // Disconnect idle user if still connected
  if (_idleSecondsCounter >= IDLE_TIMEOUT) {
    if (socket.connected) {
      console.log('Disconnecting because idle for more than',IDLE_TIMEOUT,'seconds.')
      $('#inactive-mask').show()
      $('#inactive-message').show()
      socket.disconnect()
    }
  // Connect user if disconnected
  } else {
    if (!socket.connected) {
      console.log('Reconnecting the user because they are no longer idle.')
      $('#inactive-mask').hide()
      $('#inactive-message').hide()
      socket.connect()
    }
  }
}, 1000)

// Convert to feet if needed
function metersToFeet (meters) {
  //console.log('metersToFeet('+meters+')')
  return (mapuser.settings.units === 'standard') ? (meters * 3.28084).toFixed() : meters.toFixed()
}

// socket.io stuff
socket
  .on('connect', function () {
    console.log('Connected!')

    // Can get location
    socket.emit('can-get', mapuser._id)

    // Can set location too
    if (mapuser._id === userid) socket.emit('can-set', userid)
  }).on('disconnect', function () {
    console.log('Disconnected!')
  }).on('error', function (err) {
    console.error(err.stack)
  })

// Show/hide map if location is set/unset
function toggleMaps (loc) {
  if (loc.lat === 0 && loc.lon === 0) {
    $('#map').hide()
    $('#view').hide()
    $('#notset').show()
  } else {
    $('#map').show()
    $('#view').show()
    $('#notset').hide()
  }
}

// On page load
$(function () {

  toggleMaps(mapuser.last)

  // Controls
  let wpid, newloc

  // Set location
  $('#set-loc').click(function () {

    // Check if logged in and enabled
    if (!userid === mapuser._id) alert('You are not logged in! '); else {
      if (!navigator.geolocation) alert('Geolocation not enabled. '); else {

        navigator.geolocation.getCurrentPosition(

          // Success callback
          function (pos) {
            let newloc = {
              ts: Date.now(),
              tok: token,
              usr: userid,
              alt: pos.coords.altitude,
              lat: pos.coords.latitude,
              lon: pos.coords.longitude,
              spd: (pos.coords.speed || 0)
            }
            socket.emit('set', newloc)
            toggleMaps(newloc)
            console.log('Set location:', newloc.lat + ', ' + newloc.lon)
          },

          // Error callback
          function (err) {
            alert('Unable to set location.')
            console.error(err.stack)
          },

          // Options
          { enableHighAccuracy: true }

        )
      }
    }
  })

  // Track location
  $('#track-loc').click(function () {

    // Check for login
    if (!userid === mapuser._id) alert('You are not logged in! '); else {

      // Start tracking
      if (!wpid) {
        if (!navigator.geolocation) alert('Unable to track location. '); else {
          $('#track-loc').html(
            '<i class="fa fa-crosshairs fa-spin"></i>Stop'
          ).prop('title',
            'Click here to stop tracking your location. '
          )
          wpid = navigator.geolocation.watchPosition(

            // Success callback
            function (pos) {
              newloc = {
                ts: Date.now(),
                tok: token,
                usr: userid,
                lat: pos.coords.latitude,
                lon: pos.coords.longitude,
                alt: pos.coords.altitude,
                spd: (pos.coords.speed || 0)
              }
              socket.emit('set', newloc)
              toggleMaps(newloc)
              console.log('Set location:', newloc.lat + ', ' + newloc.lon)
            },

            // Error callback
            function (err) {
              alert('Unable to track location.')
              console.error(err.stack)
            },

            // Options
            { enableHighAccuracy: true }

          )
        }

      // Stop tracking
      } else {
        $('#track-loc').html('<i class="fa fa-crosshairs"></i>Track').prop('title', 'Click here to track your location. ')
        navigator.geolocation.clearWatch(wpid)
        wpid = undefined
      }
    }
  })

  // Clear location
  $('#clear-loc').click(function () {
    if (!userid === mapuser._id) alert('You are not logged in! '); else {
      // Stop tracking
      if (wpid) {
        $('#track-loc').html('<i class="fa fa-crosshairs"></i>Track')
        navigator.geolocation.clearWatch(wpid)
        wpid = undefined
      }

      // Clear location
      newloc = {
        ts: Date.now(),
        tok: token,
        usr: userid,
        lat: 0,
        lon: 0,
        spd: 0
      }; socket.emit('set', newloc)

      // Turn off map
      toggleMaps(newloc)
      console.log('Cleared location')
    }
  })

})

// Load google maps API
function initMap() {

  // Create map
  if (disp !== '1') {
    // Create map and marker elements
    map = new google.maps.Map(mapElem, {
      center: {
        lat: mapuser.last.lat,
        lng: mapuser.last.lon
      },
      gestureHandling: 'auto', // Allows use of scroll wheel
      panControl: false,
      scrollwheel: true,
      scaleControl: !!(mapuser.settings.showScale),
      draggable: false,
      zoom: mapuser.settings.defaultZoom,
      streetViewControl: false,
      zoomControlOptions: {position: google.maps.ControlPosition.LEFT_TOP},
      mapTypeId: (mapuser.settings.defaultMap === 'road') ? google.maps.MapTypeId.ROADMAP : google.maps.MapTypeId.HYBRID
    })
    marker = new google.maps.Marker({
      position: { lat: mapuser.last.lat, lng: mapuser.last.lon },
      title: mapuser.name,
      icon: (mapuser.settings.marker) ? '/static/img/marker/' + mapuser.settings.marker + '.png' : '/static/img/marker/red.png',
      map: map,
      draggable: false
    })
    map.addListener('zoom_changed', function () {
      map.setCenter(marker.getPosition())
    })

    // Create iFrame logo
    if (noHeader !== '0' && mapuser._id !== 'demo') {
      const logoDiv = document.createElement('div')
      logoDiv.id = 'map-logo'
      logoDiv.innerHTML = '<a href="https://www.tracman.org/">' +
        '<img src="https://www.tracman.org/static/img/style/logo-28.png" alt="[]">' +
        "<span class='text'>Tracman</span></a>"
      map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(logoDiv)
    }

    // Create update time block
    const timeDiv = document.createElement('div')
    timeDiv.id = 'timestamp'
    if (mapuser.last.time) {
      timeDiv.innerHTML = 'location updated ' + new Date(mapuser.last.time).toLocaleString()
    }
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(timeDiv)

    // Create speed block
    if (mapuser.settings.showSpeed) {
      const speedSign = document.createElement('div')
      const speedLabel = document.createElement('div')
      const speedText = document.createElement('div')
      const speedUnit = document.createElement('div')
      speedLabel.id = 'spd-label'
      speedLabel.innerHTML = 'SPEED'
      speedText.id = 'spd'
      speedText.innerHTML = (mapuser.settings.units === 'standard') ? (parseFloat(mapuser.last.spd) * 2.23694).toFixed() : mapuser.last.spd.toFixed()
      speedUnit.id = 'spd-unit'
      speedUnit.innerHTML = (mapuser.settings.units === 'standard') ? 'm.p.h.' : 'k.p.h.'
      speedSign.id = 'spd-sign'
      speedSign.appendChild(speedLabel)
      speedSign.appendChild(speedText)
      speedSign.appendChild(speedUnit)
      map.controls[google.maps.ControlPosition.TOP_RIGHT].push(speedSign)
    }

    // Create altitude block
    if (mapuser.settings.showAlt) {
      elevator = new google.maps.ElevationService()
      const altitudeSign = document.createElement('div')
      const altitudeLabel = document.createElement('div')
      const altitudeText = document.createElement('div')
      const altitudeUnit = document.createElement('div')
      altitudeLabel.id = 'alt-label'
      altitudeText.id = 'alt'
      altitudeUnit.id = 'alt-unit'
      altitudeSign.id = 'alt-sign'
      altitudeText.innerHTML = ''
      altitudeLabel.innerHTML = 'ALTITUDE'
      parseAlt(mapuser.last).then(function (alt) {
        altitudeText.innerHTML = metersToFeet(alt)
      }).catch(function (err) {
        console.error('Could not load altitude from last known location: ', err)
      })
      altitudeUnit.innerHTML = (mapuser.settings.units === 'standard') ? 'feet' : 'meters'
      altitudeSign.appendChild(altitudeLabel)
      altitudeSign.appendChild(altitudeText)
      altitudeSign.appendChild(altitudeUnit)
      map.controls[google.maps.ControlPosition.TOP_RIGHT].push(altitudeSign)
    }
  }

  // Create streetview
  if (disp !== '0' && mapuser.settings.showStreetview) {
    updateStreetView(parseLoc(mapuser.last), 10)
  }

  // Get altitude from Google API
  function getAlt (loc) {
    return new Promise(function (resolve, reject) {
      // Get elevator service
      elevator = elevator || new google.maps.ElevationService()
      // Query API
      return elevator.getElevationForLocations({
        'locations': [{ lat: loc.lat, lng: loc.lon }]
      }, function (results, status, errorMessage) {
          // Success; return altitude
        if (status === google.maps.ElevationStatus.OK && results[0]) {
          console.log('Altitude was retrieved from Google Elevations API as', results[0].elevation, 'm')
          resolve(results[0].elevation)

        // Unable to get any altitude
        } else reject(Error(errorMessage))
      })
    })
  }

  // Parse altitude
  function parseAlt (loc) {
    // console.log('parseAlt('+loc+'})')

    return new Promise(function (resolve, reject) {
      // Check if altitude was provided
      if (typeof loc.alt === 'number') {
        console.log('Altitude was provided in loc as ', loc.alt, 'm')
        resolve(loc.alt)

      // No altitude provided
      } else {
        console.log('No altitude was provided in loc')

        // Query google altitude API
        getAlt(loc).then(function (alt) {
          resolve(alt)
        }).catch(function (err) { reject(err) })
      }
    })
  }

  // Parse location
  function parseLoc (loc) {
    loc.spd = (mapuser.settings.units === 'standard') ? parseFloat(loc.spd) * 2.23694 : parseFloat(loc.spd)
    loc.dir = parseFloat(loc.dir)
    loc.lat = parseFloat(loc.lat)
    loc.lon = parseFloat(loc.lon)
    // loc.alt = parseAlt(loc);
    loc.tim = new Date(loc.tim).toLocaleString()
    return loc
  }

  // Got location
  socket.on('get', function (loc) {
    console.log('Got location:', loc.lat + ', ' + loc.lon)

    // Parse location
    newLoc = parseLoc(loc)

    // Update map
    if (disp !== '1') {
      // console.log('Updating map...')

      // Update time
      $('#timestamp').text('location updated ' + newLoc.tim)

      // Update marker and map center
      google.maps.event.trigger(map, 'resize')
      map.setCenter({ lat: newLoc.lat, lng: newLoc.lon })
      marker.setPosition({ lat: newLoc.lat, lng: newLoc.lon })

      // Update speed
      if (mapuser.settings.showSpeed) $('#spd').text(newLoc.spd.toFixed())

      // Update altitude
      if (mapuser.settings.showAlt) {
        // console.log('updating altitude...');
        parseAlt(loc).then(function (alt) {
          $('#alt').text(metersToFeet(alt))
        }).catch(function (err) {
          $('#alt').text('????')
          console.error(err.stack)
        })
      }

    }

    // Update street view
    if (disp !== '0' && mapuser.settings.showStreetview) updateStreetView(newLoc, 10)

  })

  // Get street view imagery
  function getStreetViewData (loc, rad, cb) {
    // Ensure that the location hasn't changed (or this is the initial setting)
    if (newLoc == null || loc.tim === newLoc.tim) {
      if (!sv) var sv = new google.maps.StreetViewService()
      sv.getPanorama({
        location: {
          lat: loc.lat,
          lng: loc.lon
        },
        radius: rad
      }, function (data, status) {
        switch (status) {
          // Success
          case google.maps.StreetViewStatus.OK: {
            cb(data)
            break
          // No results in that radius
          } case google.maps.StreetViewStatus.ZERO_RESULTS: {
            // Try again with a bigger radius
            getStreetViewData(loc, rad * 2, cb)
            break
          // Error
          } default:
            console.error(new Error('Street view not available: ' + status).message)
        }
      })
    }
  }

  // Update streetview
  function updateStreetView (loc) {

    // Calculate bearing between user and position of streetview image
    // https://stackoverflow.com/a/26609687/3006854
    function getBearing (userLoc, imageLoc) {
      return 90 - (
        Math.atan2(userLoc.lat - imageLoc.latLng.lat(), userLoc.lon - imageLoc.latLng.lng()) *
        (180 / Math.PI)) % 360
    }

    // Get dimensions for sv request (images proportional to element up to 640x640)
    function getDimensions (element) {
      // Window is smaller than max
      if (element.width() < 640 && element.height() < 640) {
        return element.width().toFixed() + 'x' + element.height().toFixed()

      // Width must be made proportional to 640
      } else if (element.width() > element.height()) {
        return '640x' + (element.height() * 640 / element.width()).toFixed()

      // Height must be made proportional to 640
      } else return (element.width() * 640 / element.height()).toFixed() + 'x640'
    }

    // Set image
    getStreetViewData(loc, 2, function (data) {
      $('#viewImg').attr('src', 'https://maps.googleapis.com/maps/api/streetview?' +
        'size=' + getDimensions($('#view')) +
        '&location=' + data.location.latLng.lat() + ',' + data.location.latLng.lng() +
        '&fov=90' + // Inclination
        // Show direction if moving, point to user if stationary
        '&heading=' + ((loc.spd > 2) ? loc.dir : String(getBearing(loc, data.location))) +
        '&key=' + mapKey
      )
    })

  }

// Error loading gmaps API
}