import { h } from "@stencil/core";
import { trackComponent } from "../../global/utils/tracking";
import { isNestedInIfxComponent } from "../../global/utils/dom-utils";
import { detectFramework } from "../../global/utils/framework-detection";
export class Switch {
    constructor() {
        this.checked = false;
        this.name = '';
        this.disabled = false;
        this.internalChecked = false;
    }
    async isChecked() {
        return this.internalChecked;
    }
    componentWillLoad() {
        this.internalChecked = this.checked;
    }
    toggleLabelGap() {
        const slot = this.el.shadowRoot.querySelector('slot');
        const container = this.el.shadowRoot.querySelector('.container');
        if (slot.assignedNodes().length) {
            container.classList.add('gap');
        }
        else {
            container.classList.remove('gap');
        }
    }
    async componentDidLoad() {
        if (!isNestedInIfxComponent(this.el)) {
            const framework = detectFramework();
            trackComponent('ifx-switch', await framework);
        }
        this.toggleLabelGap();
    }
    valueChanged(newValue, oldValue) {
        if (newValue !== oldValue) {
            this.internalChecked = newValue;
        }
    }
    toggleSwitch() {
        if (this.disabled)
            return;
        this.internalChecked = !this.internalChecked;
        if (this.internalChecked) {
            if (this.value !== undefined) {
                //this.internals.setFormValue(this.value);
            }
            else {
                //this.internals.setFormValue("on")
            }
        }
        else {
            //this.internals.setFormValue(null)
        }
        this.ifxChange.emit(this.internalChecked);
    }
    handleKeyDown(event) {
        if (this.disabled)
            return;
        // If the pressed key is either 'Enter' or 'Space' 
        if (event.key === 'Enter' || event.key === ' ') {
            this.toggleSwitch();
        }
    }
    /**
     * Callback for form association.
     * Called whenever the form is reset.
     */
    // formResetCallback() {
    //   this.internals.setFormValue(null);
    // }
    render() {
        return (h("div", { key: 'dac7ec48eba63ea4fea619b38bc2d42050335fb3', class: "container", role: "switch", "aria-checked": this.internalChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-labelledby": "switch-label", onClick: () => this.toggleSwitch(), onKeyDown: (event) => this.handleKeyDown(event) }, h("div", { key: '4e331d64ea1bd5c2a76b730523c250add430e620', class: `switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`, tabindex: "0" }, h("div", { key: '7f9d1690039ed6a4a99e4204c0358088aa1f459a', class: "switch__checkbox-wrapper" }, h("input", { key: '9b1b492b35cd3bf74143370bbdf79dc97d456893', type: "checkbox", hidden: true, name: this.name, disabled: this.disabled, checked: this.internalChecked, value: `${this.value}` }), h("div", { key: '27559d56f6fb75e90ac15590245668af0b1ab447', class: `switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}` }))), h("div", { key: '783db5d3a6d1619b96ac97501bb889bb1f6a75bc', class: `switch__label-wrapper ${this.disabled ? 'disabled' : ''}` }, h("label", { key: 'ee10d23ac2b7d8d693a3ff8a85fb7af9b09c3445', htmlFor: "switch" }, h("slot", { key: '3b7b243ac57f43997f0111500e59667c2b8c75be', onSlotchange: () => this.toggleLabelGap() })))));
    }
    static get is() { return "ifx-switch"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["switch.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["switch.css"]
        };
    }
    static get properties() {
        return {
            "checked": {
                "type": "boolean",
                "attribute": "checked",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "name": {
                "type": "string",
                "attribute": "name",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "''"
            },
            "disabled": {
                "type": "boolean",
                "attribute": "disabled",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "value": {
                "type": "string",
                "attribute": "value",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "internalChecked": {}
        };
    }
    static get events() {
        return [{
                "method": "ifxChange",
                "name": "ifxChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                }
            }];
    }
    static get methods() {
        return {
            "isChecked": {
                "complexType": {
                    "signature": "() => Promise<boolean>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<boolean>"
                },
                "docs": {
                    "text": "",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "checked",
                "methodName": "valueChanged"
            }];
    }
    static get attachInternalsMemberName() { return "internals"; }
}
//# sourceMappingURL=switch.js.map
