import { __decorate } from "tslib";
import { html } from "lit";
import { queryAsync, state } from "lit/decorators.js";
import { when } from 'lit/directives/when.js';
import { classMap } from "lit/directives/class-map.js";
import { RadioSelectionController } from "../controllers/RadioSelectionController.js";
import CheckedElement from "./CheckedElement.js";
import elementStyles from './Radio.styles.js';
import { ripple } from "../effects/rippleDirective.js";
import '../../define/ui/ui-ripple.js';
/**
 * A form-associated radio button.
 *
 * ```html
 * <label>
 *  <api-radio name="fruit" value="apple"></api-radio>
 *  Apple
 * </label>
 * <label>
 *  <api-radio name="fruit" value="banana"></api-radio>
 *  Banana
 * </label>
 * <label>
 *  <api-radio name="fruit" value="mango"></api-radio>
 *  Mango
 * </label>
 * ```
 *
 * The radio supports keyboard navigation as the `<input type="radio"/>` does.
 * Radio buttons are grouped by name. This means if another button with the same name
 * is selected, all other with the same name are deselected. It is possible to use
 * two radio inputs with the same name in different forms in the same document.
 * The grouping only affects inputs inside the form.
 */
export default class RadioElement extends CheckedElement {
    constructor() {
        super(...arguments);
        this.selection = new RadioSelectionController(this);
        this.showRipple = false;
        this.getRipple = () => {
            this.showRipple = true;
            return this.ripple;
        };
        this.renderRipple = () => {
            const { disabled } = this;
            return html `<ui-ripple class="ripple" ?disabled="${disabled}"></ui-ripple>`;
        };
    }
    static get styles() {
        return elementStyles;
    }
    get _validationError() {
        return 'Please select one of these options.';
    }
    endPress(config) {
        const downConfig = { ...config };
        if (this.checked) {
            // prohibits toggling of the radio button.
            downConfig.cancelled = true;
        }
        super.endPress(downConfig);
    }
    connectedCallback() {
        super.connectedCallback();
        this.selection.clearRequired();
        this.selection.clearTabindex();
    }
    handleClick(e) {
        super.handleClick(e);
        this.selection.handleSelection();
        this.focus();
    }
    _setChecked(value = false) {
        if (value) {
            this.selection.handleSelection();
        }
        this._updateFormValue();
        this.setAttribute('aria-checked', String(value));
    }
    async handleKeyDown(e) {
        super.handleKeyDown(e);
        this.selection.handleKeyDown(e);
        if (['Space'].includes(e.code)) {
            const _ripple = await this.getRipple();
            _ripple?.beginPress();
        }
    }
    async handleKeyUp(e) {
        super.handleKeyUp(e);
        if (['Space'].includes(e.code)) {
            const _ripple = await this.getRipple();
            _ripple?.endPress();
        }
    }
    async handleFocus() {
        const _ripple = await this.getRipple();
        _ripple?.beginFocus();
    }
    async handleBlur() {
        const _ripple = await this.getRipple();
        _ripple?.endFocus();
    }
    render() {
        const { pressed = false } = this;
        const surfaceClasses = classMap({
            surface: true,
            pressed,
        });
        return html `
    <div class="${surfaceClasses}" ${ripple(this.getRipple)}>
      <div class="container"></div>
      <div class="state"></div>
      ${when(this.showRipple, this.renderRipple)}
      <div class="content">
        <div class="outer"></div>
        <div class="inner"></div>
      </div>
    </div>
    `;
    }
}
__decorate([
    queryAsync('ui-ripple')
], RadioElement.prototype, "ripple", void 0);
__decorate([
    state()
], RadioElement.prototype, "showRipple", void 0);
//# sourceMappingURL=RadioElement.js.map