import { Host, h } from "@stencil/core";
import { assignDescription, messageId, exposeTypeProperty } from "../../utils/form";
import { danger } from "@pine-ds/icons/icons";
/**
 * @slot image - Custom image content to display instead of the default radio input
 * @part image-container - The container for the image
 */
export class PdsRadio {
    constructor() {
        this._type = 'radio';
        this._hasImage = false;
        /**
         * Determines whether or not the radio is checked.
         * @defaultValue false
         */
        this.checked = false;
        /**
         * Determines whether or not the radio is disabled.
         * @defaultValue false
         */
        this.disabled = false;
        /**
         * Adds a border around the radio component for better visual separation.
         * @defaultValue false
         */
        this.hasBorder = false;
        /**
       * Determines whether or not the radio is invalid.
       * @defaultValue false
       */
        this.invalid = false;
        /**
         * Determines whether or not the radio is required.
         * @defaultValue false
         */
        this.required = false;
        this.handleRadioChange = (e) => {
            if (this.disabled) {
                return;
            }
            const target = e.target;
            const isChecked = target.checked;
            // If this radio is inside a pds-radio-group, don't emit the individual event
            // The group will handle emitting its own event
            if (this.el.closest('pds-radio-group')) {
                return;
            }
            this.pdsRadioChange.emit(isChecked);
        };
    }
    hasImageSlot() {
        const imageSlot = this.el.querySelector('[slot="image"]');
        return !!imageSlot;
    }
    hasImage() {
        return this._hasImage;
    }
    classNames() {
        const classNames = [];
        if (this.invalid) {
            classNames.push('is-invalid');
        }
        if (this.disabled) {
            classNames.push('is-disabled');
        }
        if (this.hasBorder) {
            classNames.push('has-border');
        }
        if (this.hasImage()) {
            classNames.push('has-image');
        }
        return classNames.join(' ');
    }
    componentWillLoad() {
        this._hasImage = this.hasImageSlot();
    }
    connectedCallback() {
        // Expose type property on the element instance to match native form element behavior
        exposeTypeProperty(this.el, () => this._type);
    }
    render() {
        const renderLabelAndMessages = () => [
            h("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, h("input", { key: '75aca490be2db050f66ddd9cb45ce122bea4db53', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "radio", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleRadioChange, class: this.hasImage() ? 'visually-hidden' : '' }), h("span", { key: '1bbc7398d3be35e301526b0f842274a3f1db4457', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)),
            this.helperMessage && (h("div", { key: `${this.componentId}-helper`, class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage)),
            this.errorMessage && (h("div", { key: `${this.componentId}-error`, class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'e1a1228fa52e68623098f09493d93aa03d2e65c4', icon: danger, size: "small" }), this.errorMessage))
        ];
        return (h(Host, { key: '60fabeef5778fd30e46cfd23d05684e1743bc57f', class: this.classNames() }, this.hasImage() && (h("div", { key: '9ba3e60182a68cc8e996623cf46e17001ff451f6', class: "pds-radio__image-container", part: "image-container" }, h("slot", { key: 'bf8927129eb68ee7ed07a1f8f8727f013254e133', name: "image", onSlotchange: () => (this._hasImage = this.hasImageSlot()) }))), this.hasImage() ? (h("div", { class: "pds-radio__content-wrapper" }, renderLabelAndMessages())) : (renderLabelAndMessages())));
    }
    static get is() { return "pds-radio"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() {
        return {
            "$": ["../../global/styles/utils/label.scss", "pds-radio.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["../../global/styles/utils/label.css", "pds-radio.css"]
        };
    }
    static get properties() {
        return {
            "checked": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "false"
                        }],
                    "text": "Determines whether or not the radio is checked."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "checked",
                "defaultValue": "false"
            },
            "componentId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "A unique identifier used for the underlying component `id` attribute and the label `for` attribute."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "component-id"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "false"
                        }],
                    "text": "Determines whether or not the radio is disabled."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disabled",
                "defaultValue": "false"
            },
            "errorMessage": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Displays error message text describing an invalid state."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "error-message"
            },
            "helperMessage": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Displays helper message text below radio."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "helper-message"
            },
            "hasBorder": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "false"
                        }],
                    "text": "Adds a border around the radio component for better visual separation."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "has-border",
                "defaultValue": "false"
            },
            "invalid": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "false"
                        }],
                    "text": "Determines whether or not the radio is invalid."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "invalid",
                "defaultValue": "false"
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "String used for label text next to radio."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "label"
            },
            "hideLabel": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Visually hides the label text for instances where only the radio should be displayed. Label remains accessible to assistive technology such as screen readers."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "hide-label"
            },
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "String used for radio `name` attribute."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "name"
            },
            "required": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "false"
                        }],
                    "text": "Determines whether or not the radio is required."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "required",
                "defaultValue": "false"
            },
            "value": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The value of the radio that is submitted with a form."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "value"
            }
        };
    }
    static get states() {
        return {
            "_hasImage": {}
        };
    }
    static get events() {
        return [{
                "method": "pdsRadioChange",
                "name": "pdsRadioChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emits a boolean indicating whether the radio is currently checked or unchecked."
                },
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=pds-radio.js.map
