import { h, } from "@stencil/core";
import { isNestedInIfxComponent } from "../..//shared/utils/dom-utils";
import { detectFramework } from "../..//shared/utils/framework-detection";
import { trackComponent } from "../../shared/utils/tracking";
export class RadioButtonGroup {
    errorStates = new Map();
    el;
    /** Layout direction of the checkbox group (horizontal or vertical). */
    alignment = "vertical";
    /** Size of the checkbox group (e.g. small, medium). */
    size;
    /** Whether to show the group label above the checkboxes. */
    showGroupLabel;
    /** Text used as the group label. */
    groupLabelText = "Group Label Text";
    /** Whether to show a caption under the group. */
    showCaption;
    /** Text used for the caption below the group. */
    captionText;
    /** Whether to show an icon next to the caption text. */
    showCaptionIcon;
    /** Whether selecting at least one checkbox is required. */
    required = false;
    hasErrors = false;
    handleRadioButtonError(event) {
        const radioButton = event.target;
        if (radioButton.tagName.toLowerCase() === "ifx-radio-button") {
            this.errorStates.set(radioButton, event.detail);
            this.updateHasErrors();
        }
    }
    /** Method to set the error state of all radio-butttons in the group */
    async setGroupError(error) {
        const radioButtons = Array.from(this.el.querySelectorAll("ifx-radio-button"));
        radioButtons.forEach((radioButton) => {
            radioButton.error = error;
        });
    }
    componentWillLoad() {
        this.initializeState();
    }
    async componentDidLoad() {
        if (!isNestedInIfxComponent(this.el)) {
            const framework = detectFramework();
            trackComponent("ifx-radio-button-group", await framework);
        }
    }
    handleSlotChange = () => {
        this.initializeState();
    };
    initializeState() {
        this.errorStates.clear();
        const radioButtons = Array.from(this.el.querySelectorAll("ifx-radio-button"));
        radioButtons.forEach((radioButton) => {
            if (!this.errorStates.has(radioButton)) {
                this.errorStates.set(radioButton, radioButton.error || false);
            }
        });
        this.updateHasErrors();
    }
    updateHasErrors() {
        this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);
    }
    render() {
        return (h("div", { key: '0f12c24f5bb36b514322601f6585ba358a105f99', class: "radio-button-group-container" }, this.showGroupLabel && (h("div", { key: 'dbb800828e6f527f8bed96ca0a8199213fd23427', class: "group-label" }, this.groupLabelText, this.required && (h("span", { key: 'bb424f58c3259a1ac27ea344f222536e656d1ba4', class: `required ${this.hasErrors ? "error" : ""}` }, "*")))), h("div", { key: '38816864ff4788e16d6a4fa9f808126ea2401484', class: `radio-button-group ${this.alignment} ${this.size}` }, h("slot", { key: '3541e10d35efaae631adfce5eedd3eaf67e18399', onSlotchange: this.handleSlotChange })), this.showCaption ? (h("div", { class: `caption ${this.hasErrors ? "error" : "default"}` }, this.showCaptionIcon ? (h("div", { class: "caption-icon" }, h("ifx-icon", { icon: "c-info-16" }))) : (""), h("div", { class: "caption-text" }, this.captionText))) : ("")));
    }
    static get is() { return "ifx-radio-button-group"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["radio-button-group.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["radio-button-group.css"]
        };
    }
    static get properties() {
        return {
            "alignment": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "\"horizontal\" | \"vertical\"",
                    "resolved": "\"horizontal\" | \"vertical\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Layout direction of the checkbox group (horizontal or vertical)."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "alignment",
                "defaultValue": "\"vertical\""
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Size of the checkbox group (e.g. small, medium)."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "size"
            },
            "showGroupLabel": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Whether to show the group label above the checkboxes."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "show-group-label"
            },
            "groupLabelText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Text used as the group label."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "group-label-text",
                "defaultValue": "\"Group Label Text\""
            },
            "showCaption": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Whether to show a caption under the group."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "show-caption"
            },
            "captionText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Text used for the caption below the group."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "caption-text"
            },
            "showCaptionIcon": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Whether to show an icon next to the caption text."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "show-caption-icon"
            },
            "required": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Whether selecting at least one checkbox is required."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "required",
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "hasErrors": {}
        };
    }
    static get methods() {
        return {
            "setGroupError": {
                "complexType": {
                    "signature": "(error: boolean) => Promise<void>",
                    "parameters": [{
                            "name": "error",
                            "type": "boolean",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Method to set the error state of all radio-butttons in the group",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "el"; }
    static get listeners() {
        return [{
                "name": "ifxError",
                "method": "handleRadioButtonError",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
