import { Component,ViewChild, ElementRef } from '@angular/core';
import { IonicPage, NavController,ViewController,NavParams } from 'ionic-angular';
import {Myservice} from '../../providers/myservice';
import { Storage } from '@ionic/storage';
 
declare var google: any;

 
@IonicPage()
@Component({
  selector: 'page-map',
  templateUrl: 'map.html',
})
export class MapPage {
	lat: any;
	lon: any;
	mapData: any;
	mapIcon: any;
	@ViewChild('map') mapElement: ElementRef;
  	map: any
  	locations: any
  	search_val: any;
  	center_lng: any;
  	center_lat: any;
  	dis: any;
	search_by_map: boolean;
	is_map_search: boolean = false;
	languages:any;
	language_list:any;
	 


	constructor(public navCtrl: NavController, public navParams: NavParams,public viewCtrl: ViewController, private myservice: Myservice, public storage: Storage) {
		this.is_map_search=false;
		this.locations=this.navParams.get('locations');
		 
		this.storage.get('language').then((language) => {
				if(language){
					this.languages=language.languages;
					this.language_list=language.values;
				}
		})
	}
	
	/* COMMON-NAVIGATION-CONTROL-FUNCTION */

	dismiss() {
		this.viewCtrl.dismiss();
	}

/*------------------*/

/* GOOGLE-MAP-FUNCTION */

	ionViewDidLoad() {
		console.log('ionViewDidLoad MapPage');
		this.load_map();
		 
	}
	
		load_map(){
	 
		var This=this;
		this.myservice.show_loader();
		setTimeout(() =>{
			This.myservice.hide_loader();
			var map = new google.maps.Map(document.getElementById('map'), {
				zoom: 7,
				center: {lat:Number(This.locations.lat),lng: Number(This.locations.lng)}  // Australia.
			});

			var directionsService = new google.maps.DirectionsService;
			var directionsDisplay = new google.maps.DirectionsRenderer({
				draggable: false,
				map: map,       
			});

			directionsDisplay.addListener('directions_changed', function() {
				This.computeTotalDistance(directionsDisplay.getDirections());
			});
		 
			// {lat:This.lat_lng.lat,lng: This.lat_lng.lon}
			
		//	This.displayRoute({lat:9.036198,lng:38.829117},{lat:Number(This.locations.lat),lng: Number(This.locations.lng)}, directionsService,
          //  directionsDisplay);
			
			
			
			
			directionsService.route({
			origin: {lat:9.036198,lng:38.829117},
			destination: {lat:Number(This.locations.lat),lng: Number(This.locations.lng)},
			//   waypoints: [{location: {lat:9.8761,lng: 76.2871}}, {location: {lat:9.9312,lng: 76.2673}},{location:{lat:9.9816,lng: 76.2999} }],
			travelMode: 'DRIVING',
			avoidTolls: true
		}, function(response, status) {
			if (status === 'OK') {
				directionsDisplay.setDirections(response);
			} else {
				console.log(directionsDisplay);
				 var markerData= {lat:Number(This.locations.lat),lng: Number(This.locations.lng)};
						let marker = new google.maps.Marker({
							position: markerData,
							map: map,
							draggable: false,
						 });
				// display.setPosition(destination);
				//alert('Could not display directions due to: ' + status);
			}
        });
			
			
			
			
			
		},2000);
    }
	
		computeTotalDistance(result) {
        var total = 0;
		if(result.routes[0]){
			var myroute = result.routes[0];
			for (var i = 0; i < myroute.legs.length; i++) {
				total += myroute.legs[i].distance.value;
			}
			total = total / 1000;
			//document.getElementById('total').innerHTML = total + ' km';
		}
	}
	
	
	search() {
		//is_map_search
		console.log('Cucumbers new state:' + this.search_by_map);
		 
	}
	
	search_apply(){
		var map_array ={ 'radius' : this.dis, 'lat' : this.center_lat, 'lon' : this.center_lng, };
			console.log(map_array);
			console.log(this.search_val);
		var merge_values = Object.assign(this.search_val, map_array);
	
		this.viewCtrl.dismiss(merge_values);
	}

}
