import { safeCustomElement } from "../../shared/safe-custom-element.js";
import { TailwindElement } from "../../shared/tailwind-element/index.js";
import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.js";
import { html } from "lit";
import { property, state } from "lit/decorators.js";
//#region src/components/lukso-radio-group/index.ts
var LuksoRadioGroup = class LuksoRadioGroup extends TailwindElement {
	constructor(..._args) {
		super(..._args);
		this.name = "";
		this.value = "";
		this.autofocus = false;
		this.focusedIndex = -1;
		this.radios = [];
	}
	isHorizontalLayout() {
		const firstRadio = this.querySelector("lukso-radio");
		if (!firstRadio) return false;
		const secondRadio = firstRadio.nextElementSibling;
		if (!secondRadio) return false;
		const firstRect = firstRadio.getBoundingClientRect();
		const secondRect = secondRadio.getBoundingClientRect();
		return Math.abs(secondRect.left - firstRect.left) > Math.abs(secondRect.top - firstRect.top);
	}
	handleChange(e) {
		const newValue = e.detail.value;
		this.value = newValue;
		this.updateRadios();
		this.dispatchEvent(new CustomEvent("change", {
			detail: { value: this.value },
			bubbles: true,
			composed: true
		}));
	}
	updateRadios() {
		const radios = this.querySelectorAll("lukso-radio");
		for (const el of radios) el.checked = el.value === this.value;
	}
	setupInitialState() {
		this.updateRadios();
		setTimeout(() => this.updateRadios(), 50);
		setTimeout(() => this.updateRadios(), 150);
	}
	handleKeydown(e) {
		this.radios = Array.from(this.querySelectorAll("lukso-radio"));
		if (!this.radios.length) return;
		const selectedIndex = this.radios.findIndex((radio) => radio.checked);
		if (this.focusedIndex === -1) this.focusedIndex = selectedIndex >= 0 ? selectedIndex : 0;
		let newIndex = this.focusedIndex;
		const isHorizontal = this.isHorizontalLayout();
		switch (e.key) {
			case "ArrowDown":
				e.preventDefault();
				if (!isHorizontal) newIndex = (this.focusedIndex + 1) % this.radios.length;
				break;
			case "ArrowRight":
				e.preventDefault();
				newIndex = (this.focusedIndex + 1) % this.radios.length;
				break;
			case "ArrowUp":
				e.preventDefault();
				if (!isHorizontal) newIndex = (this.focusedIndex - 1 + this.radios.length) % this.radios.length;
				break;
			case "ArrowLeft":
				e.preventDefault();
				newIndex = (this.focusedIndex - 1 + this.radios.length) % this.radios.length;
				break;
			case "Home":
				e.preventDefault();
				newIndex = 0;
				break;
			case "End":
				e.preventDefault();
				newIndex = this.radios.length - 1;
				break;
			default: return;
		}
		if (newIndex !== this.focusedIndex) {
			this.focusedIndex = newIndex;
			const radioToFocus = this.radios[newIndex];
			if (!radioToFocus.isDisabled && !radioToFocus.isReadonly) {
				radioToFocus.focus();
				this.value = radioToFocus.value;
				this.updateRadios();
				this.dispatchEvent(new CustomEvent("change", {
					detail: { value: this.value },
					bubbles: true,
					composed: true
				}));
			}
		}
	}
	connectedCallback() {
		super.connectedCallback();
		this.addEventListener("on-change", this.handleChange);
		this.addEventListener("keydown", this.handleKeydown);
		this.setupInitialState();
		if (this.autofocus) setTimeout(() => this.handleGroupFocus(), 50);
	}
	updated(changedProperties) {
		super.updated?.(changedProperties);
		if (changedProperties.has("value")) this.updateRadios();
	}
	attributeChangedCallback(name, oldVal, newVal) {
		super.attributeChangedCallback(name, oldVal, newVal);
		if (name === "value" && oldVal !== newVal && this.isConnected) this.updateRadios();
	}
	disconnectedCallback() {
		this.removeEventListener("on-change", this.handleChange);
		this.removeEventListener("keydown", this.handleKeydown);
		super.disconnectedCallback();
	}
	handleGroupFocus() {
		if (!this.isConnected) return;
		const radios = Array.from(this.querySelectorAll("lukso-radio"));
		if (!radios.length) return;
		const selectedRadio = radios.find((radio) => radio.checked && !radio.isDisabled && !radio.isReadonly);
		const firstEnabledRadio = radios.find((radio) => !radio.isDisabled && !radio.isReadonly);
		const radioToFocus = selectedRadio || firstEnabledRadio;
		if (radioToFocus) setTimeout(() => radioToFocus.focus(), 0);
	}
	render() {
		return html`
      <div
        role="radiogroup"
        aria-label="${this.name}"
        tabindex="0"
        @focus="${this.handleGroupFocus}"
      >
        <slot></slot>
      </div>
    `;
	}
};
__decorate([property({ type: String })], LuksoRadioGroup.prototype, "name", void 0);
__decorate([property({ type: String })], LuksoRadioGroup.prototype, "value", void 0);
__decorate([property({ type: Boolean })], LuksoRadioGroup.prototype, "autofocus", void 0);
__decorate([state()], LuksoRadioGroup.prototype, "focusedIndex", void 0);
__decorate([state()], LuksoRadioGroup.prototype, "radios", void 0);
LuksoRadioGroup = __decorate([safeCustomElement("lukso-radio-group")], LuksoRadioGroup);
//#endregion
export { LuksoRadioGroup };
