import { Component, ChangeDetectionStrategy, Inject } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { DialogRef } from '@angular/cdk/dialog';
import { CommonModule } from '@angular/common';
import { MatDialogModule } from '@angular/material/dialog';
import { FormModelBuilder } from '@anglr/common/forms';
import { TITLED_DIALOG_DATA } from '@anglr/common/material';
import { FirstUppercaseLocalizeSAPipe, TooltipModule } from '@anglr/common';
import { GetModelSAPipe, PropertySelectedSAPipe, PropertiesMetadataSAPipe } from '../../pipes';
import * as i0 from "@angular/core";
import * as i1 from "@angular/cdk/dialog";
import * as i2 from "@anglr/common/forms";
import * as i3 from "@angular/common";
import * as i4 from "@angular/material/dialog";
import * as i5 from "@angular/forms";
import * as i6 from "@anglr/common";
/**
 * Component used for displaying and editation of custom component options
 */
export class CustomComponentOptionsSAComponent {
    //######################### constructor #########################
    constructor(data, dialog, formModelBuilder) {
        var _a, _b, _c, _d, _e;
        var _f, _g, _h;
        this.data = data;
        this.dialog = dialog;
        //######################### protected properties - template bindings #########################
        /**
         * Instance of form control that is used for selection of component
         */
        this.component = new FormControl();
        /**
         * Array of used properties for components and their models
         */
        this.usedProperties = {};
        /**
         * Array of available properties for components and their models
         */
        this.availableProperties = {};
        /**
         * Array of content components that are available
         */
        this.contentComponents = [];
        this.contentComponents = Object.keys(data.customComponentContentMetadata);
        this.nameDescriptionForm = formModelBuilder.build({ displayName: '', description: '', });
        for (const id in this.data.configuration.configurableProperties) {
            const models = this.data.configuration.configurableProperties[id];
            (_a = (_f = this.usedProperties)[id]) !== null && _a !== void 0 ? _a : (_f[id] = {});
            for (const modelName in models) {
                const properties = models[modelName];
                this.usedProperties[id][modelName] = [...properties];
            }
        }
        const usedComponents = Object.keys(this.usedProperties);
        this.contentComponents = this.contentComponents.filter(itm => usedComponents.indexOf(itm) < 0);
        for (const id in data.customComponentContentMetadata) {
            const meta = data.customComponentContentMetadata[id];
            if (!((_c = (_b = meta === null || meta === void 0 ? void 0 : meta.editorMetadata.metaInfo) === null || _b === void 0 ? void 0 : _b.optionsMetadata) === null || _c === void 0 ? void 0 : _c.propertiesMetadata)) {
                continue;
            }
            for (const propMeta of meta.editorMetadata.metaInfo.optionsMetadata.propertiesMetadata) {
                const model = new propMeta.modelType(undefined);
                if (!Object.keys(model).length) {
                    continue;
                }
                const modelName = propMeta.modelType.name;
                (_d = (_g = this.availableProperties)[id]) !== null && _d !== void 0 ? _d : (_g[id] = {});
                (_e = (_h = this.availableProperties[id])[modelName]) !== null && _e !== void 0 ? _e : (_h[modelName] = []);
                for (const prop in model) {
                    this.availableProperties[id][modelName].push(prop);
                }
            }
        }
    }
    //######################### protected methods - template bindings #########################
    /**
     * Adds component from custom component layout
     */
    addComponent() {
        var _a;
        if (!this.component.value) {
            return;
        }
        this.usedProperties[this.component.value] = {};
        const index = this.contentComponents.indexOf(this.component.value);
        if (index >= 0) {
            this.contentComponents.splice(index, 1);
            this.component.setValue((_a = this.contentComponents[0]) !== null && _a !== void 0 ? _a : null);
        }
    }
    /**
     * Removes component options
     * @param id - Id of component that should be removed
     */
    removeComponent(id) {
        delete this.usedProperties[id];
        this.contentComponents.push(id);
        if (this.contentComponents.length == 1) {
            this.component.setValue(this.contentComponents[0]);
        }
    }
    /**
     * Toggle selected property in component in model
     * @param id - Id of component to be edited
     * @param modelName - Name of model to be edited
     * @param propertyName - Name of property to be toggled
     */
    toggleSelected(id, modelName, propertyName) {
        var _a, _b;
        var _c, _d;
        (_a = (_c = this.usedProperties)[id]) !== null && _a !== void 0 ? _a : (_c[id] = {});
        (_b = (_d = this.usedProperties[id])[modelName]) !== null && _b !== void 0 ? _b : (_d[modelName] = []);
        const index = this.usedProperties[id][modelName].indexOf(propertyName);
        //remove
        if (index >= 0) {
            this.usedProperties[id][modelName].splice(index, 1);
            this.usedProperties[id][modelName] = [...this.usedProperties[id][modelName]];
        }
        //add
        else {
            this.usedProperties[id][modelName] =
                [
                    ...this.usedProperties[id][modelName],
                    propertyName,
                ];
        }
    }
}
CustomComponentOptionsSAComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: CustomComponentOptionsSAComponent, deps: [{ token: TITLED_DIALOG_DATA }, { token: i1.DialogRef }, { token: i2.FormModelBuilder }], target: i0.ɵɵFactoryTarget.Component });
CustomComponentOptionsSAComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: CustomComponentOptionsSAComponent, isStandalone: true, selector: "custom-component-options", providers: [FormModelBuilder], ngImport: i0, template: "<div class=\"dynamic-margin-bottom-small dynamic-flex-row\">\n    <div class=\"dynamic-flex-1 dynamic-margin-right-small\">\n        <label class=\"dynamic-control-label\">{{'available content components'|firstUppercaseLocalize}}</label>\n\n        <select class=\"dynamic-form-control\" [formControl]=\"component\">\n            <option *ngFor=\"let component of contentComponents\" [value]=\"component\">{{data.customComponentContentMetadata[component]?.metadata?.displayName}}</option>\n        </select>\n    </div>\n\n    <a class=\"dynamic-btn-icon dynamic-margin-left-small dynamic-large-text\" (click)=\"addComponent()\">\n        <span class=\"fas fa-plus\"></span>\n    </a>\n</div>\n\n<div>\n    <div *ngFor=\"let component of usedProperties | keyvalue\" class=\"dynamic-margin-bottom-small\">\n        <div class=\"dynamic-bold dynamic-flex-row \">\n            <span class=\"dynamic-margin-right-small\">{{data.customComponentContentMetadata[component.key]?.metadata?.displayName}}</span>\n            \n            <a class=\"dynamic-btn-icon\" (click)=\"removeComponent(component.key)\">\n                <span class=\"fas fa-times\"></span>\n            </a>\n        </div>\n        \n        <ng-container *ngFor=\"let modelProps of availableProperties[component.key] | keyvalue\">\n            <div *ngFor=\"let prop of modelProps.value\">\n                <label>\n                    <input type=\"checkbox\" (change)=\"toggleSelected(component.key, modelProps.key, prop)\" [checked]=\"usedProperties | propertySelected: component.key: modelProps.key: prop\">\n                    <span>{{(modelProps.key | getModel: data.customComponentContentMetadata[component.key] | propertiesMetadata: data.propsMetadataExtractor)?.[prop]?.name ?? prop}}</span>\n                    <span class=\"fas fa-info-circle dynamic-margin-left-extra-small\" *ngIf=\"(modelProps.key | getModel: data.customComponentContentMetadata[component.key] | propertiesMetadata: data.propsMetadataExtractor)?.[prop]?.description as description\" [tooltip]=\"description\" ></span>\n                </label>\n            </div>\n        </ng-container>\n    </div>\n</div>\n\n<div class=\"dynamic-flex-row dynamic-flex-end dynamic-action-buttons\">\n    <button type=\"button\" class=\"dynamic-btn dynamic-btn-info dynamic-margin-right-extra-small\" [mat-dialog-close]=\"undefined\">\n        <span>{{'cancel'|firstUppercaseLocalize}}</span>\n    </button>\n\n    <button type=\"button\" class=\"dynamic-btn dynamic-btn-primary\" [mat-dialog-close]=\"{configurableProperties: usedProperties, displayName: '', description: ''}\">\n        <span>{{'ok'|firstUppercaseLocalize}}</span>\n    </button>\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: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: PropertySelectedSAPipe, name: "propertySelected" }, { kind: "pipe", type: GetModelSAPipe, name: "getModel" }, { kind: "pipe", type: PropertiesMetadataSAPipe, name: "propertiesMetadata" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i6.TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "allowHtml", "template", "tooltipOptions", "tooltipVisible", "containerElement"] }, { kind: "pipe", type: FirstUppercaseLocalizeSAPipe, name: "firstUppercaseLocalize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: CustomComponentOptionsSAComponent, decorators: [{
            type: Component,
            args: [{ selector: 'custom-component-options', standalone: true, imports: [
                        CommonModule,
                        MatDialogModule,
                        ReactiveFormsModule,
                        PropertySelectedSAPipe,
                        GetModelSAPipe,
                        PropertiesMetadataSAPipe,
                        TooltipModule,
                        FirstUppercaseLocalizeSAPipe,
                    ], providers: [FormModelBuilder], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dynamic-margin-bottom-small dynamic-flex-row\">\n    <div class=\"dynamic-flex-1 dynamic-margin-right-small\">\n        <label class=\"dynamic-control-label\">{{'available content components'|firstUppercaseLocalize}}</label>\n\n        <select class=\"dynamic-form-control\" [formControl]=\"component\">\n            <option *ngFor=\"let component of contentComponents\" [value]=\"component\">{{data.customComponentContentMetadata[component]?.metadata?.displayName}}</option>\n        </select>\n    </div>\n\n    <a class=\"dynamic-btn-icon dynamic-margin-left-small dynamic-large-text\" (click)=\"addComponent()\">\n        <span class=\"fas fa-plus\"></span>\n    </a>\n</div>\n\n<div>\n    <div *ngFor=\"let component of usedProperties | keyvalue\" class=\"dynamic-margin-bottom-small\">\n        <div class=\"dynamic-bold dynamic-flex-row \">\n            <span class=\"dynamic-margin-right-small\">{{data.customComponentContentMetadata[component.key]?.metadata?.displayName}}</span>\n            \n            <a class=\"dynamic-btn-icon\" (click)=\"removeComponent(component.key)\">\n                <span class=\"fas fa-times\"></span>\n            </a>\n        </div>\n        \n        <ng-container *ngFor=\"let modelProps of availableProperties[component.key] | keyvalue\">\n            <div *ngFor=\"let prop of modelProps.value\">\n                <label>\n                    <input type=\"checkbox\" (change)=\"toggleSelected(component.key, modelProps.key, prop)\" [checked]=\"usedProperties | propertySelected: component.key: modelProps.key: prop\">\n                    <span>{{(modelProps.key | getModel: data.customComponentContentMetadata[component.key] | propertiesMetadata: data.propsMetadataExtractor)?.[prop]?.name ?? prop}}</span>\n                    <span class=\"fas fa-info-circle dynamic-margin-left-extra-small\" *ngIf=\"(modelProps.key | getModel: data.customComponentContentMetadata[component.key] | propertiesMetadata: data.propsMetadataExtractor)?.[prop]?.description as description\" [tooltip]=\"description\" ></span>\n                </label>\n            </div>\n        </ng-container>\n    </div>\n</div>\n\n<div class=\"dynamic-flex-row dynamic-flex-end dynamic-action-buttons\">\n    <button type=\"button\" class=\"dynamic-btn dynamic-btn-info dynamic-margin-right-extra-small\" [mat-dialog-close]=\"undefined\">\n        <span>{{'cancel'|firstUppercaseLocalize}}</span>\n    </button>\n\n    <button type=\"button\" class=\"dynamic-btn dynamic-btn-primary\" [mat-dialog-close]=\"{configurableProperties: usedProperties, displayName: '', description: ''}\">\n        <span>{{'ok'|firstUppercaseLocalize}}</span>\n    </button>\n</div>" }]
        }], ctorParameters: () => [{ type: undefined, decorators: [{
                    type: Inject,
                    args: [TITLED_DIALOG_DATA]
                }] }, { type: i1.DialogRef }, { type: i2.FormModelBuilder }] });
//# sourceMappingURL=customComponentOptions.component.js.map