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 SegmentedControl {
    el;
    /** Fired when the selected segment changes (previous and new value). */
    ifxChange;
    /** Helper text shown below the segmented control. */
    caption = "";
    /** Label text shown above the segmented control. */
    label = "";
    /** Size of the segmented control (regular or small). */
    size = "regular";
    /** Whether choosing a value is required. */
    required = false;
    /** If true, shows the segmented control in an error state. */
    error = false;
    onSegmentSelect(event) {
        const { previousValue, selectedValue } = this.unselectPreviousSegment(event.detail);
        this.selectedValue = selectedValue;
        this.ifxChange.emit({ previousValue, selectedValue });
    }
    selectedValue = "";
    unselectPreviousSegment(newSelectedIndex) {
        let previousValue;
        let selectedValue;
        const segments = this.getSegments();
        segments.forEach((control) => {
            if (control.selected) {
                if (control.segmentIndex !== newSelectedIndex) {
                    control.selected = false;
                    previousValue = control.value;
                }
                else {
                    selectedValue = control.value;
                }
            }
        });
        return { previousValue, selectedValue };
    }
    getSegments() {
        return this.el.querySelectorAll("ifx-segment");
    }
    setActiveSegment() {
        const segments = this.getSegments();
        let activeSegmentedControlFound = false;
        segments.forEach((control, idx) => {
            control.segmentIndex = idx;
            if (activeSegmentedControlFound) {
                if (control.selected)
                    control.selected = false;
            }
            else {
                if (control.selected) {
                    activeSegmentedControlFound = true;
                    this.selectedValue = control.value;
                }
            }
        });
    }
    setSegmentSize() {
        const segments = this.getSegments();
        segments.forEach((control) => {
            control.shadowRoot
                .querySelector(".segment")
                .classList.add(`segment--${this.size}`);
        });
    }
    async componentDidLoad() {
        if (!isNestedInIfxComponent(this.el)) {
            const framework = detectFramework();
            trackComponent("ifx-segmented-control", await framework);
        }
        this.setActiveSegment();
    }
    render() {
        return (h("div", { key: '2f1d91daf15a367b18fcef6ff72c142dab8c9b98', "aria-value": this.selectedValue, "aria-label": "segmented control", class: "group" }, h("div", { key: '992df80e17f0631903a242649ff6f219f66f0d2d', class: "group__label" }, this.label.trim(), this.required && this.label.trim().toLowerCase() !== "" && (h("span", { key: '97d41b8045eb735aed381db27ccbbbb08a82ac33', class: `required ${this.error ? "error" : ""}` }, "*"))), h("div", { key: 'f104d35a4ce0d994b016113f3b498e417b7323bc', class: "group__controls" }, h("slot", { key: '9f96d3cb140ef0a43aa4ef30677261373dd7907b' })), this.caption.trim() && (h("div", { key: '896da68b262a2cf1d362477d29a29276816dcfd4', class: `group__caption ${this.error ? "error" : ""}` }, h("ifx-icon", { key: '391a3b6f37db6021e407fa68dcf9fedebd61533f', icon: "c-info-16" }), " ", this.caption.trim()))));
    }
    componentDidRender() {
        this.setSegmentSize();
    }
    static get is() { return "ifx-segmented-control"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["segmented-control.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["segmented-control.css"]
        };
    }
    static get properties() {
        return {
            "caption": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Helper text shown below the segmented control."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "caption",
                "defaultValue": "\"\""
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Label text shown above the segmented control."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "label",
                "defaultValue": "\"\""
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "\"regular\" | \"small\"",
                    "resolved": "\"regular\" | \"small\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Size of the segmented control (regular or small)."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "size",
                "defaultValue": "\"regular\""
            },
            "required": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Whether choosing a value is required."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "required",
                "defaultValue": "false"
            },
            "error": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If true, shows the segmented control in an error state."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "error",
                "defaultValue": "false"
            }
        };
    }
    static get events() {
        return [{
                "method": "ifxChange",
                "name": "ifxChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Fired when the selected segment changes (previous and new value)."
                },
                "complexType": {
                    "original": "{\n\t\tpreviousValue: string;\n\t\tselectedValue: string;\n\t}",
                    "resolved": "{ previousValue: string; selectedValue: string; }",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get listeners() {
        return [{
                "name": "segmentSelect",
                "method": "onSegmentSelect",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
