import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter } from '@angular/core';
import { GoogleMapService } from '../services/GoogleMapService';
import { LoggerService } from 'dotcms-js/dotcms-js';
var mapIdCounter = 1;
var AreaPickerDialogComponent = (function () {
    function AreaPickerDialogComponent(mapsService, loggerService) {
        this.mapsService = mapsService;
        this.loggerService = loggerService;
        this.apiKey = '';
        this.headerText = '';
        this.hidden = false;
        this.circle = { center: { lat: 38.8977, lng: -77.0365 }, radius: 50000 };
        this.close = new EventEmitter(false);
        this.cancel = new EventEmitter(false);
        this.circleUpdate = new EventEmitter(false);
        this.mapId = 'map_' + mapIdCounter++;
        this.waitCount = 0;
        this.loggerService.debug('AreaPickerDialogComponent', 'constructor', this.mapId);
    }
    AreaPickerDialogComponent.prototype.ngOnChanges = function (change) {
        var _this = this;
        if (!this.hidden && this.map == null) {
            this.mapsService.mapsApi$.subscribe(function (x) { }, function () { }, function () {
                if (_this.mapsService.apiReady) {
                    _this.readyMap();
                }
            });
            this.mapsService.loadApi();
        }
        if (change.hidden && this.hidden && this.map) {
            this.loggerService.debug('AreaPickerDialogComponent', 'ngOnChanges', 'hiding map: ', this.map.getDiv().getAttribute('id'), this.map.getDiv()['style']['height']);
            /**
       *
       * Angular2 has a bug? Google Maps? Chrome? For whatever reason, loading a second map without forcing a reload
       * will cause the first map loaded to always display, despite the maps actually living in separate
       * divs, and the 'hidden' map divs actually not being in the active DOM (they have been cut out / moved into the
       * shadow dom by the ngIf).
       */
            this.map = null;
        }
        if (change.hidden && !this.hidden && this.map) {
            this.loggerService.debug('AreaPickerDialogComponent', 'ngOnChanges', 'showing map: ', this.map.getDiv().getAttribute('id'));
        }
    };
    AreaPickerDialogComponent.prototype.readyMap = function () {
        var _this = this;
        var el = document.getElementById(this.mapId);
        if (!el) {
            window.setTimeout(function () { return _this.readyMap(); }, 10);
        }
        else {
            this._prevCircle = this.circle;
            this.map = new google.maps.Map(el, {
                center: new google.maps.LatLng(this.circle.center.lat, this.circle.center.lng),
                mapTypeId: google.maps.MapTypeId.TERRAIN,
                zoom: 7
            });
            var circle_1 = new google.maps.Circle({
                center: new google.maps.LatLng(this.circle.center.lat, this.circle.center.lng),
                editable: true,
                fillColor: '#1111FF',
                fillOpacity: 0.35,
                map: this.map,
                radius: this.circle.radius,
                strokeColor: '#1111FF',
                strokeOpacity: 0.8,
                strokeWeight: 2
            });
            this.map.addListener('click', function (e) {
                circle_1.setCenter(e.latLng);
                _this.map.panTo(e.latLng);
                var ll = circle_1.getCenter();
                var center = { lat: ll.lat(), lng: ll.lng() };
                _this.circle = { center: center, radius: circle_1.getRadius() };
            });
            google.maps.event.addListener(circle_1, 'radius_changed', function () {
                _this.loggerService.debug('radius changed', circle_1.getRadius(), _this.circle.radius);
                var ll = circle_1.getCenter();
                var center = { lat: ll.lat(), lng: ll.lng() };
                _this.circle = { center: center, radius: circle_1.getRadius() };
                _this.loggerService.debug('radius changed to', circle_1.getRadius(), _this.circle.radius);
            });
        }
    };
    AreaPickerDialogComponent.prototype.onOkAction = function (event) {
        this._prevCircle = this.circle;
        this.circleUpdate.emit(this.circle);
    };
    AreaPickerDialogComponent.prototype.onCancelAction = function (event) {
        this.circle = this._prevCircle;
        this.cancel.emit(false);
    };
    return AreaPickerDialogComponent;
}());
export { AreaPickerDialogComponent };
AreaPickerDialogComponent.decorators = [
    { type: Component, args: [{
                changeDetection: ChangeDetectionStrategy.Default,
                selector: 'cw-area-picker-dialog-component',
                styles: [
                    "\n  .g-map {\n    height:500px;\n    width:100%;\n  }"
                ],
                template: "<cw-modal-dialog\n                 [headerText]=\"headerText\"\n                 [hidden]=\"hidden\"\n                 [okEnabled]=\"true\"\n                 (ok)=\"onOkAction($event)\"\n                 (cancel)=\"onCancelAction($event)\">\n  <div *ngIf=\"!hidden\" class=\"cw-dialog-body\">\n    <div id=\"{{mapId}}\" class=\"g-map\" *ngIf=\"!hidden\" > </div>\n  </div>\n</cw-modal-dialog>"
            },] },
];
/** @nocollapse */
AreaPickerDialogComponent.ctorParameters = function () { return [
    { type: GoogleMapService, },
    { type: LoggerService, },
]; };
AreaPickerDialogComponent.propDecorators = {
    'apiKey': [{ type: Input },],
    'headerText': [{ type: Input },],
    'hidden': [{ type: Input },],
    'circle': [{ type: Input },],
    'close': [{ type: Output },],
    'cancel': [{ type: Output },],
    'circleUpdate': [{ type: Output },],
};
//# sourceMappingURL=area-picker-dialog.component.js.map