/**
 * @license
 * Copyright 2017 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 { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, ViewEncapsulation } from "@angular/core";
import { CommandFactory, AaiMessage } from "apicurio-data-models";
import { SourceFormComponent } from "./source-form.base";
import { SelectionService } from "../../_services/selection.service";
import { CommandService } from "../../_services/command.service";
import { DocumentService } from "../../_services/document.service";
import { EditorsService } from "../../_services/editors.service";
import { ApiCatalogService } from "../../_services/api-catalog.service";
import { SchemaUtil } from "../../_util/schema.util";
export class MessageFormComponent extends SourceFormComponent {
    /**
    * C'tor.
    * @param changeDetectorRef
    * @param selectionService
    * @param commandService
    * @param documentService
    * @param editors
    * @param catalog
    */
    constructor(changeDetectorRef, selectionService, commandService, documentService, editors, catalog) {
        super(changeDetectorRef, selectionService, commandService, documentService);
        this.changeDetectorRef = changeDetectorRef;
        this.selectionService = selectionService;
        this.commandService = commandService;
        this.documentService = documentService;
        this.editors = editors;
        this.catalog = catalog;
        this.currentPart = 'payload';
    }
    set message(message) {
        this._message = message;
        this.sourceNode = message;
        this.revertSource();
    }
    get message() {
        return this._message;
    }
    createEmptyNodeForSource() {
        throw new Error("Method not implemented.");
    }
    createReplaceNodeCommand(node) {
        throw new Error("Method not implemented.");
    }
    schemaFormatOptions() {
        return SchemaUtil.schemaFormatOptions;
    }
    isPartActive(part) {
        return this.currentPart === part;
    }
    setActivePart(part) {
        this.currentPart = part;
    }
    changeName(newName) {
        console.info("[MessageSectionComponent] Changing message name to: ", newName);
        let command = CommandFactory.createChangePropertyCommand(this.message, "name", newName);
        this.commandService.emit(command);
    }
    changeTitle(newTitle) {
        console.info("[MessageSectionComponent] Changing message title to: ", newTitle);
        let command = CommandFactory.createChangePropertyCommand(this.message, "title", newTitle);
        this.commandService.emit(command);
    }
    changeSummary(newSummary) {
        console.info("[MessageSectionComponent] Changing message summary to: ", newSummary);
        let command = CommandFactory.createChangePropertyCommand(this.message, "summary", newSummary);
        this.commandService.emit(command);
    }
    changeDescription(newDescription) {
        console.info("[MessageSectionComponent] Changing message description to: ", newDescription);
        let command = CommandFactory.createChangePropertyCommand(this.message, "description", newDescription);
        this.commandService.emit(command);
    }
    changeContentType(newContentType) {
        console.info("[MessageSectionComponent] Changing message contentType to: ", newContentType);
        let command = CommandFactory.createChangePropertyCommand(this.message, "contentType", newContentType);
        this.commandService.emit(command);
    }
    changeSchemaFormat(newSchemaFormat) {
        console.info("[MessageSectionComponent] Changing message schemaFormat to: ", newSchemaFormat);
        let command = CommandFactory.createChangePropertyCommand(this.message, "schemaFormat", newSchemaFormat);
        this.commandService.emit(command);
    }
    enableSourceMode() {
        this.sourceNode = this.message;
        super.enableSourceMode();
    }
    tagDefs() {
        return () => {
            if (this.message.ownerDocument().tags && this.message.ownerDocument().tags.length > 0) {
                let tagDefs = this.message.ownerDocument().tags.map(tagDef => tagDef.name);
                tagDefs.sort();
                return tagDefs;
            }
            else {
                return [];
            }
        };
    }
}
MessageFormComponent.decorators = [
    { type: Component, args: [{
                selector: "message-form",
                template: "<div class=\"detail-title\">\n    <div message-item class=\"detail-label\" [message]=\"message\"></div>\n    <div class=\"detail-actions\">\n\n    </div>\n</div>\n<div class=\"detail-tabs\">\n    <ul class=\"nav nav-tabs nav-tabs-pf\">\n        <li [class.active]=\"isDesignMode()\" [class.disabled]=\"canSaveSource()\"><a (click)=\"enableDesignMode()\">Design</a></li>\n        <li [class.active]=\"isSourceMode()\"><a (click)=\"enableSourceMode()\">Source</a></li>\n    </ul>\n</div>\n\n<!-- Source Mode -->\n<div class=\"detail-actionbar\" *ngIf=\"isSourceMode()\">\n    <button class=\"btn btn-default btn-xs\" [disabled]=\"!canFormatSource()\" (click)=\"formatSource()\"><span class=\"fa fa-fw fa-indent\"></span> <span>Format</span></button>\n    <button class=\"btn btn-default btn-xs\" [disabled]=\"!canRevertSource()\" (click)=\"revertSource()\"><span class=\"fa fa-fw fa-undo\"></span> <span>Revert</span></button>\n    <button class=\"btn btn-primary btn-xs\" [disabled]=\"!canSaveSource()\" (click)=\"saveSource()\"><span class=\"pficon pficon-save\"></span> <span>Save</span></button>\n    <button class=\"btn btn-default btn-xs\" [disabled]=\"!canToggleSourceFormat()\" (click)=\"toggleSourceFormat()\">\n        <span class=\"fa fa-fw fa-code\"></span>\n        <span *ngIf=\"isSourceFormatYaml()\">As JSON</span>\n        <span *ngIf=\"isSourceFormatJson()\">As YAML</span>\n    </button>\n</div>\n<div class=\"detail-content\" style=\"position: relative\" *ngIf=\"isSourceMode()\">\n    <code-editor #sourceEditor\n                 [(text)]=\"source\"\n                 [theme]=\"sourceEditorTheme()\"\n                 [mode]=\"sourceEditorMode()\"\n                 [debounceTime]=\"250\"\n                 [editorStyle]=\"{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, 'margin-top': '1px' }\"></code-editor>\n</div>\n\n<!-- Design Mode -->\n<div class=\"detail-content\" *ngIf=\"isDesignMode()\">\n\n    <div class=\"api-path-detail\">\n        <div class=\"tab-content\">\n            <div role=\"tabpanel\" class=\"tab-pane active\" id=\"apipath-2-get\">\n\n                <div class=\"half-section\" >\n\n                    <!-- Name -->\n                    <div class=\"section-field-label\">\n                        <validation-problem [model]=\"message\" [shallow]=\"true\" [property]=\"'name'\"></validation-problem>\n                        <span>Name</span>\n                    </div>\n                    <div class=\"section-field name\">\n                        <pf-inline-text-editor [value]=\"message.name\" [noValueMessage]=\"'No name.'\"\n                                               [labelClass]=\"'api-version'\"\n                                               [inputClass]=\"'api-item-editor api-operationId-editor api-item-operationId'\"\n                                               [baseNode]=\"message\" nodePath=\"name\"\n                                               (onChange)=\"changeName($event)\"></pf-inline-text-editor>\n                    </div>\n\n                    <!-- Title -->\n                    <div class=\"section-field-label\">\n                        <validation-problem [model]=\"message\" [shallow]=\"true\" [property]=\"'title'\"></validation-problem>\n                        <span>Title</span>\n                    </div>\n                    <div class=\"section-field title\">\n                        <pf-inline-text-editor [value]=\"message.title\" [noValueMessage]=\"'No title.'\"\n                                               [labelClass]=\"'api-version'\"\n                                               [inputClass]=\"'api-item-editor api-operationId-editor api-item-operationId'\"\n                                               [baseNode]=\"message\" nodePath=\"title\"\n                                               (onChange)=\"changeTitle($event)\"></pf-inline-text-editor>\n                    </div>\n\n                    <!-- Summary -->\n                    <div class=\"section-field-label\">\n                        <validation-problem [model]=\"message\" [shallow]=\"true\" [property]=\"'summary'\"></validation-problem>\n                        <span>Summary</span>\n                    </div>\n                    <div class=\"section-field summary\">\n                        <pf-inline-text-editor [value]=\"message.summary\" [noValueMessage]=\"'No summary.'\"\n                                               [labelClass]=\"'api-version'\"\n                                               [inputClass]=\"'api-item-editor api-operationId-editor api-item-operationId'\"\n                                               [baseNode]=\"message\" nodePath=\"summary\"\n                                               (onChange)=\"changeSummary($event)\"></pf-inline-text-editor>\n                    </div>\n\n                    <!-- Description -->\n                    <div class=\"section-field-label\">\n                        <validation-problem [model]=\"message\" [shallow]=\"true\" [property]=\"'description'\"></validation-problem>\n                        <span>Description</span>\n                    </div>\n                    <div class=\"section-field description\">\n                        <inline-markdown-editor [value]=\"message.description\" [noValueMessage]=\"'No description.'\"\n                                                [labelClass]=\"'api-item-editor api-description-editor operation-description api-item-description'\"\n                                                [inputClass]=\"'api-item-description'\"\n                                                [formClass]=\"'api-description-editor-form'\"\n                                                [baseNode]=\"message\" nodePath=\"description\"\n                                                (onChange)=\"changeDescription($event)\"></inline-markdown-editor>\n                    </div>\n\n                </div>\n\n                <div class=\"half-section right\">\n                    <!-- Correlation ID -->\n                    <div class=\"section-field-label\">\n                        <validation-problem [model]=\"message\" [shallow]=\"true\" [property]=\"'name'\"></validation-problem>\n                        <span>Correlation ID</span>\n                    </div>\n                    <div class=\"section-field name\">\n                        <pf-inline-text-editor [value]=\"message.name\" [noValueMessage]=\"'No name.'\"\n                                               [labelClass]=\"'api-version'\"\n                                               [inputClass]=\"'api-item-editor api-operationId-editor api-item-operationId'\"\n                                               [baseNode]=\"message\" nodePath=\"name\"\n                                               (onChange)=\"changeName($event)\"></pf-inline-text-editor>\n                    </div>\n\n                    <!-- Content Type -->\n                    <div class=\"section-field-label\">\n                        <validation-problem [model]=\"message\" [shallow]=\"true\" [property]=\"'contentType'\"></validation-problem>\n                        <span>Content Type</span>\n                    </div>\n                    <div class=\"section-field contentType\">\n                        <pf-inline-text-editor [value]=\"message.contentType\" [noValueMessage]=\"'No content type. Default will apply.'\"\n                                               [labelClass]=\"'api-version'\"\n                                               [inputClass]=\"'api-item-editor api-operationId-editor api-item-operationId'\"\n                                               [baseNode]=\"message\" nodePath=\"contentType\"\n                                               (onChange)=\"changeContentType($event)\"></pf-inline-text-editor>\n                    </div>\n\n                    <!-- Schema Format -->\n                    <div class=\"section-field-label\">\n                        <validation-problem [model]=\"message\" [shallow]=\"true\" [property]=\"'schemaFormat'\"></validation-problem>\n                        <span>Schema Format</span>\n                    </div>\n                    <div class=\"section-field schemaFormat\">\n                        <drop-down [value]=\"message.schemaFormat\"\n                                   [options]=\"schemaFormatOptions()\"\n                                   (onValueChange)=\"changeSchemaFormat($event)\"\n                                   noSelectionLabel=\"No Schema Format\"></drop-down>\n                    </div>\n                </div>\n\n                <div class=\"section-field-label\" >\n                    <validation-problem [model]=\"message\" [shallow]=\"true\" [property]=\"'payload'\"></validation-problem>\n                    <span>Content</span>\n                </div>\n                <div class=\"parts-tabs\" >\n                    <div class=\"tab\" [class.active]=\"isPartActive('payload')\">\n                        <a (click)=\"setActivePart('payload')\">\n                            <span>Payload</span>\n                        </a>\n                    </div>\n                    <div class=\"tab\" [class.active]=\"isPartActive('headers')\">\n                        <a (click)=\"setActivePart('headers')\">\n                            <span>Headers</span>\n                        </a>\n                    </div>\n                </div>\n                <div class=\"parts-tab-content\" >\n                    <payload-tab [message]=\"message\" *ngIf=\"isPartActive('payload')\"></payload-tab>\n                    <headers-tab [message]=\"message\" *ngIf=\"isPartActive('headers')\"></headers-tab>\n                </div>\n\n\n            </div>\n        </div>\n    </div>\n</div>\n",
                encapsulation: ViewEncapsulation.None,
                changeDetection: ChangeDetectionStrategy.OnPush,
                styles: [".half-section{width:50%;display:inline-block}.half-section.right{float:right}.parts-tabs{display:flex;width:100%;margin-top:5px}.parts-tabs .tab{position:relative;padding:5px 10px;background-color:#efefef;border:1px solid transparent;margin-right:5px}.parts-tabs .tab:hover{background-color:#e4e4e4}.parts-tabs .tab.active{border-color:#ddd;border-bottom:1px solid transparent;background-color:#fff;margin-bottom:-1px}.parts-tabs .tab:first-child{border-left:1px solid transparent}.parts-tabs .tab:first-child.active{border-left:1px solid #ddd}.parts-tabs .tab>a{cursor:pointer;text-decoration:none;color:#666}.parts-tabs .tab.active>a{cursor:default}.parts-tabs .tab.statusCode.success>a{color:green}.parts-tabs .tab.statusCode.redirect>a{color:#00f}.parts-tabs .tab.statusCode.problem>a{color:orange}.parts-tabs .tab.statusCode.error>a{color:red}.parts-tabs .tab .validation-aggregate{position:absolute;right:-3px;top:-7px}.parts-tabs .actions{flex-grow:1;text-align:right;padding-right:10px;margin-top:5px}.parts-tab-content{border:1px solid #ddd;background-color:#fff;padding:10px}"]
            },] }
];
MessageFormComponent.ctorParameters = () => [
    { type: ChangeDetectorRef },
    { type: SelectionService },
    { type: CommandService },
    { type: DocumentService },
    { type: EditorsService },
    { type: ApiCatalogService }
];
MessageFormComponent.propDecorators = {
    message: [{ type: Input }]
};
//# sourceMappingURL=data:application/json;base64, 