var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { html } from 'lit';
import { property, state } from 'lit/decorators.js';
import { BaseFormAssociatedElement } from './form-associated-element';
// eslint-disable-next-line
// @ts-ignore
import { toggleStyles } from '../toggle-styles';
import { reset } from '../styles';
export class WRadio extends BaseFormAssociatedElement {
    static { this.css = [reset, toggleStyles]; }
    constructor() {
        super();
        this.checked = false;
        /** @internal Used by radio group to force disable radios while preserving their original disabled state. */
        this.forceDisabled = false;
        /**
         * The string pointing to a form's id.
         */
        this.form = null;
        /** The radio's value. When selected, the radio group will receive this value. */
        this.appearance = 'default';
        /**
         * The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this
         * attribute can typically be omitted.
         */
        this.size = 'medium';
        /** Disables the radio. */
        this.disabled = false;
        // Update the handleClick method (around line 75)
        this.handleClick = () => {
            if (!this.disabled && !this.forceDisabled) {
                this.checked = true;
            }
        };
        this.addEventListener('click', this.handleClick);
    }
    connectedCallback() {
        super.connectedCallback();
        this.setInitialAttributes();
    }
    setInitialAttributes() {
        this.setAttribute('role', 'radio');
        this.tabIndex = 0;
        this.setAttribute('aria-disabled', this.disabled || this.forceDisabled ? 'true' : 'false');
    }
    updated(changedProperties) {
        super.updated(changedProperties);
        if (changedProperties.has('checked')) {
            this.customStates.set('checked', this.checked);
            this[this.checked ? 'setAttribute' : 'removeAttribute']('checked-ui', '');
            this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
            // Only set tabIndex if not disabled
            if (!this.disabled && !this.forceDisabled) {
                this.tabIndex = this.checked ? 0 : -1;
            }
        }
        if (changedProperties.has('disabled') || changedProperties.has('forceDisabled')) {
            const effectivelyDisabled = this.disabled || this.forceDisabled;
            this.customStates.set('disabled', effectivelyDisabled);
            this[effectivelyDisabled ? 'setAttribute' : 'removeAttribute']('disabled-ui', '');
            this.setAttribute('aria-disabled', effectivelyDisabled ? 'true' : 'false');
            // Set tabIndex based on disabled state
            if (effectivelyDisabled) {
                this.tabIndex = -1;
            }
            else {
                // Restore proper tabIndex - this will be managed by the radio group
                this.tabIndex = this.checked ? 0 : -1;
            }
        }
    }
    /**
     * @override
     */
    setValue() {
        // We override `setValue` because we don't want to set form values from here. We want to do that in "RadioGroup" itself.
    }
    render() {
        return html `
      <div class="wrapper">
        <div part="control" class="control"></div>
        <slot part="label" class="label"></slot>
      </div>
    `;
    }
}
__decorate([
    state()
], WRadio.prototype, "checked", void 0);
__decorate([
    state()
], WRadio.prototype, "forceDisabled", void 0);
__decorate([
    property({ reflect: true })
], WRadio.prototype, "form", void 0);
__decorate([
    property({ reflect: true })
], WRadio.prototype, "value", void 0);
__decorate([
    property({ reflect: true })
], WRadio.prototype, "appearance", void 0);
__decorate([
    property({ reflect: true })
], WRadio.prototype, "size", void 0);
__decorate([
    property({ type: Boolean })
], WRadio.prototype, "disabled", void 0);
if (!customElements.get('w-radio')) {
    customElements.define('w-radio', WRadio);
}
