<template>
    <lightning-card class="slds-is-relative">
       <!-- The template and lightning-spinner goes here -->
       <template if:true={isLoading}>
         <lightning-spinner variant="brand" alternative-text="Loading"></lightning-spinner>
       </template>
       <!-- The lightning-map goes here -->
       <template if:false={isLoading}>
         <lightning-map map-markers={mapMarkers}></lightning-map>
       </template>
       <div slot="footer">Top 10 Only!</div>
    </lightning-card>
 </template>

import { LightningElement,api,wire,track} from 'lwc';
import getBoatsByLocation from '@salesforce/apex/BoatDataService.getBoatsByLocation';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

// imports
const LABEL_YOU_ARE_HERE = 'You are here!';
const ICON_STANDARD_USER = 'standard:user';
const ERROR_TITLE = 'Error loading Boats Near Me';
const ERROR_VARIANT = 'error';
export default class BoatsNearMe extends LightningElement {
  @api boatTypeId;
  @track mapMarkers = [];
  isLoading = true;
  isRendered = false;
  latitude;
  longitude;
  error
  
  // Add the wired method from the Apex Class
  // Name it getBoatsByLocation, and use latitude, longitude and boatTypeId
  // Handle the result and calls createMapMarkers
  @wire(getBoatsByLocation, { latitude: '$latitude', longitude: '$longitude', boatTypeId : '$boatTypeId' })
  wiredBoatsJSON({error, data}) { 
    if(data){
      this.error = undefined;
      this.createMapMarkers(JSON.parse(data));
      this.isLoading = false;
    }
    else if(error){
      this.mapMarkers = [];
      this.error = error;
      this.dispatchEvent(
        new ShowToastEvent({
            title: ERROR_TITLE,
            message: error,
            variant: ERROR_VARIANT
        })
      );
    }
  }
  
  // Controls the isRendered property
  // Calls getLocationFromBrowser()
  renderedCallback() { 
    if(!this.isRendered)
    {
      this.getLocationFromBrowser();
      this.isRendered = true;
    }
  }
  
  // Gets the location from the Browser
  // position => {latitude and longitude}
  getLocationFromBrowser() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition((position) => {
      this.latitude = position.coords.latitude;
      this.longitude = position.coords.longitude;
      console.log( 'lat => ' + this.latitude + ' :: ' + 'long => ' + this.longitude );
      });
    }
  }
  
  // Creates the map markers
  createMapMarkers(boatData) {
  const newMarkers = boatData.map(boat =>
        ({ 
            location: {
              Latitude: boat.Geolocation__Latitude__s,
              Longitude: boat.Geolocation__Longitude__s
            },
            title: boat.Name
          })
    );
    
  newMarkers.unshift({ 
    location: {
      Latitude: this.latitude,
      Longitude: this.longitude
    },
    title: LABEL_YOU_ARE_HERE,
    icon : ICON_STANDARD_USER
    }); 
  this.mapMarkers = newMarkers;
  this.isLoading = false;
  console.log('mapMarkers ==> '  + JSON.stringify( this.mapMarkers)); 
  }
}