import { Component } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { MatDialogRef } from '@angular/material';
import { BehaviorSubject } from 'rxjs';
var ComponentSettingsDialogComponent = (function () {
    function ComponentSettingsDialogComponent(dialogRef) {
        this.dialogRef = dialogRef;
        this.templateInputsData = {};
        this.componentInputs$ = new BehaviorSubject([]);
    }
    ComponentSettingsDialogComponent.prototype.ngOnInit = function () {
        this.formGroup = new FormGroup({});
        var self = this;
        this.formGroup.valueChanges
            .subscribe(function (value) {
            if (self.formDataCache === undefined) {
                self.formDataCache = {};
            }
            Object.assign(self.formDataCache, value);
        });
    };
    ComponentSettingsDialogComponent.prototype.ngOnDestroy = function () {
        this.formDataCache = undefined;
    };
    ComponentSettingsDialogComponent.prototype.registerFormControlComponent = function (comp) {
        if (comp) {
            var control = comp.getFormControl();
            if (control) {
                this.formGroup.addControl(comp.getPropertyName(), control);
            }
        }
    };
    ComponentSettingsDialogComponent.prototype.unregisterFormControlComponent = function (comp) {
        if (comp) {
            var control = comp.getFormControl();
            if (control) {
                this.formGroup.removeControl(comp.getPropertyName());
            }
        }
    };
    ComponentSettingsDialogComponent.prototype.setTemplateInputsData = function (inputsData) {
        var clonedInputsData = JSON.parse(JSON.stringify(inputsData));
        this.templateInputsData = clonedInputsData;
    };
    ComponentSettingsDialogComponent.prototype.setComponent = function (component) {
        var _this = this;
        this.component = component;
        this.componentInputs$.next(this.component.getInputs().filter(function (input) {
            var result = _this.templateInputsData[input];
            if (!result) {
                console.info('Attribute `' + input + '` from `' + component.getDirective() + '` is not supported on DynamicForm Builder');
            }
            return result;
        }));
    };
    ComponentSettingsDialogComponent.prototype.save = function () {
        var _this = this;
        Object.keys(this.formGroup.controls).forEach(function (control) { return _this.formGroup.controls[control].markAsTouched(); });
        if (!this.formGroup.valid) {
            console.error('ERROR_MESSAGES.FORM_VALIDATION_ERROR');
            return;
        }
        var configuredInputs = {};
        if (this.formDataCache) {
            var keys = Object.keys(this.formDataCache);
            keys.map(function (item) {
                var propertyValue = _this.formDataCache[item];
                if (_this.templateInputsData[item].default !== propertyValue) {
                    configuredInputs[item] = propertyValue;
                    if (propertyValue !== undefined && typeof propertyValue !== 'string') {
                        configuredInputs[item] = propertyValue.toString();
                    }
                    if (_this.templateInputsData[item].type === 'json') {
                        configuredInputs[item] = JSON.parse(propertyValue);
                    }
                }
            });
        }
        this.component.setConfiguredInputs(configuredInputs);
        this.dialogRef.close(this.component);
    };
    ComponentSettingsDialogComponent.prototype.cancel = function () {
        this.dialogRef.close(false);
    };
    ComponentSettingsDialogComponent.prototype.getInputData = function (inputName) {
        var inputData = this.templateInputsData[inputName];
        var configuredValue = this.component.getConfiguredInputValue(inputName);
        if (inputData.type === 'json') {
            configuredValue = JSON.stringify(configuredValue);
        }
        if (configuredValue !== undefined) {
            inputData.default = configuredValue;
        }
        return inputData;
    };
    ComponentSettingsDialogComponent.prototype.comparePropertyType = function (prop, type) {
        var propertyType = this.templateInputsData.hasOwnProperty(prop) ? this.templateInputsData[prop].type : undefined;
        if (type === 'text') {
            return (propertyType === 'string' || propertyType === 'number' || propertyType === 'json');
        }
        return (propertyType === type);
    };
    ComponentSettingsDialogComponent.decorators = [
        { type: Component, args: [{
                    selector: 'component-settings-dialog',
                    inputs: [],
                    template: "\n    <h1 mat-dialog-title>{{ component.getDirective() }}</h1>\n    <mat-dialog-content>\n      <form #settingsForm [formGroup]=\"formGroup\" fxLayout=\"column\">\n\n        <ng-template #metadataFieldTemplate let-input=\"input\">\n          <ng-container *ngIf=\"input !== 'empty'; else empty\">\n            <boolean-metadata *ngIf=\"comparePropertyType(input, 'boolean')\" [property]=\"input\" [data]=\"getInputData(input)\" fxFlex></boolean-metadata>\n            <text-metadata *ngIf=\"comparePropertyType(input, 'text')\" [property]=\"input\" [data]=\"getInputData(input)\" fxFlex></text-metadata>\n            <combo-metadata *ngIf=\"comparePropertyType(input, 'combo')\" [property]=\"input\" [data]=\"getInputData(input)\" fxFlex></combo-metadata>\n          </ng-container>\n          <ng-template #empty>\n            <span fxFlex></span>\n          </ng-template>\n        </ng-template>\n\n        <ng-container *ngFor=\"let prop of (componentInputs$ | async) as properties; let i = index; let size = count\">\n          <div *ngIf=\"i % 2 === 0\" fxLayout=\"row wrap\" fxLayoutGap=\"16px\">\n            <ng-container *ngTemplateOutlet=\"metadataFieldTemplate;context:{input:properties[i]}\"></ng-container>\n            <ng-container *ngTemplateOutlet=\"metadataFieldTemplate;context:{input:properties[i+1] ? properties[i+1] : 'empty'}\"></ng-container>\n          </div>\n        </ng-container>\n\n      </form>\n    </mat-dialog-content>\n\n    <mat-dialog-actions align=\"end\">\n      <button type=\"button\" mat-stroked-button (click)=\"cancel()\">{{ 'CANCEL' | oTranslate }}</button>\n      <button type=\"button\" mat-stroked-button (click)=\"save()\">{{ 'SAVE' | oTranslate }}</button>\n    </mat-dialog-actions>\n  ",
                    styles: ["\n    mat-dialog-content{max-height:75vh}\n  "]
                },] },
    ];
    ComponentSettingsDialogComponent.ctorParameters = function () { return [
        { type: MatDialogRef }
    ]; };
    return ComponentSettingsDialogComponent;
}());
export { ComponentSettingsDialogComponent };
//# sourceMappingURL=component-settings-dialog.component.js.map