import { r as registerInstance, c as createEvent, h, d as getElement } from './core-b6ab53a4.js';
import './_commonjsHelpers-4ab098b6.js';
import { r as resolveJson, g as getVanillaHtmlInputs } from './utils-b59928e3.js';

const PwcDynamicFormContent = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.fieldChanged = createEvent(this, "fieldChanged", 7);
    }
    onItemsChanged(items) {
        this.resolvedItems = resolveJson(items);
    }
    componentWillLoad() {
        this.onItemsChanged(this.items);
    }
    handleFieldChange(eventPayload) {
        this.fieldChanged.emit(eventPayload);
    }
    constructField(field) {
        let castedField;
        const label = field.label;
        delete field.label;
        switch (field.type) {
            case "color":
                castedField = field;
                return (h("div", { class: "form-group" }, h("label", null, label, h("color-picker", Object.assign({}, castedField)))));
            // Special handle reason: using pwc-choices.
            case "select-single":
                castedField = field;
                castedField.type = "single";
                return this.constructPwcChoices(label, castedField);
            // Special handle reason: using pwc-choices.
            case "select-multi":
                castedField = field;
                castedField.type = "multi";
                return this.constructPwcChoices(label, castedField);
            // Special handle reason: label needs to be placed after the input element.
            case "checkbox":
                castedField = field;
                return (h("div", { class: "form-group" }, h("label", null, h("input", Object.assign({}, castedField)), label)));
            default:
                castedField = field;
                return (h("div", { class: "form-group" }, h("label", null, label, h("input", Object.assign({}, castedField)))));
        }
    }
    constructPwcChoices(label, castedField) {
        return (h("div", { class: "form-group" }, h("label", null, label, h("pwc-choices", Object.assign({}, castedField)))));
    }
    init() {
        const colorPickers = this.rootElement.querySelectorAll("color-picker");
        colorPickers.forEach(cp => {
            cp.addEventListener("colorPickedEvent", originalEvent => {
                const fieldChangedEventPayload = {
                    element: cp,
                    newValue: cp.activeColor,
                    originalEvent
                };
                this.handleFieldChange(fieldChangedEventPayload);
            });
        });
        const pwcChoicesElements = this.rootElement.querySelectorAll("pwc-choices");
        pwcChoicesElements.forEach(pce => {
            pce.addEventListener("selectedOptionsChanged", (event) => {
                const fieldChangedEventPayload = {
                    element: pce,
                    newValue: event.detail,
                    originalEvent: event
                };
                this.handleFieldChange(fieldChangedEventPayload);
            });
        });
        // vanilla html inputs
        const vanillaInputs = getVanillaHtmlInputs(this.rootElement, true);
        vanillaInputs.forEach(vf => {
            vf.addEventListener("change", e => {
                const fieldChangedEventPayload = {
                    element: vf,
                    newValue: vf.value,
                    originalEvent: e
                };
                this.handleFieldChange(fieldChangedEventPayload);
            });
        });
    }
    componentDidLoad() {
        this.init();
    }
    componentDidUpdate() {
        this.init();
    }
    render() {
        return (h("div", null, this.resolvedItems
            ? this.resolvedItems.map(field => this.constructField(field))
            : ""));
    }
    get rootElement() { return getElement(this); }
    static get watchers() { return {
        "items": ["onItemsChanged"]
    }; }
    static get style() { return ""; }
};

export { PwcDynamicFormContent as pwc_dynamic_form_content };
