import { __awaiter } from "tslib";
import { Component, ChangeDetectionStrategy, ChangeDetectorRef, ElementRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { RelationsNodeBase, RelationNodeInputSAComponent, RelationNodeOutputSAComponent, RelationsNodeHeaderSAComponent } from '@anglr/dynamic/relations-editor';
import { TitledDialogService } from '@anglr/common/material';
import { FirstUppercaseLocalizeSAPipe } from '@anglr/common';
import { FormModelBuilder } from '@anglr/common/forms';
import { extend } from '@jscrpt/common';
import { lastValueFrom } from '@jscrpt/common/rxjs';
import { ConfigureRestParameterSAComponent } from '../misc/components';
import { RestRelationsOptionsModel } from './restNode.model';
import * as i0 from "@angular/core";
import * as i1 from "@anglr/common/material";
import * as i2 from "@anglr/common/forms";
import * as i3 from "@angular/common";
import * as i4 from "@angular/forms";
/**
 * Relations node component for rest
 */
export class RestNodeSAComponent extends RelationsNodeBase {
    //######################### protected properties - template bindings #########################
    /**
     * Gets rest parameters
     */
    get params() {
        var _a, _b;
        var _c, _d;
        if (!this.metadata) {
            return [];
        }
        (_a = (_c = this.metadata).relationsOptions) !== null && _a !== void 0 ? _a : (_c.relationsOptions = {
            params: [],
            url: null,
            method: null,
            runImmediately: true,
        });
        return ((_b = (_d = this.metadata.relationsOptions).params) !== null && _b !== void 0 ? _b : (_d.params = []));
    }
    //######################### constructor #########################
    constructor(changeDetector, element, dialog, formModelBuilder) {
        super(changeDetector, element);
        this.dialog = dialog;
        this.form = formModelBuilder.build(new RestRelationsOptionsModel(null));
        this.form.valueChanges.subscribe(value => {
            var _a;
            if ((_a = this.metadata) === null || _a === void 0 ? void 0 : _a.relationsOptions) {
                extend(this.metadata.relationsOptions, value);
                this.history.getNewState();
            }
        });
    }
    //######################### protected methods - template bindings #########################
    /**
     * Adds new parameter
     */
    addParam() {
        return __awaiter(this, void 0, void 0, function* () {
            const param = {
                configurable: false,
                name: null,
                type: 'PATH',
                value: null,
            };
            if (yield this.configureRestParameter(param)) {
                this.params.push(param);
                this.history.getNewState();
            }
        });
    }
    /**
     * Removes parameter
     * @param param - Param to be removed
     */
    removeParam(param) {
        const index = this.params.indexOf(param);
        if (index >= 0) {
            this.params.splice(index, 1);
            this.history.getNewState();
        }
    }
    /**
     * Configures rest parameter
     * @param param - Parameter to be configured
     */
    configureRestParameter(param) {
        return __awaiter(this, void 0, void 0, function* () {
            const original = JSON.parse(JSON.stringify(param));
            const result = yield lastValueFrom(this.dialog.open(ConfigureRestParameterSAComponent, {
                title: 'configure rest parameter',
                width: '60vw',
                data: {
                    parameter: param,
                    hasBody: param.type === 'BODY' ? false : !!this.params.find(itm => itm.type === 'BODY')
                }
            }).afterClosed());
            if (!result) {
                extend(param, original);
            }
            else {
                this.history.getNewState();
            }
            return result !== null && result !== void 0 ? result : false;
        });
    }
    //######################### protected methods - overrides #########################
    /**
     * @inheritdoc
     */
    metadataSet() {
        var _a;
        if (!((_a = this.metadata) === null || _a === void 0 ? void 0 : _a.relationsOptions)) {
            return;
        }
        this.form.patchValue(this.metadata.relationsOptions);
    }
}
RestNodeSAComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: RestNodeSAComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.TitledDialogService }, { token: i2.FormModelBuilder }], target: i0.ɵɵFactoryTarget.Component });
RestNodeSAComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: RestNodeSAComponent, isStandalone: true, selector: "rest-node", providers: [
        FormModelBuilder,
    ], usesInheritance: true, ngImport: i0, template: "<relations-node-header [parent]=\"this\" [destroySubject]=\"destroySubject\" [name]=\"'rest'|firstUppercaseLocalize\"></relations-node-header>\n\n<div class=\"node-content\" [formGroup]=\"form\">\n    <div class=\"dynamic-form-group dynamic-margin-bottom-extra-small\">\n        <label class=\"dynamic-control-label dynamic-text-uppercase\">{{'url'|firstUppercaseLocalize}}</label>\n        <input type=\"text\" class=\"dynamic-form-control\" formControlName=\"url\">\n    </div>\n    \n    <div class=\"dynamic-form-group dynamic-margin-bottom-extra-small\">\n        <label class=\"dynamic-control-label dynamic-text-uppercase\">{{'method'|firstUppercaseLocalize}}</label>\n        \n        <select class=\"dynamic-form-control\" formControlName=\"method\">\n            <option value=\"GET\">GET</option>\n            <option value=\"POST\">POST</option>\n            <option value=\"PUT\">PUT</option>\n            <option value=\"PATCH\">PATCH</option>\n            <option value=\"DELETE\">DELETE</option>\n        </select>\n    </div>\n\n    <div class=\"dynamic-form-group dynamic-margin-bottom-extra-small\">\n        <label class=\"dynamic-control-label dynamic-text-uppercase\">{{'run immediately'|firstUppercaseLocalize}}</label>\n        <input type=\"checkbox\" class=\"dynamic-form-control\" formControlName=\"runImmediately\">\n    </div>\n\n    <div class=\"inputs-outputs\">\n        <div class=\"inputs\">\n            <ng-container *ngFor=\"let param of params\">\n                <ng-container [ngSwitch]=\"param.type\">\n                    <div class=\"input\" *ngSwitchCase=\"'BODY'\">\n                        <relation-node-input *ngIf=\"param.configurable\" [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" [name]=\"param.name\" [parent]=\"this\"></relation-node-input>\n\n                        <div class=\"dynamic-flex-row\">\n                            <div>BODY: {{param.name}}</div>\n\n                            <button type=\"button\" class=\"dynamic-btn-icon dynamic-margin-horizontal-extra-small\" (click)=\"$event.preventDefault(); $event.stopPropagation(); configureRestParameter(param)\">\n                                <span class=\"fas fa-cog\"></span>\n                            </button>\n\n                            <button type=\"button\" class=\"dynamic-btn-icon\" (click)=\"$event.preventDefault(); $event.stopPropagation(); removeParam(param)\">\n                                <span class=\"fas fa-times\"></span>\n                            </button>\n                        </div>\n                    </div>\n\n                    <div class=\"input\" *ngSwitchCase=\"'PATH'\">\n                        <relation-node-input *ngIf=\"param.configurable\" [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" [name]=\"param.name\" [parent]=\"this\"></relation-node-input>\n\n                        <div class=\"dynamic-flex-row\">\n                            <div>PATH: {{param.name}}</div>\n\n                            <button type=\"button\" class=\"dynamic-btn-icon dynamic-margin-horizontal-extra-small\" (click)=\"configureRestParameter(param)\">\n                                <span class=\"fas fa-cog\"></span>\n                            </button>\n\n                            <button type=\"button\" class=\"dynamic-btn-icon\" (click)=\"$event.preventDefault(); $event.stopPropagation(); removeParam(param)\">\n                                <span class=\"fas fa-times\"></span>\n                            </button>\n                        </div>\n                    </div>\n\n                    <div class=\"input\" *ngSwitchCase=\"'QUERY'\">\n                        <relation-node-input *ngIf=\"param.configurable\" [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" [name]=\"param.name\" [parent]=\"this\"></relation-node-input>\n\n                        <div class=\"dynamic-flex-row\">\n                            <div>QUERY: {{param.name}}</div>\n\n                            <button type=\"button\" class=\"dynamic-btn-icon dynamic-margin-horizontal-extra-small\" (click)=\"configureRestParameter(param)\">\n                                <span class=\"fas fa-cog\"></span>\n                            </button>\n\n                            <button type=\"button\" class=\"dynamic-btn-icon\" (click)=\"$event.preventDefault(); $event.stopPropagation(); removeParam(param)\">\n                                <span class=\"fas fa-times\"></span>\n                            </button>\n                        </div>\n                    </div>\n\n                    <div class=\"input\" *ngSwitchCase=\"'QUERY OBJECT'\">\n                        <relation-node-input *ngIf=\"param.configurable\" [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" [name]=\"param.name\" [parent]=\"this\"></relation-node-input>\n\n                        <div class=\"dynamic-flex-row\">\n                            <div>QUERY OBJECT: {{param.name}}</div>\n\n                            <button type=\"button\" class=\"dynamic-btn-icon dynamic-margin-horizontal-extra-small\" (click)=\"configureRestParameter(param)\">\n                                <span class=\"fas fa-cog\"></span>\n                            </button>\n\n                            <button type=\"button\" class=\"dynamic-btn-icon\" (click)=\"$event.preventDefault(); $event.stopPropagation(); removeParam(param)\">\n                                <span class=\"fas fa-times\"></span>\n                            </button>\n                        </div>\n                    </div>\n\n                    <div class=\"input\" *ngSwitchCase=\"'HEADER'\">\n                        <relation-node-input *ngIf=\"param.configurable\" [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" [name]=\"param.name\" [parent]=\"this\"></relation-node-input>\n\n                        <div class=\"dynamic-flex-row\">\n                            <div>HEADER: {{param.name}}</div>\n\n                            <button type=\"button\" class=\"dynamic-btn-icon dynamic-margin-horizontal-extra-small\" (click)=\"configureRestParameter(param)\">\n                                <span class=\"fas fa-cog\"></span>\n                            </button>\n\n                            <button type=\"button\" class=\"dynamic-btn-icon\" (click)=\"$event.preventDefault(); $event.stopPropagation(); removeParam(param)\">\n                                <span class=\"fas fa-times\"></span>\n                            </button>\n                        </div>\n                    </div>\n                </ng-container>\n            </ng-container>\n\n            <button type=\"button\" class=\"dynamic-btn-icon\" (click)=\"$event.preventDefault(); $event.stopPropagation(); addParam()\">\n                <span class=\"fas fa-plus\"></span>\n            </button>\n        </div>\n\n        <div class=\"outputs\">\n            <div class=\"output\">\n                <div>{{'success'|firstUppercaseLocalize}}</div>\n                <relation-node-output [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" name=\"success\" [parent]=\"this\"></relation-node-output>\n            </div>\n\n            <div class=\"output\">\n                <div>{{'error'|firstUppercaseLocalize}}</div>\n                <relation-node-output [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" name=\"error\" [parent]=\"this\"></relation-node-output>\n            </div>\n        </div>\n    </div>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: RelationsNodeHeaderSAComponent, selector: "relations-node-header", inputs: ["parent", "destroySubject", "name"] }, { kind: "component", type: RelationNodeInputSAComponent, selector: "relation-node-input" }, { kind: "component", type: RelationNodeOutputSAComponent, selector: "relation-node-output" }, { kind: "pipe", type: FirstUppercaseLocalizeSAPipe, name: "firstUppercaseLocalize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: RestNodeSAComponent, decorators: [{
            type: Component,
            args: [{ selector: 'rest-node', standalone: true, imports: [
                        CommonModule,
                        ReactiveFormsModule,
                        RelationsNodeHeaderSAComponent,
                        RelationNodeInputSAComponent,
                        RelationNodeOutputSAComponent,
                        FirstUppercaseLocalizeSAPipe
                    ], providers: [
                        FormModelBuilder,
                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<relations-node-header [parent]=\"this\" [destroySubject]=\"destroySubject\" [name]=\"'rest'|firstUppercaseLocalize\"></relations-node-header>\n\n<div class=\"node-content\" [formGroup]=\"form\">\n    <div class=\"dynamic-form-group dynamic-margin-bottom-extra-small\">\n        <label class=\"dynamic-control-label dynamic-text-uppercase\">{{'url'|firstUppercaseLocalize}}</label>\n        <input type=\"text\" class=\"dynamic-form-control\" formControlName=\"url\">\n    </div>\n    \n    <div class=\"dynamic-form-group dynamic-margin-bottom-extra-small\">\n        <label class=\"dynamic-control-label dynamic-text-uppercase\">{{'method'|firstUppercaseLocalize}}</label>\n        \n        <select class=\"dynamic-form-control\" formControlName=\"method\">\n            <option value=\"GET\">GET</option>\n            <option value=\"POST\">POST</option>\n            <option value=\"PUT\">PUT</option>\n            <option value=\"PATCH\">PATCH</option>\n            <option value=\"DELETE\">DELETE</option>\n        </select>\n    </div>\n\n    <div class=\"dynamic-form-group dynamic-margin-bottom-extra-small\">\n        <label class=\"dynamic-control-label dynamic-text-uppercase\">{{'run immediately'|firstUppercaseLocalize}}</label>\n        <input type=\"checkbox\" class=\"dynamic-form-control\" formControlName=\"runImmediately\">\n    </div>\n\n    <div class=\"inputs-outputs\">\n        <div class=\"inputs\">\n            <ng-container *ngFor=\"let param of params\">\n                <ng-container [ngSwitch]=\"param.type\">\n                    <div class=\"input\" *ngSwitchCase=\"'BODY'\">\n                        <relation-node-input *ngIf=\"param.configurable\" [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" [name]=\"param.name\" [parent]=\"this\"></relation-node-input>\n\n                        <div class=\"dynamic-flex-row\">\n                            <div>BODY: {{param.name}}</div>\n\n                            <button type=\"button\" class=\"dynamic-btn-icon dynamic-margin-horizontal-extra-small\" (click)=\"$event.preventDefault(); $event.stopPropagation(); configureRestParameter(param)\">\n                                <span class=\"fas fa-cog\"></span>\n                            </button>\n\n                            <button type=\"button\" class=\"dynamic-btn-icon\" (click)=\"$event.preventDefault(); $event.stopPropagation(); removeParam(param)\">\n                                <span class=\"fas fa-times\"></span>\n                            </button>\n                        </div>\n                    </div>\n\n                    <div class=\"input\" *ngSwitchCase=\"'PATH'\">\n                        <relation-node-input *ngIf=\"param.configurable\" [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" [name]=\"param.name\" [parent]=\"this\"></relation-node-input>\n\n                        <div class=\"dynamic-flex-row\">\n                            <div>PATH: {{param.name}}</div>\n\n                            <button type=\"button\" class=\"dynamic-btn-icon dynamic-margin-horizontal-extra-small\" (click)=\"configureRestParameter(param)\">\n                                <span class=\"fas fa-cog\"></span>\n                            </button>\n\n                            <button type=\"button\" class=\"dynamic-btn-icon\" (click)=\"$event.preventDefault(); $event.stopPropagation(); removeParam(param)\">\n                                <span class=\"fas fa-times\"></span>\n                            </button>\n                        </div>\n                    </div>\n\n                    <div class=\"input\" *ngSwitchCase=\"'QUERY'\">\n                        <relation-node-input *ngIf=\"param.configurable\" [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" [name]=\"param.name\" [parent]=\"this\"></relation-node-input>\n\n                        <div class=\"dynamic-flex-row\">\n                            <div>QUERY: {{param.name}}</div>\n\n                            <button type=\"button\" class=\"dynamic-btn-icon dynamic-margin-horizontal-extra-small\" (click)=\"configureRestParameter(param)\">\n                                <span class=\"fas fa-cog\"></span>\n                            </button>\n\n                            <button type=\"button\" class=\"dynamic-btn-icon\" (click)=\"$event.preventDefault(); $event.stopPropagation(); removeParam(param)\">\n                                <span class=\"fas fa-times\"></span>\n                            </button>\n                        </div>\n                    </div>\n\n                    <div class=\"input\" *ngSwitchCase=\"'QUERY OBJECT'\">\n                        <relation-node-input *ngIf=\"param.configurable\" [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" [name]=\"param.name\" [parent]=\"this\"></relation-node-input>\n\n                        <div class=\"dynamic-flex-row\">\n                            <div>QUERY OBJECT: {{param.name}}</div>\n\n                            <button type=\"button\" class=\"dynamic-btn-icon dynamic-margin-horizontal-extra-small\" (click)=\"configureRestParameter(param)\">\n                                <span class=\"fas fa-cog\"></span>\n                            </button>\n\n                            <button type=\"button\" class=\"dynamic-btn-icon\" (click)=\"$event.preventDefault(); $event.stopPropagation(); removeParam(param)\">\n                                <span class=\"fas fa-times\"></span>\n                            </button>\n                        </div>\n                    </div>\n\n                    <div class=\"input\" *ngSwitchCase=\"'HEADER'\">\n                        <relation-node-input *ngIf=\"param.configurable\" [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" [name]=\"param.name\" [parent]=\"this\"></relation-node-input>\n\n                        <div class=\"dynamic-flex-row\">\n                            <div>HEADER: {{param.name}}</div>\n\n                            <button type=\"button\" class=\"dynamic-btn-icon dynamic-margin-horizontal-extra-small\" (click)=\"configureRestParameter(param)\">\n                                <span class=\"fas fa-cog\"></span>\n                            </button>\n\n                            <button type=\"button\" class=\"dynamic-btn-icon\" (click)=\"$event.preventDefault(); $event.stopPropagation(); removeParam(param)\">\n                                <span class=\"fas fa-times\"></span>\n                            </button>\n                        </div>\n                    </div>\n                </ng-container>\n            </ng-container>\n\n            <button type=\"button\" class=\"dynamic-btn-icon\" (click)=\"$event.preventDefault(); $event.stopPropagation(); addParam()\">\n                <span class=\"fas fa-plus\"></span>\n            </button>\n        </div>\n\n        <div class=\"outputs\">\n            <div class=\"output\">\n                <div>{{'success'|firstUppercaseLocalize}}</div>\n                <relation-node-output [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" name=\"success\" [parent]=\"this\"></relation-node-output>\n            </div>\n\n            <div class=\"output\">\n                <div>{{'error'|firstUppercaseLocalize}}</div>\n                <relation-node-output [parentCoordiantes]=\"nodePosition\" [zoomLevel]=\"zoomLevel\" name=\"error\" [parent]=\"this\"></relation-node-output>\n            </div>\n        </div>\n    </div>\n</div>" }]
        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.TitledDialogService }, { type: i2.FormModelBuilder }] });
//# sourceMappingURL=restNode.component.js.map