/// <reference types="googlemaps" />

import { Component, OnInit, Input, ViewChild, ElementRef, OnChanges, Output, EventEmitter, SimpleChanges, NgZone } from '@angular/core';

import { RegPontService } from '../shared/reg-pont.service';
import { RegPont } from '../shared/reg-pont';

@Component({
    selector: 'app-map',
    templateUrl: './map.component.html',
    styleUrls: ['./map.component.less']
})
export class MapComponent implements OnInit, OnChanges {

    @Input() latLng: google.maps.LatLng = new google.maps.LatLng(47.497912, 19.040235);
    @Output() selectedRegPontChanged = new EventEmitter<RegPont>();
    @ViewChild('gmap') gmapElement: ElementRef;
    map: google.maps.Map;

    constructor(private regPontService: RegPontService, private zone: NgZone) { }

    ngOnInit() {
        this.initMap();
        this.positionMapToCurrentPositionIfPossible();
    }

    ngOnChanges(changes: SimpleChanges) {
        if (changes['latLng'].currentValue !== changes['latLng'].previousValue) this.map.panTo(this.latLng);
    }

    initMap() {
        const mapProp = {
            center: new google.maps.LatLng(47.497912, 19.040235),
            zoom: 14,
            streetViewControl: false,
            scrollwheel: true,
            mapTypeControl: false,
            overviewMapControl: false,
            rotateControl: false,
            clickableIcons: false,
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL,
                position: google.maps.ControlPosition.LEFT_TOP
            }
        };
        this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);
        this.initRegPonts();
    }

    positionMapToCurrentPositionIfPossible() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition((position) =>
                this.map.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude)));
        }
    }

    initRegPonts() {
        this.regPontService.getRegpontObservable().subscribe(
            regPontok => {
                regPontok.forEach(
                    regPont => {
                        let latLng = new google.maps.LatLng(regPont.lat, regPont.lng);
                        // tslint:disable-next-line:max-line-length
                        let iconBase = 'https://www.google.hu/maps/vt/icon/name=assets/icons/poi/tactile/pinlet_shadow-2-medium.png,assets/icons/poi/tactile/pinlet_outline_v2-2-medium.png,assets/icons/poi/tactile/pinlet-2-medium.png,assets/icons/poi/quantum/pinlet/shoppingbag_pinlet-2-medium.png&highlight=ff000000,ffffff,db4437,ffffff&color=ff000000?scale=1';
                        let marker = new google.maps.Marker({
                            position: latLng,
                            map: this.map,
                            icon: { url: iconBase },
                            title: regPont.nev
                        });
                        marker.addListener('click', () => {
                            this.zone.run(
                                () => {
                                    this.map.panTo(marker.getPosition());
                                    this.selectedRegPontChanged.emit(regPont);
                                });
                        });
                    });
            },
            err => console.warn(`ERROR(${err.code}): ${err.message}`)
        );
    }

}