"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var core_1 = require('@angular/core');
var query_service_1 = require('./query.service');
var QueryAppComponent = (function () {
    function QueryAppComponent(_queryService) {
        var _this = this;
        this._queryService = _queryService;
        console.debug("QueryAppComponent constructor!");
        var newState = this.getStateStringFromUrlFragment();
        // initialize query service using external state
        this._queryService.setup(newState);
        this.queryStepList = [];
        // set state in queryStepList
        if (this._queryService.state.getNumSteps() > 0) {
            // use state from URL
            this._queryService.state.steps
                .forEach(function (elem) { return _this.queryStepList.push('param'); });
        }
        else {
            // new empty state
            this.addQueryStep();
        }
    }
    QueryAppComponent.prototype.getStateStringFromUrlFragment = function () {
        var hash = window.location.hash;
        if (hash) {
            var fragb = hash.substr(1);
            // base64 decode
            var fragu = window.atob(fragb);
            // url decode
            var frag = decodeURIComponent(fragu);
            // reset hash
            window.location.hash = '';
            return frag;
        }
        return null;
    };
    QueryAppComponent.prototype.getUrlFragmentFromState = function () {
        var stateStr = this._queryService.state.getStateAsString();
        var frag = '#';
        if (stateStr.length > 0) {
            var fragu = encodeURIComponent(stateStr);
            var fragb = window.btoa(fragu);
            frag += fragb;
        }
        return frag;
    };
    QueryAppComponent.prototype.addQueryStep = function () {
        this.queryStepList.push('step');
    };
    QueryAppComponent.prototype.removeQueryStep = function () {
        this.queryStepList.pop();
        this._queryService.state.steps.pop();
    };
    QueryAppComponent.prototype.resetQuery = function () {
        // reset everything by reloading
        window.location.reload();
    };
    QueryAppComponent.prototype.showQueryUrl = function () {
        var url = window.location.href;
        url = url.replace(/#.*/, '') + this.getUrlFragmentFromState();
        window.prompt("URL to current query state", url);
    };
    QueryAppComponent.prototype.onQueryChanged = function (event) {
        console.debug("app.onquerychanged! event=", event);
        this._queryService.runQuery();
        this.queryState = this._queryService.getState();
    };
    QueryAppComponent = __decorate([
        core_1.Component({
            selector: 'query-app',
            template: "\n    <div class=\"container\">    \n        <h1>ISMI-Lab Query Builder</h1>\n    </div>\n    <div class=\"container\">    \n        <div>Select a query step:</div>\n        <query-select *ngFor=\"let step of queryStepList; let i=index;\"\n            [queryStep]=\"step\" [index]=\"i\" \n            (queryChanged)=\"onQueryChanged($event)\"></query-select>\n        <div>\n          <button (click)=\"addQueryStep()\">add step</button>\n          <button (click)=\"removeQueryStep()\">remove step</button>\n          <button (click)=\"resetQuery()\">reset query</button>\n          <button (click)=\"showQueryUrl()\">get query url</button>\n        </div>\n    </div>\n    <div class=\"container\">\n        <query-result *ngIf=\"queryState?.results\"\n            [resultInfo]=\"queryState.resultInfo\"\n            [queryState]=\"queryState\">\n        </query-result>\n    </div>\n        ",
        }), 
        __metadata('design:paramtypes', [query_service_1.QueryService])
    ], QueryAppComponent);
    return QueryAppComponent;
}());
exports.QueryAppComponent = QueryAppComponent;
//# sourceMappingURL=query-app.component.js.map