import { h } from "@stencil/core";
export class PwcDynamicFormField {
    changeEventHandler(event) {
        const element = event.target;
        let elementValue;
        if (this.nativeInputRef.type === "checkbox") {
            elementValue = element.checked;
        }
        else {
            elementValue = element.value;
        }
        this.fieldChanged.emit({
            element,
            newValue: elementValue,
            originalEvent: event
        });
    }
    selectedOptionsChangedHandler(event) {
        const element = event.target;
        const value = event.detail;
        this.fieldChanged.emit({
            element,
            newValue: value,
            originalEvent: event
        });
    }
    colorPickedeventHandler(event) {
        event.stopPropagation();
        event.preventDefault();
        const element = event.target;
        const value = event.detail;
        this.fieldChanged.emit({
            element,
            newValue: value,
            originalEvent: event
        });
    }
    async getValue() {
        if (this.nativeInputRef) {
            if (this.nativeInputRef.type === "checkbox") {
                return this.nativeInputRef.checked;
            }
            else {
                return this.nativeInputRef.value;
            }
        }
        if (this.choicesRef) {
            return this.choicesRef.getSelectedOptionsAsValues();
        }
        if (this.colorPickerRef) {
            return this.colorPickerRef.activeColor;
        }
    }
    handleColorPickerRef(ref) {
        this.colorPickerRef = ref;
    }
    handleChoicesRef(ref) {
        this.choicesRef = ref;
    }
    handleNativeInputRef(ref) {
        this.nativeInputRef = ref;
    }
    constructField(field) {
        let castedField;
        const label = field.label;
        delete field.label;
        switch (field.type) {
            case "color":
                castedField = field;
                return [
                    h("label", { htmlFor: castedField.name }, label),
                    h("pwc-color-picker", Object.assign({}, castedField, { ref: this.handleColorPickerRef.bind(this) }))
                ];
            // 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("input", Object.assign({}, castedField, { ref: this.handleNativeInputRef.bind(this) })),
                    h("label", { htmlFor: castedField.name }, label)
                ];
            default:
                castedField = field;
                return [
                    h("label", { htmlFor: castedField.name }, label),
                    h("input", Object.assign({}, castedField))
                ];
        }
    }
    constructPwcChoices(label, castedField) {
        return [
            h("label", { htmlFor: castedField.name }, label),
            h("pwc-choices", Object.assign({}, castedField, { ref: this.handleChoicesRef.bind(this) }))
        ];
    }
    render() {
        return this.constructField(this.config);
    }
    static get is() { return "pwc-dynamic-form-field"; }
    static get originalStyleUrls() { return {
        "$": ["pwc-dynamic-form-field.css"]
    }; }
    static get styleUrls() { return {
        "$": ["pwc-dynamic-form-field.css"]
    }; }
    static get properties() { return {
        "config": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "ContentItemConfig",
                "resolved": "NativeInputConfig | PwcChoicesConfig | PwcColorPickerConfig",
                "references": {
                    "ContentItemConfig": {
                        "location": "import",
                        "path": "./ContentItemConfig"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            }
        }
    }; }
    static get events() { return [{
            "method": "fieldChanged",
            "name": "fieldChanged",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "FieldChangedEventPayload",
                "resolved": "FieldChangedEventPayload",
                "references": {
                    "FieldChangedEventPayload": {
                        "location": "import",
                        "path": "./FieldChangedEventPayload"
                    }
                }
            }
        }]; }
    static get methods() { return {
        "getValue": {
            "complexType": {
                "signature": "() => Promise<string | boolean | string[]>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<string | boolean | string[]>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        }
    }; }
    static get elementRef() { return "rootElement"; }
    static get listeners() { return [{
            "name": "change",
            "method": "changeEventHandler",
            "target": undefined,
            "capture": false,
            "passive": false
        }, {
            "name": "selectedOptionsChanged",
            "method": "selectedOptionsChangedHandler",
            "target": undefined,
            "capture": false,
            "passive": false
        }, {
            "name": "colorPickedEvent",
            "method": "colorPickedeventHandler",
            "target": undefined,
            "capture": false,
            "passive": false
        }]; }
}
