let mapSelectComponent = {
    bindings: {
        profile: '<',
        tag: '<',
        selectAddress: '&'
    },
    controller: function (GoogleMapService) {
        'ngInject';
        this.gmap = GoogleMapService;
        this.map = {};
        this.geocoder = new google.maps.Geocoder;
        this.address = {};

        this.init = () => {
          // Initializing our map
          this.gmap.init().then(res => {
              this.setMarkerListener(this.gmap.marker);
              return this.map = res.map;
          });

          // Setting up autocomplete
          this.input = document.querySelector('#input');
          this.autocomplete = new google.maps.places.Autocomplete(this.input);
          this.autocomplete.bindTo('boundsTo', this.map);

          this.autocomplete.addListener('place_changed', () => {
             this.gmap.marker.setVisible(false);
             // Getting the place from autocomplete
             let place = this.autocomplete.getPlace();
             // Moving the map center to place we selected and placing a marker there
             this.gmap.changeLocation(place);
             this.formAddressObject(place);
          });
        };

        /**
         * Sets a listener on google maps marker drag event
         * Finds and reverse geocodes the results
         * And forms an object to pass to the parent component
         * From where it is sent to server
         * @param {Object} marker
         */
        this.setMarkerListener = (marker) => {
            // Setting a listener on our marker drag event
            google.maps.event.addListener(marker, 'dragend', (evt) => {
                // Getting the coordinates of drag end point
                let latlng = {
                    lat: evt.latLng.lat(),
                    lng: evt.latLng.lng()
                };
                // Reverse geocoding the coordinates to get full featured place with address and other properties
                this.geocoder.geocode({'location': latlng }, (results, status) => {
                    // We get an array consisting of our selected place and places nearby, so we need the first element
                    let place = results[0];
                    this.formAddressObject(place)
                });
            });
        };

        /**
         * Forms an object that we pass to parent component from the data we get from the map
         * @param {Object} place
         * @returns {{Tag, Coordinates: {Latitude, Longtitute}, ProfileId, LocationName: string}}
         */
        this.formAddressObject = (place) => {
            return this.address = {
                Tag: this.tag,
                Coordinates: {
                    Latitude: place.geometry.location.lat(),
                    Longtitute: place.geometry.location.lng()
                },
                ProfileId: this.profile.ProfileId,
                LocationName: `${place.address_components[1].short_name}, ${place.address_components[0].long_name}`
            };
        };

        this.init();
    },
    template: `
        <div class="map">
            <input type="text" id="input" class="form-control">
            <map></map>
            <button ng-click="$ctrl.selectAddress({location: $ctrl.address})"></button>
        </div>
    `
};

export default mapSelectComponent;