import { h } from "@stencil/core";
import { getVanillaHtmlInputs } from "../../utils/utils";
export class PwcDynamicForm {
    handleFieldChanged(fieldChangedEventPayload) {
        const rootElement = this.rootElement;
        this.getFieldValues("value").then(v => {
            const formChangedEventPayload = {
                type: "change",
                fieldChangedEventPayload,
                formResetEvent: null,
                formValues: v,
                formElement: rootElement
            };
            this.formChanged.emit(formChangedEventPayload);
        });
    }
    handleFormReset(formResetEvent) {
        const rootElement = this.rootElement;
        this.getFieldValues("value").then(v => {
            const formChangedEventPayload = {
                type: "reset",
                fieldChangedEventPayload: null,
                formResetEvent,
                formValues: v,
                formElement: rootElement
            };
            this.formChanged.emit(formChangedEventPayload);
        });
    }
    async getFieldValues(pwcChoicesRetreiveMode) {
        const form = this.rootElement.querySelector("form");
        const resultObj = {};
        // vanilla html inputs
        const vanillaInputs = getVanillaHtmlInputs(this.rootElement.querySelector("pwc-dynamic-form-content"), true);
        vanillaInputs.forEach(vf => {
            if (vf.type === "checkbox") {
                resultObj[vf.name] = vf.checked;
            }
            else {
                resultObj[vf.name] = vf.value;
            }
        });
        // pwc-choices
        const pwcChoicesInputs = form.querySelectorAll("pwc-choices");
        for (const key in pwcChoicesInputs) {
            if (pwcChoicesInputs.hasOwnProperty(key)) {
                const ci = pwcChoicesInputs[key];
                const value = await ci.getSelectedOptions(pwcChoicesRetreiveMode);
                resultObj[ci.name] = value;
            }
        }
        // color-picker
        const colorPickers = this.rootElement.querySelectorAll("color-picker");
        for (const key in colorPickers) {
            if (colorPickers.hasOwnProperty(key)) {
                const cp = colorPickers[key];
                const value = cp.activeColor;
                const name = cp.getAttribute("name");
                resultObj[name] = value;
            }
        }
        return resultObj;
    }
    render() {
        return (h("form", null,
            h("slot", null)));
    }
    static get is() { return "pwc-dynamic-form"; }
    static get originalStyleUrls() { return {
        "$": ["pwc-dynamic-form.css"]
    }; }
    static get styleUrls() { return {
        "$": ["pwc-dynamic-form.css"]
    }; }
    static get events() { return [{
            "method": "formChanged",
            "name": "formChanged",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "FormChangedEventPayload",
                "resolved": "FormChangedEventPayload",
                "references": {
                    "FormChangedEventPayload": {
                        "location": "import",
                        "path": "./FormChangedEventPayload"
                    }
                }
            }
        }]; }
    static get methods() { return {
        "getFieldValues": {
            "complexType": {
                "signature": "(pwcChoicesRetreiveMode: \"option\" | \"value\" | \"label\") => Promise<FormValuesType>",
                "parameters": [{
                        "tags": [],
                        "text": ""
                    }],
                "references": {
                    "Promise": {
                        "location": "global"
                    },
                    "FormValuesType": {
                        "location": "import",
                        "path": "./FormValuesType"
                    },
                    "RetreiveMode": {
                        "location": "import",
                        "path": "@paraboly/pwc-choices/dist/types/components/pwc-choices/RetreiveMode"
                    },
                    "HTMLFormElement": {
                        "location": "global"
                    }
                },
                "return": "Promise<FormValuesType>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        }
    }; }
    static get elementRef() { return "rootElement"; }
    static get listeners() { return [{
            "name": "fieldChanged",
            "method": "handleFieldChanged",
            "target": undefined,
            "capture": false,
            "passive": false
        }, {
            "name": "reset",
            "method": "handleFormReset",
            "target": undefined,
            "capture": false,
            "passive": false
        }]; }
}
