import { Host, h } from "@stencil/core";
import { messageId } from "../../utils/form";
import { danger } from "@pine-ds/icons/icons";
/**
 * @slot (default) - Child pds-radio components
 */
export class PdsRadioGroup {
    constructor() {
        /**
         * Layout direction for the radio group.
         * @defaultValue column
         */
        this.direction = 'column';
        /**
         * Spacing between radio items. Accepts t-shirt sizes (none, xxs, xs, sm, md, lg, xl, xxl) or core spacing tokens (025, 050, 100, etc.).
         * @defaultValue xs
         */
        this.gap = 'xs';
        /**
         * Determines whether or not the radio group is disabled.
         * @defaultValue false
         */
        this.disabled = false;
        /**
         * Determines whether or not the radio group is invalid.
         * @defaultValue false
         */
        this.invalid = false;
        /**
         * Determines whether or not the radio group is required.
         * @defaultValue false
         */
        this.required = false;
    }
    handlePropsChange() {
        this.updateChildRadios();
    }
    handleRadioChange(event) {
        const target = event.target;
        // Only handle events from radio inputs
        if (target.type !== 'radio') {
            return;
        }
        // Only emit if the radio is being checked (not unchecked)
        if (target.checked) {
            const radioElement = target.closest('pds-radio');
            if (radioElement) {
                this.pdsRadioGroupChange.emit({
                    checked: true,
                    value: radioElement.value,
                    componentId: radioElement.componentId,
                });
            }
        }
    }
    updateChildRadios() {
        const radios = this.el.querySelectorAll('pds-radio');
        radios.forEach((radio) => {
            if (this.name) {
                radio.setAttribute('name', this.name);
            }
            else {
                radio.removeAttribute('name');
            }
            if (this.disabled) {
                radio.setAttribute('disabled', 'true');
            }
            else {
                radio.removeAttribute('disabled');
            }
            if (this.invalid) {
                radio.setAttribute('invalid', 'true');
            }
            else {
                radio.removeAttribute('invalid');
            }
            if (this.required) {
                radio.setAttribute('required', 'true');
            }
            else {
                radio.removeAttribute('required');
            }
        });
    }
    componentWillLoad() {
        // Generate stable group ID once during initialization
        // This ensures DOM stability and accessibility relationships remain consistent across re-renders
        if (this.componentId) {
            this._groupId = this.componentId;
        }
        else {
            // Generate unique ID with fallback for test environments where crypto.randomUUID may not be available
            const uniqueId = typeof crypto !== 'undefined' && crypto.randomUUID
                ? crypto.randomUUID()
                : `${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
            this._groupId = `radio-group-${uniqueId}`;
        }
    }
    componentDidLoad() {
        if (!this.name) {
            console.warn('pds-radio-group: name prop is required for proper radio group functionality');
        }
        this.updateChildRadios();
    }
    classNames() {
        const classNames = [];
        if (this.invalid) {
            classNames.push('is-invalid');
        }
        // The host always uses flex-direction: column, so the label stays above.
        // The direction prop now only affects the .pds-radio-group__radios container.
        // No class needed on host for direction.
        return classNames.join(' ');
    }
    getGapValue() {
        // Map t-shirt sizes to dimension tokens
        const gapMap = {
            none: '0',
            xxs: 'var(--pine-dimension-xxs)',
            xs: 'var(--pine-dimension-xs)',
            sm: 'var(--pine-dimension-sm)',
            md: 'var(--pine-dimension-md)',
            lg: 'var(--pine-dimension-lg)',
            xl: 'var(--pine-dimension-xl)',
            xxl: 'var(--pine-dimension-xxl)',
        };
        // If it's a t-shirt size, use the mapped value
        if (gapMap[this.gap]) {
            return gapMap[this.gap];
        }
        // Otherwise, assume it's a dimension token like "100", "200", etc.
        return `var(--pine-dimension-${this.gap})`;
    }
    getAriaDescribedBy() {
        const messageIds = [];
        if (this.errorMessage) {
            messageIds.push(messageId(this._groupId, 'error'));
        }
        if (this.helperMessage) {
            messageIds.push(messageId(this._groupId, 'helper'));
        }
        return messageIds.length > 0 ? messageIds.join(' ') : undefined;
    }
    render() {
        const gapValue = this.getGapValue();
        const ariaDescribedBy = this.getAriaDescribedBy();
        return (h(Host, { key: '53949e8e878887189482a13e0402402b8ee79c46', class: this.classNames(), id: this._groupId, role: "group", "aria-describedby": ariaDescribedBy, style: {
                '--pds-radio-group-gap': gapValue,
            } }, this.groupLabel && (h("div", { key: '9aa547ff0b60d1eb78ab6806c552391c119c6511', class: "pds-radio-group__label" }, this.groupLabel)), h("div", { key: '5bad4f6d4c685eca8a97b574511f21b93bdf4821', class: {
                'pds-radio-group__radios': true,
                'pds-radio-group__radios--row': this.direction === 'row',
                'pds-radio-group__radios--column': this.direction === 'column',
            } }, h("slot", { key: 'ffd76f30b308f124e1df925b2fe354ffb80f59bc', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (h("div", { key: 'ea8995384b1e1c1e98d01d704bd969a97bfd2b2a', class: "pds-radio-group__message", id: messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (h("div", { key: '30726bc368c7ad2820ae4cb43faf0a45e94a51e8', class: "pds-radio-group__message pds-radio-group__message--error", id: messageId(this._groupId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'acc00b6e36ead10cc5cc01033ad0f619bd75f5da', icon: danger, size: "small" }), this.errorMessage))));
    }
    static get is() { return "pds-radio-group"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() {
        return {
            "$": ["pds-radio-group.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pds-radio-group.css"]
        };
    }
    static get properties() {
        return {
            "componentId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "A unique identifier used for the underlying component `id` attribute."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "component-id"
            },
            "direction": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'row' | 'column'",
                    "resolved": "\"column\" | \"row\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "column"
                        }],
                    "text": "Layout direction for the radio group."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "direction",
                "defaultValue": "'column'"
            },
            "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 for the entire group."
                },
                "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 the radio group."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "helper-message"
            },
            "gap": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "xs"
                        }],
                    "text": "Spacing between radio items. Accepts t-shirt sizes (none, xxs, xs, sm, md, lg, xl, xxl) or core spacing tokens (025, 050, 100, etc.)."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "gap",
                "defaultValue": "'xs'"
            },
            "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 group is disabled."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disabled",
                "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 group is invalid."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "invalid",
                "defaultValue": "false"
            },
            "groupLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "String used for group label/heading."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "group-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. Applied to all child radios.\nRequired for proper radio group behavior (mutual exclusivity and form submission)."
                },
                "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 group is required."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "required",
                "defaultValue": "false"
            }
        };
    }
    static get events() {
        return [{
                "method": "pdsRadioGroupChange",
                "name": "pdsRadioGroupChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emits when a radio in the group is selected, providing the selected value and component ID."
                },
                "complexType": {
                    "original": "RadioGroupChangeEventDetail",
                    "resolved": "RadioGroupChangeEventDetail",
                    "references": {
                        "RadioGroupChangeEventDetail": {
                            "location": "import",
                            "path": "./radio-group-interface",
                            "id": "src/components/pds-radio-group/radio-group-interface.ts::RadioGroupChangeEventDetail"
                        }
                    }
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "name",
                "methodName": "handlePropsChange"
            }, {
                "propName": "disabled",
                "methodName": "handlePropsChange"
            }, {
                "propName": "invalid",
                "methodName": "handlePropsChange"
            }, {
                "propName": "required",
                "methodName": "handlePropsChange"
            }];
    }
    static get listeners() {
        return [{
                "name": "change",
                "method": "handleRadioChange",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
//# sourceMappingURL=pds-radio-group.js.map
