import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
import { DecimalPipe } from '@angular/common';
import { LoggerService } from 'dotcms-js/dotcms-js';
var UNITS = {
    km: {
        km: function (len) { return len; },
        m: function (len) { return len * 1000; },
        mi: function (len) { return len / 1.60934; }
    },
    m: {
        km: function (len) { return len / 1000; },
        m: function (len) { return len; },
        mi: function (len) { return len / 1609.34; }
    },
    mi: {
        km: function (len) { return len / 1.60934; },
        m: function (len) { return len * 1609.34; },
        mi: function (len) { return len; }
    }
};
// tslint:disable-next-line:no-unused-variable
var I8N_BASE = 'api.sites.ruleengine';
var VisitorsLocationComponent = (function () {
    function VisitorsLocationComponent(decimalPipe, loggerService) {
        this.decimalPipe = decimalPipe;
        this.loggerService = loggerService;
        this.circle = { center: { lat: 38.89, lng: -77.04 }, radius: 10000 };
        this.fromLabel = 'of';
        this.changedHook = 0;
        this.preferredUnit = 'm';
        this.areaChange = new EventEmitter(false);
        this.comparisonChange = new EventEmitter(false);
        this.showingMap = false;
        loggerService.info('VisitorsLocationComponent', 'constructor');
    }
    VisitorsLocationComponent.prototype.ngOnChanges = function (change) {
        this.loggerService.info('VisitorsLocationComponent', 'ngOnChanges', change);
        if (change.comparisonOptions) {
            this.comparisonDropdown = {
                control: this.comparisonControl,
                name: 'comparison',
                options: this.comparisonOptions,
                placeholder: '',
                value: this.comparisonValue
            };
        }
    };
    VisitorsLocationComponent.prototype.getLatLong = function () {
        var lat = this.circle.center.lat;
        var lng = this.circle.center.lng;
        var latStr = this.decimalPipe.transform(parseFloat(lat + ''), '1.6-6');
        var lngStr = this.decimalPipe.transform(parseFloat(lng + ''), '1.6-6');
        return latStr + ', ' + lngStr;
    };
    VisitorsLocationComponent.prototype.getRadiusInPreferredUnit = function () {
        var r = this.circle.radius;
        this.loggerService.info('VisitorsLocationComponent', 'getRadiusInPreferredUnit', r);
        return UNITS.m[this.preferredUnit](r);
    };
    VisitorsLocationComponent.prototype.toggleMap = function () {
        this.showingMap = !this.showingMap;
    };
    VisitorsLocationComponent.prototype.onUpdate = function (circle) {
        this.showingMap = false;
        this.areaChange.emit(circle);
    };
    return VisitorsLocationComponent;
}());
export { VisitorsLocationComponent };
VisitorsLocationComponent.decorators = [
    { type: Component, args: [{
                changeDetection: ChangeDetectionStrategy.OnPush,
                providers: [DecimalPipe],
                selector: 'cw-visitors-location-component',
                template: "<div flex layout=\"row\" class=\"cw-visitors-location cw-condition-component-body\" *ngIf=\"comparisonDropdown != null\">\n  <cw-input-dropdown flex\n                     class=\"cw-input\"\n                     [formControl]=\"comparisonDropdown.control\"\n                     [required]=\"true\"\n                     [class.cw-comparator-selector]=\"true\"\n                     (onDropDownChange)=\"comparisonChange.emit($event)\"\n                     placeholder=\"{{comparisonDropdown.placeholder}}\">\n    <cw-input-option *ngFor=\"let opt of comparisonDropdown.options\"\n                     [value]=\"opt.value\"\n                     [label]=\"opt.label | async\"\n                     icon=\"{{opt.icon}}\"></cw-input-option>\n  </cw-input-dropdown>\n  <div flex=\"15\" layout-fill layout=\"row\" layout-align=\"start center\" class=\"cw-input\">\n    <cw-input-text\n        flex\n        class=\"cw-latLong\"\n        [type]=\"text\"\n        [value]=\"getRadiusInPreferredUnit() | number:'1.0-0'\"\n        [readonly]=\"true\">\n    </cw-input-text>\n    <label class=\"cw-input-label-right\">{{preferredUnit}}</label>\n  </div>\n  <div flex layout-fill layout=\"row\" layout-align=\"start center\" class=\"cw-input\">\n    <label class=\"cw-input-label-left\">{{fromLabel}}</label>\n    <cw-input-text\n        flex\n        class=\"cw-radius\"\n        [type]=\"text\"\n        [value]=\"getLatLong()\"\n        [readonly]=\"true\">\n    </cw-input-text>\n  </div>\n  <div flex layout=\"column\" class=\"cw-input cw-last\">\n    <button class=\"ui button cw-button-add\" aria-label=\"Show Map\" (click)=\"toggleMap()\">\n      <i class=\"plus icon\" aria-hidden=\"true\"></i>Show Map\n    </button>\n  </div>\n</div>\n<cw-area-picker-dialog-component\n    [headerText]=\"'Select an area'\"\n    [hidden]=\"!showingMap\"\n    [apiKey]=\"apiKey\"\n    [circle]=\"circle\"\n    (circleUpdate)=\"onUpdate($event)\"\n    (cancel)=\"showingMap = !showingMap\"\n></cw-area-picker-dialog-component>\n"
            },] },
];
/** @nocollapse */
VisitorsLocationComponent.ctorParameters = function () { return [
    { type: DecimalPipe, },
    { type: LoggerService, },
]; };
VisitorsLocationComponent.propDecorators = {
    'circle': [{ type: Input },],
    'comparisonValue': [{ type: Input },],
    'comparisonControl': [{ type: Input },],
    'comparisonOptions': [{ type: Input },],
    'fromLabel': [{ type: Input },],
    'changedHook': [{ type: Input },],
    'preferredUnit': [{ type: Input },],
    'areaChange': [{ type: Output },],
    'comparisonChange': [{ type: Output },],
};
//# sourceMappingURL=visitors-location.component.js.map