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 Checkbox {
    inputElement;
    el;
    /**
     * Indicates whether the checkbox is disabled. When true, the checkbox cannot be interacted with and will have a disabled appearance.
     */
    disabled = false;
    /**
 * The name attribute of the input element.
 */
    name;
    /**
     * The state of the checkbox. When true, the checkbox is checked; when false, it is unchecked.
     */
    checked = false;
    /**
     * Indicates whether the checkbox is in an indeterminate state. When true, the checkbox will have an indeterminate appearance, which is typically used to indicate a "partially selected" state in a group of checkboxes.
     */
    indeterminate = false;
    /**
     * Indicates whether the checkbox is in an error state. When true, the checkbox will have an error appearance.
     */
    error = false;
    /**
     * The size of the checkbox. Can be "m" for medium (default) or "s" for small. This prop controls the overall dimensions of the checkbox and its label.
     */
    size = "m";
    /**
     * The value associated with the checkbox.
     * This value is typically submitted with a form when the checkbox is checked.
     * If not specified, it defaults to "on" when the checkbox is checked.
     */
    value;
    internalIndeterminate;
    internals;
    // Store the initial checked state for form reset
    initialChecked;
    /**
     * Event emitted when the checkbox state changes.
     * Emits the new checked state as a boolean value.
     */
    ifxChange;
    /**
     * Event emitted when the error state changes.
     * Emits the new error state as a boolean value.
     */
    ifxError;
    /**
     * Method to get the current checked state of the checkbox.
     * @returns A promise that resolves to a boolean indicating whether the checkbox is checked.
     */
    async isChecked() {
        return this.checked;
    }
    /**
     * Method to set the checked state of the checkbox.
     * @param newVal A boolean value to set the checked state of the checkbox.
     * @returns A promise that resolves when the checked state has been updated.
     */
    async setChecked(newVal) {
        this.checked = newVal;
    }
    /**
     * @deprecated Use `setChecked` instead.
     */
    async toggleCheckedState(newVal) {
        this.checked = newVal;
    }
    /**
     * Toggles the checked state.
     * @returns Resolves when the toggle is complete.
     */
    async toggle() {
        this.handleCheckbox();
        return Promise.resolve(this.checked);
    }
    valueChanged(newValue, oldValue) {
        if (newValue !== oldValue) {
            this.checked = newValue;
            this.inputElement.checked = this.checked; // update the checkbox's checked property
        }
    }
    errorChanged(newValue, oldValue) {
        if (newValue !== oldValue) {
            this.ifxError.emit(newValue);
        }
    }
    indeterminateChanged(newValue, oldValue) {
        if (newValue !== oldValue) {
            this.internalIndeterminate = newValue;
            this.inputElement.indeterminate = this.internalIndeterminate; // update the checkbox's indeterminate property
            // Update form value when indeterminate state changes
            if (newValue) {
                // Indeterminate state should not submit a value
                this.internals.setFormValue(null);
            }
            else if (this.checked) {
                // If becoming determinate and checked, set the form value
                const formValue = this.value !== undefined ? this.value : "on";
                this.internals.setFormValue(formValue);
            }
        }
    }
    componentWillLoad() {
        this.checked = this.checked;
        this.internalIndeterminate = this.indeterminate;
        // Store initial checked state for form reset
        this.initialChecked = this.checked;
    }
    async componentDidLoad() {
        if (!isNestedInIfxComponent(this.el)) {
            const framework = detectFramework();
            trackComponent("ifx-checkbox", await framework);
        }
        // Set initial form value if checkbox is checked and not indeterminate
        if (this.checked && !this.internalIndeterminate) {
            const formValue = this.value !== undefined ? this.value : "on";
            this.internals.setFormValue(formValue);
        }
        else {
            this.internals.setFormValue(null);
        }
    }
    componentDidRender() {
        this.inputElement.indeterminate = this.internalIndeterminate;
    }
    /**
     * Callback for form association.
     * Called whenever the form is reset.
     * Resets the checkbox to its initial state.
     */
    formResetCallback() {
        // Reset to initial checked state
        this.checked = this.initialChecked;
        if (this.inputElement) {
            this.inputElement.checked = this.initialChecked;
        }
        // Update form value based on initial state
        if (this.initialChecked) {
            const formValue = this.value !== undefined ? this.value : "on";
            this.internals.setFormValue(formValue);
        }
        else {
            this.internals.setFormValue(null);
        }
    }
    handleCheckbox(fromInput = false) {
        if (this.disabled) {
            if (fromInput) {
                this.inputElement.checked = this.checked;
            }
            return;
        }
        if (fromInput) {
            if (this.inputElement.indeterminate) {
                this.inputElement.indeterminate = false;
                this.internalIndeterminate = false;
            }
            this.checked = this.inputElement.checked;
        }
        else if (!this.inputElement.indeterminate) {
            this.checked = !this.checked;
            this.inputElement.checked = this.checked;
        }
        if (this.checked && !this.internalIndeterminate) {
            if (this.value !== undefined) {
                this.internals.setFormValue(this.value);
            }
            else {
                this.internals.setFormValue("on");
            }
        }
        else {
            this.internals.setFormValue(null);
        }
        this.ifxChange.emit(this.checked);
    }
    setInputElement(el) {
        this.inputElement = el;
    }
    render() {
        const slot = this.el.innerHTML;
        let hasSlot = false;
        if (slot) {
            hasSlot = true;
        }
        return (h("div", { key: 'd4fa18c753833dbe4fd2b0a13e89c551f37403f6', class: "checkbox__container" }, h("input", { key: '0a5321031aa4f773d1b63f62be9708a9b41b0811', type: "checkbox", name: this.name, class: "checkbox__input", ref: (el) => this.setInputElement(el), checked: this.checked, onChange: () => this.handleCheckbox(true), id: "checkbox", value: `${this.value}`, disabled: this.disabled ? true : undefined }), h("label", { key: '62dc9f0df8a02aa771f12a0570eef9ea01ba1170', htmlFor: "checkbox", class: `checkbox__wrapper 
						${this.getCheckedClassName()}
						${this.size === "m" ? "checkbox-m" : ""}
						${this.indeterminate ? "indeterminate" : ""}
						${this.disabled ? "disabled" : ""}` }, this.checked && !this.internalIndeterminate && (h("ifx-icon", { key: '984aae05b9d142e243647d2f60e18ff81f12909e', icon: "check-16" }))), hasSlot && (h("label", { key: '6df496ba331d0fa355976d365f4e8bc369d13955', id: "label", htmlFor: "checkbox", class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? "disabled" : ""} ` }, h("slot", { key: '7730d2d356a3cb23b64c591a506c2cbcf3979e5d' })))));
    }
    getCheckedClassName() {
        if (this.error) {
            if (this.checked) {
                return "checked error";
            }
            else {
                return "error";
            }
        }
        else if (this.checked) {
            return "checked";
        }
        else
            return "";
    }
    static get is() { return "ifx-checkbox"; }
    static get encapsulation() { return "shadow"; }
    static get formAssociated() { return true; }
    static get originalStyleUrls() {
        return {
            "$": ["checkbox.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["checkbox.css"]
        };
    }
    static get properties() {
        return {
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Indicates whether the checkbox is disabled. When true, the checkbox cannot be interacted with and will have a disabled appearance."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disabled",
                "defaultValue": "false"
            },
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The name attribute of the input element."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "name"
            },
            "checked": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The state of the checkbox. When true, the checkbox is checked; when false, it is unchecked."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "checked",
                "defaultValue": "false"
            },
            "indeterminate": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Indicates whether the checkbox is in an indeterminate state. When true, the checkbox will have an indeterminate appearance, which is typically used to indicate a \"partially selected\" state in a group of checkboxes."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "indeterminate",
                "defaultValue": "false"
            },
            "error": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Indicates whether the checkbox is in an error state. When true, the checkbox will have an error appearance."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "error",
                "defaultValue": "false"
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The size of the checkbox. Can be \"m\" for medium (default) or \"s\" for small. This prop controls the overall dimensions of the checkbox and its label."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "size",
                "defaultValue": "\"m\""
            },
            "value": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The value associated with the checkbox. \nThis value is typically submitted with a form when the checkbox is checked. \nIf not specified, it defaults to \"on\" when the checkbox is checked."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "value"
            }
        };
    }
    static get states() {
        return {
            "internalIndeterminate": {}
        };
    }
    static get events() {
        return [{
                "method": "ifxChange",
                "name": "ifxChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Event emitted when the checkbox state changes.\nEmits the new checked state as a boolean value."
                },
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                }
            }, {
                "method": "ifxError",
                "name": "ifxError",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Event emitted when the error state changes.\nEmits the new error state as a boolean value."
                },
                "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": "Method to get the current checked state of the checkbox.",
                    "tags": [{
                            "name": "returns",
                            "text": "A promise that resolves to a boolean indicating whether the checkbox is checked."
                        }]
                }
            },
            "setChecked": {
                "complexType": {
                    "signature": "(newVal: boolean) => Promise<void>",
                    "parameters": [{
                            "name": "newVal",
                            "type": "boolean",
                            "docs": "A boolean value to set the checked state of the checkbox."
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Method to set the checked state of the checkbox.",
                    "tags": [{
                            "name": "param",
                            "text": "newVal A boolean value to set the checked state of the checkbox."
                        }, {
                            "name": "returns",
                            "text": "A promise that resolves when the checked state has been updated."
                        }]
                }
            },
            "toggleCheckedState": {
                "complexType": {
                    "signature": "(newVal: boolean) => Promise<void>",
                    "parameters": [{
                            "name": "newVal",
                            "type": "boolean",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "",
                    "tags": [{
                            "name": "deprecated",
                            "text": "Use `setChecked` instead."
                        }]
                }
            },
            "toggle": {
                "complexType": {
                    "signature": "() => Promise<boolean>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<boolean>"
                },
                "docs": {
                    "text": "Toggles the checked state.",
                    "tags": [{
                            "name": "returns",
                            "text": "Resolves when the toggle is complete."
                        }]
                }
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "checked",
                "methodName": "valueChanged"
            }, {
                "propName": "error",
                "methodName": "errorChanged"
            }, {
                "propName": "indeterminate",
                "methodName": "indeterminateChanged"
            }];
    }
    static get attachInternalsMemberName() { return "internals"; }
}
//# sourceMappingURL=checkbox.js.map
