/**
 * @license
 * Copyright 2019 JBoss Inc
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import { Component, EventEmitter, Input, Output, ViewEncapsulation } from "@angular/core";
import { ApiDefinition } from "../../../../models/api.model";
import { CodeEditorMode, CodeEditorTheme } from "../../../../components/common/code-editor.component";
/**
 * Base class for text editors like the GraphQL editor.
 */
export class TextEditorComponent {
}
export class GraphQLEditorComponent extends TextEditorComponent {
    constructor() {
        super(...arguments);
        this.textChanged = new EventEmitter();
        this.sourceOriginal = "";
        this.sourceValue = "";
        this.sourceIsValid = true;
    }
    /**
     * Called when the editor is initialized by angular.
     */
    ngOnInit() {
    }
    /**
     * Called when angular destroys the editor component.
     */
    ngOnDestroy() {
    }
    /**
     * Called when the @Input changes.
     * @param changes
     */
    ngOnChanges(changes) {
        if (changes["api"]) {
            this.sourceValue = this.api.spec;
            this.sourceOriginal = this.sourceValue;
        }
    }
    sourceTheme() {
        return CodeEditorTheme.Light;
    }
    sourceMode() {
        return CodeEditorMode.GRAPHQL;
    }
    isDirty() {
        return this.sourceOriginal != this.sourceValue;
    }
    /**
     * Called whenever the user presses a key.
     * @param event
     */
    onGlobalKeyDown(event) {
    }
    /**
     * Called to get the current value in the editor.
     * @return
     */
    getValue() {
        let apiDef = new ApiDefinition();
        apiDef.id = this.api.id;
        apiDef.createdBy = this.api.createdBy;
        apiDef.createdOn = this.api.createdOn;
        apiDef.description = this.api.description;
        apiDef.name = this.api.name;
        apiDef.tags = this.api.tags;
        apiDef.spec = this.sourceValue;
        return apiDef;
    }
    /**
     * Called when the user clicks save.
     */
    saveSource() {
        console.info("[GraphQL Editor] Saving source code changes");
        try {
            this.textChanged.emit(this.sourceValue);
        }
        catch (e) {
            console.warn("[GraphQL Editor] Error saving source changes: ", e);
        }
    }
    /**
     * Called when the user clicks revert.
     */
    revertSource() {
        console.info("[GraphQL Editor] Reverting source code changes");
        this.sourceValue = this.sourceOriginal;
    }
    /**
     * Validates that the current source text is valid.
     */
    validate() {
        try {
            // TODO validate the GraphQL content
            this.sourceIsValid = true;
        }
        catch (e) {
            this.sourceIsValid = false;
        }
    }
}
GraphQLEditorComponent.decorators = [
    { type: Component, args: [{
                selector: "graphql-editor",
                template: "<div (window:keydown)=\"onGlobalKeyDown($event)\" class=\"graphql-editor\">\n\n    <div class=\"editor-toolbar\">\n        <div class=\"title\">Editing API: <em>{{ api.name }}</em></div>\n        <div class=\"actions\">\n            <button [disabled]=\"!sourceIsValid || !isDirty()\" (click)=\"saveSource()\" class=\"btn btn-primary\"><span class=\"pficon pficon-save\"></span> Save Changes</button>\n            <button [disabled]=\"!isDirty()\" (click)=\"revertSource()\" class=\"btn btn-default\"><span class=\"icon fa fa-ban\"></span> Revert Changes</button>\n        </div>\n    </div>\n\n    <div class=\"editor-source\">\n        <code-editor [theme]=\"sourceTheme()\" #codeEditor\n                     [mode]=\"sourceMode()\"\n                     [debounceTime]=\"300\"\n                     [(text)]=\"sourceValue\"\n                     (textChange)=\"validate()\"\n                     [editorStyle]=\"{ position: 'absolute', top: '0', bottom: '0', right: '0', left: '0', fontSize: '15px' }\"></code-editor>\n    </div>\n\n</div>\n",
                encapsulation: ViewEncapsulation.None,
                styles: [".graphql-editor .editor-toolbar{width:100%;height:42px;display:flex;flex-direction:row;flex-wrap:nowrap}.graphql-editor .editor-toolbar .title{flex-grow:1;height:42px;line-height:42px;font-size:18px;padding-left:10px}.graphql-editor .editor-toolbar .title>em{font-weight:700}.graphql-editor .editor-toolbar .actions{height:42px;line-height:42px;flex-grow:0}.graphql-editor .editor-toolbar .actions>.btn{margin-right:10px}.graphql-editor .dropdown.empty>button.btn>span{color:#bbb}.graphql-editor button.empty,.graphql-editor div.empty,.graphql-editor span.empty{color:#bbb}.graphql-editor span.server-variable{color:#ff6a7c}.modal.in .modal-dialog{transform:none;margin-top:50px}.modal.fade .modal-dialog{transform:none;transition:margin-top .3s ease-out}.modal-dialog{width:650px;margin-top:0;margin-left:auto}.graphql-editor span.server-variable{font-weight:400}.graphql-editor div.tab-panel{border-top:none;border-color:#ddd}.graphql-editor .nav-tabs>li>a{cursor:pointer}.graphql-editor .nav-tabs>li>a.active{cursor:default}.graphql-editor .nav-tabs>li>a>button{visibility:hidden}.graphql-editor .nav-tabs>li>a:hover>button{visibility:visible}.graphql-editor .editor-problem-drawer{position:absolute;z-index:200;top:41px;right:0;width:320px;bottom:0}.graphql-editor .editor-problem-drawer .drawer-pf{height:100%;width:360px}.graphql-editor .editor-problem-drawer .drawer-pf .panel-body{padding:0}.graphql-editor .editor-problem-drawer .drawer-pf .drawer-pf-notification:hover{background-color:#efefef}.graphql-editor .editor-problem-drawer .drawer-pf .drawer-pf-notification-message{line-height:16px;font-weight:600;margin-bottom:2px}.graphql-editor .editor-problem-drawer .drawer-pf .drawer-pf-notification-info .explanation{line-height:15px;font-size:13px}.graphql-editor .editor-problem-drawer .drawer-pf .drawer-pf-notification-info a{cursor:pointer}.api-details table td.icons{width:1%;white-space:nowrap}.graphql-editor .modal-header{background-color:#39a5dc;color:#fff}.graphql-editor .modal-header button.close{color:#fff}.graphql-editor .modal-footer{border-top:1px solid #ddd;background-color:#efefef}.graphql-editor .modal-dialog{margin-top:50px}.graphql-editor form input.ng-invalid.ng-touched{border-color:red}.graphql-editor .center-text{text-align:center}.graphql-editor .dropdown-menu>li>a{cursor:pointer}.graphql-editor .dropdown-menu{font-size:13px}.graphql-editor div.notice-of-required{margin-top:15px;font-size:11px}.graphql-editor div.notice-of-required .required-icon{color:red}.graphql-editor div.modal-notice-of-required{margin-bottom:-12px;padding-left:15px}.graphql-editor .form-group .control-label{white-space:nowrap}.graphql-editor .form-group .control-label.required:after{color:red;content:\"*\"}.graphql-editor .form-group .form-error-message.error{color:red}.graphql-editor span.validation-aggregate>a>.fa-exclamation-circle{color:#0088ce;cursor:pointer;font-size:14px}.graphql-editor span.validation-aggregate>a>.fa-exclamation-circle:hover{color:#00659c}.graphql-editor .validation-problem-icon{cursor:pointer;margin-right:4px}.graphql-editor .validation-problem-icon:hover{filter:brightness(125%)}.graphql-editor h2 .validation-problem-icon{font-size:15px}.graphql-editor .validation-aggregate .validation-aggregate-panel,.graphql-editor .validation-problems-panel{position:fixed;margin:0;border:1px solid #bbb;box-shadow:2px 2px 3px rgba(0,0,0,.1);z-index:150;background:#fff;max-width:425px;max-height:125px;cursor:default;overflow-y:auto;color:#4d5258;line-height:18px;padding:10px 14px;font-size:12px;font-style:normal;font-weight:400}.graphql-editor .validation-aggregate .validation-aggregate-panel .problem,.graphql-editor .validation-problems-panel .problem{width:100%;text-align:left;margin-top:3px;margin-bottom:3px;overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}.graphql-editor .validation-aggregate .validation-aggregate-panel .problem .fa,.graphql-editor .validation-problems-panel .problem .fa{margin-right:3px}.graphql-editor .inline-editor-label{cursor:pointer}.graphql-editor .inline-editor-label .fa{visibility:hidden;color:#0088ce}.graphql-editor .inline-editor-label .fa:hover{color:#00659c}.graphql-editor .inline-editor-label:hover .fa{visibility:visible}.graphql-editor .dropdown-label{margin-right:3px}.graphql-editor .dropdowns-label{margin-left:3px;margin-right:3px}.graphql-editor .editor-source{position:absolute;top:42px;left:0;right:0;bottom:0;display:flex;flex-direction:column;flex:1}"]
            },] }
];
GraphQLEditorComponent.propDecorators = {
    api: [{ type: Input }],
    textChanged: [{ type: Output }]
};
//# sourceMappingURL=data:application/json;base64, 