import { h } from "@stencil/core";
import { resolveJson } from "../../utils/utils";
import _ from "lodash";
export class PwcDynamicFormContent {
    constructor() {
        this.itemsAddedViaMethod = [];
    }
    itemsWatchHandler(items) {
        this.resolvedItems = resolveJson(items);
        this.resolvedItems = [...this.resolvedItems, ...this.itemsAddedViaMethod];
    }
    async addItem(config) {
        this.itemsAddedViaMethod = [...this.itemsAddedViaMethod, config];
        this.resolvedItems = [...this.resolvedItems, config];
        this.rootElement.forceUpdate();
    }
    async removeItem(id) {
        _.remove(this.itemsAddedViaMethod, { id });
        _.remove(this.resolvedItems, { id });
        this.rootElement.forceUpdate();
    }
    async getFieldRefs() {
        return this.fieldRefs;
    }
    componentWillLoad() {
        this.itemsWatchHandler(this.items);
    }
    handleFieldRef(fieldConfig, fieldRef) {
        if (fieldRef) {
            this.fieldRefs = _.unionBy(this.fieldRefs, [fieldRef], i => i.config.name);
        }
        else {
            _.remove(this.fieldRefs, i => i.config.name === fieldConfig.name);
        }
    }
    constructField(fieldConfig) {
        let nameIndexer = 0;
        const nameGenerator = () => {
            return "pwc-dynamic-form___generated-name-" + nameIndexer++;
        };
        let idIndexer = 0;
        const idGenerator = () => {
            return "pwc-dynamic-form___generated-id-" + idIndexer++;
        };
        fieldConfig.name = fieldConfig.name || nameGenerator();
        fieldConfig.id = fieldConfig.id || idGenerator();
        return (h("pwc-dynamic-form-field", { key: fieldConfig.id + fieldConfig.name, config: fieldConfig, ref: this.handleFieldRef.bind(this, fieldConfig) }));
    }
    render() {
        if (this.resolvedItems) {
            // we are mutating the config, therefore we have to clone it to leave the user input intact.
            const resolvedItemsClone = _.cloneDeep(this.resolvedItems);
            return resolvedItemsClone.map(this.constructField.bind(this));
        }
        else {
            return "";
        }
    }
    static get is() { return "pwc-dynamic-form-content"; }
    static get originalStyleUrls() { return {
        "$": ["pwc-dynamic-form-content.css"]
    }; }
    static get styleUrls() { return {
        "$": ["pwc-dynamic-form-content.css"]
    }; }
    static get properties() { return {
        "items": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string | ContentItemConfig[]",
                "resolved": "ContentItemConfig[] | string",
                "references": {
                    "ContentItemConfig": {
                        "location": "import",
                        "path": "../pwc-dynamic-form-field/ContentItemConfig"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "items",
            "reflect": false
        }
    }; }
    static get methods() { return {
        "addItem": {
            "complexType": {
                "signature": "(config: ContentItemConfig) => Promise<void>",
                "parameters": [{
                        "tags": [],
                        "text": ""
                    }],
                "references": {
                    "Promise": {
                        "location": "global"
                    },
                    "ContentItemConfig": {
                        "location": "import",
                        "path": "../pwc-dynamic-form-field/ContentItemConfig"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        },
        "removeItem": {
            "complexType": {
                "signature": "(id: string) => Promise<void>",
                "parameters": [{
                        "tags": [],
                        "text": ""
                    }],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        },
        "getFieldRefs": {
            "complexType": {
                "signature": "() => Promise<HTMLPwcDynamicFormFieldElement[]>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    },
                    "HTMLPwcDynamicFormFieldElement": {
                        "location": "global"
                    }
                },
                "return": "Promise<HTMLPwcDynamicFormFieldElement[]>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        }
    }; }
    static get elementRef() { return "rootElement"; }
    static get watchers() { return [{
            "propName": "items",
            "methodName": "itemsWatchHandler"
        }]; }
}
