import { Host, h, } from "@stencil/core";
import { onComponentRequiredPropUndefined, addFormResetListener, removeFormResetListener, removeDisabledFalse, isPropDefined, isSlotUsed, slotHasContent, } from "../../utils/helpers";
const ADDITIONAL_FIELD = "additional-field";
/**
 * @slot additional-field - Content to displayed alongside a radio option.
 */
export class RadioOption {
    constructor() {
        this.defaultRadioValue = "";
        this.hasAdditionalField = false;
        this.skipFocus = false;
        /**
         * The style of additionalField that will be displayed if used.
         */
        this.additionalFieldDisplay = "static";
        /**
         * If `true`, the disabled state will be set.
         */
        this.disabled = false;
        /**
         * The text to be displayed when dynamic.
         */
        this.dynamicText = "This selection requires additional answers";
        /**
         * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
         */
        this.theme = "inherit";
        /**
         * If `true`, the radio option will be displayed in a selected state.
         */
        this.selected = false;
        this.initiallySelected = this.selected;
        this.handleClick = (event) => {
            var _a, _b;
            const clickedAdditionalField = event.target.matches(".dynamic-container:not(ic-radio-option, .checkmark), .dynamic-container *:not(ic-radio-option, .checkmark)");
            if (!this.disabled &&
                (!clickedAdditionalField || event.target === this.radioElement)) {
                event.stopPropagation();
                if (this.skipFocus === false) {
                    (_a = this.radioElement) === null || _a === void 0 ? void 0 : _a.focus();
                }
                this.skipFocus = false;
                if (this.hasAdditionalField) {
                    this.value = ((_b = this.getAdditionalField()) === null || _b === void 0 ? void 0 : _b.value) || this.defaultRadioValue;
                }
                this.icCheck.emit({
                    value: this.value,
                });
            }
        };
        this.handleKeyDown = (event) => {
            const preventPropagationElements = ["IC-DATE-INPUT", "IC-DATE-PICKER"];
            if (this.getAdditionalField() == document.activeElement &&
                preventPropagationElements.includes(this.getAdditionalField().nodeName)) {
                event.stopPropagation();
            }
        };
        this.handleFormReset = () => {
            this.skipFocus = true;
            this.selected = this.initiallySelected;
        };
    }
    watchDisabledHandler() {
        removeDisabledFalse(this.disabled, this.el);
    }
    watchSelectedHandler() {
        this.icSelectedChange.emit();
    }
    handleCheck(ev) {
        if (this.additionalFieldDisplay === "static" &&
            Array.from(this.el.querySelectorAll("ic-radio-option")).includes(ev.target))
            this.icCheck.emit({ value: this.value });
    }
    disconnectedCallback() {
        removeFormResetListener(this.el, this.handleFormReset);
    }
    componentWillLoad() {
        if (isSlotUsed(this.el, ADDITIONAL_FIELD)) {
            this.hasAdditionalField = true;
            this.getAdditionalField();
        }
        this.defaultRadioValue = this.value;
        addFormResetListener(this.el, this.handleFormReset);
        removeDisabledFalse(this.disabled, this.el);
    }
    componentDidLoad() {
        onComponentRequiredPropUndefined([{ prop: this.value, propName: "value" }], "Radio Option");
    }
    componentWillRender() {
        const hasSlot = slotHasContent(this.el, ADDITIONAL_FIELD);
        if (hasSlot && !this.hasAdditionalField) {
            this.hasAdditionalField = true;
            this.getAdditionalField();
        }
        else if (!hasSlot && this.hasAdditionalField) {
            this.hasAdditionalField = false;
        }
    }
    componentDidRender() {
        if (this.additionalFieldDisplay === "static") {
            const additionalField = this.getAdditionalField();
            if (!this.selected || this.disabled) {
                additionalField === null || additionalField === void 0 ? void 0 : additionalField.setAttribute("disabled", "");
            }
            else {
                additionalField === null || additionalField === void 0 ? void 0 : additionalField.removeAttribute("disabled");
            }
        }
    }
    additionalFieldValueHandler(event) {
        if (this.selected) {
            this.value = event.detail.value || this.defaultRadioValue;
            this.icCheck.emit({
                value: this.value,
            });
        }
        event.stopImmediatePropagation();
    }
    /**
     * Sets focus on the radio option.
     */
    async setFocus() {
        var _a;
        (_a = this.radioElement) === null || _a === void 0 ? void 0 : _a.focus();
    }
    /**
     * @internal Sets the tabIndex of the radio option.
     */
    async setTabIndex(value) {
        var _a;
        (_a = this.radioElement) === null || _a === void 0 ? void 0 : _a.setAttribute("tabIndex", value.toString());
    }
    getAdditionalField() {
        const additionalField = this.el.querySelector('ic-text-field[slot="additional-field"]');
        if (additionalField)
            additionalField.hiddenInput = false;
        return additionalField;
    }
    render() {
        const { additionalFieldDisplay, disabled, dynamicText, form, groupLabel, handleClick, handleKeyDown, hasAdditionalField, label, name, selected, value, theme, } = this;
        const id = `ic-radio-option-${isPropDefined(label) || value}-${groupLabel}`;
        return (h(Host, { key: 'd4254c0a08bd7fe373f7beeb849d732d437c6f5b', onClick: handleClick, onKeyDown: handleKeyDown, class: {
                ["ic-radio-option-disabled"]: !!disabled,
                [`ic-theme-${theme}`]: theme !== "inherit",
            } }, h("div", { key: '1b3c7c383278c1d8714f5a7a3a00c8fb780a2931', class: { container: true, disabled: !!disabled } }, h("div", { key: 'ba90a2ce5912981a50d43ebd33086eb227947e5f' }, h("input", { key: '8eb145667ce5b7777ced51480ceebab3f43a7910', tabindex: selected ? "0" : "-1", type: "radio", name: name, id: id, value: value, disabled: disabled, checked: selected, ref: (el) => (this.radioElement = el), form: form }), h("span", { key: '3683fd5eda19dd39f4647a5763705eef4becacb3', class: "checkmark" })), h("ic-typography", { key: 'd662a4e7a5b0ac173a7ea2881d2dac84e94eedc7', class: "radio-label", variant: "body" }, h("label", { key: 'a76e5907c98f2ff18d734167ff69bbe0a1c7ddc4', htmlFor: id }, label))), hasAdditionalField && (h("div", { key: 'ff91776cab766a955e98dee100f73114166fee7a', class: {
                "dynamic-container": true,
                hidden: additionalFieldDisplay === "dynamic" && !selected,
            } }, additionalFieldDisplay === "dynamic" && (h("div", { key: 'e7eeaf7801fd5aa2014edb3796b8b6acc3149b3b', class: "branch-corner" })), h("div", { key: '5cb0e6fca92276f2d2a3bb0f5edc9e4525d44aa2' }, additionalFieldDisplay === "dynamic" && (h("ic-typography", { key: '318ea54a9055f8dde4de2d9802878584d57e186e', variant: "caption" }, h("p", { key: 'e3f34b9536a0f5b95e796c269c586b7905dab59a', class: "dynamic-text" }, dynamicText))), h("div", { key: 'cec5d0147f6f12510e066fff2c0d4d80fe0ee98f', class: {
                "additional-field-wrapper": additionalFieldDisplay === "static",
            } }, h("slot", { key: 'd6279d0506490eceb7d55d6e86609e9e9fb06ea4', name: ADDITIONAL_FIELD })))))));
    }
    static get is() { return "ic-radio-option"; }
    static get originalStyleUrls() {
        return {
            "$": ["ic-radio-option.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["ic-radio-option.css"]
        };
    }
    static get properties() {
        return {
            "additionalFieldDisplay": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcAdditionalFieldTypes",
                    "resolved": "\"dynamic\" | \"static\" | undefined",
                    "references": {
                        "IcAdditionalFieldTypes": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcAdditionalFieldTypes"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The style of additionalField that will be displayed if used."
                },
                "getter": false,
                "setter": false,
                "attribute": "additional-field-display",
                "reflect": true,
                "defaultValue": "\"static\""
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the disabled state will be set."
                },
                "getter": false,
                "setter": false,
                "attribute": "disabled",
                "reflect": false,
                "defaultValue": "false"
            },
            "dynamicText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The text to be displayed when dynamic."
                },
                "getter": false,
                "setter": false,
                "attribute": "dynamic-text",
                "reflect": false,
                "defaultValue": "\"This selection requires additional answers\""
            },
            "form": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The <form> element to associate the radio with."
                },
                "getter": false,
                "setter": false,
                "attribute": "form",
                "reflect": false
            },
            "groupLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The group label for the radio option."
                },
                "getter": false,
                "setter": false,
                "attribute": "group-label",
                "reflect": false
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The label for the radio option."
                },
                "getter": false,
                "setter": false,
                "attribute": "label",
                "reflect": false
            },
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The name for the radio option."
                },
                "getter": false,
                "setter": false,
                "attribute": "name",
                "reflect": false
            },
            "theme": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcThemeMode",
                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
                    "references": {
                        "IcThemeMode": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcThemeMode"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
                },
                "getter": false,
                "setter": false,
                "attribute": "theme",
                "reflect": false,
                "defaultValue": "\"inherit\""
            },
            "value": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The value for the radio option."
                },
                "getter": false,
                "setter": false,
                "attribute": "value",
                "reflect": false
            },
            "selected": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the radio option will be displayed in a selected state."
                },
                "getter": false,
                "setter": false,
                "attribute": "selected",
                "reflect": true,
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "initiallySelected": {}
        };
    }
    static get events() {
        return [{
                "method": "icCheck",
                "name": "icCheck",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the radio option is selected."
                },
                "complexType": {
                    "original": "IcValueEventDetail",
                    "resolved": "IcValueEventDetail",
                    "references": {
                        "IcValueEventDetail": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcValueEventDetail"
                        }
                    }
                }
            }, {
                "method": "icSelectedChange",
                "name": "icSelectedChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the radio option is selected or deselected."
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }];
    }
    static get methods() {
        return {
            "setFocus": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Sets focus on the radio option.",
                    "tags": []
                }
            },
            "setTabIndex": {
                "complexType": {
                    "signature": "(value: number) => Promise<void>",
                    "parameters": [{
                            "name": "value",
                            "type": "number",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "",
                    "tags": [{
                            "name": "internal",
                            "text": "Sets the tabIndex of the radio option."
                        }]
                }
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "disabled",
                "methodName": "watchDisabledHandler"
            }, {
                "propName": "selected",
                "methodName": "watchSelectedHandler"
            }];
    }
    static get listeners() {
        return [{
                "name": "icCheck",
                "method": "handleCheck",
                "target": undefined,
                "capture": false,
                "passive": false
            }, {
                "name": "icChange",
                "method": "additionalFieldValueHandler",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
//# sourceMappingURL=ic-radio-option.js.map
