import { html } from 'lit';
import { customElement, property, queryAssignedElements } from 'lit/decorators.js';
import { GlElement, observe } from '../element.js';
import { radioStyles } from './radio.css.js';
import type { Radio } from './radio.js';

import '../code-icon.js';

export const tagName = 'gl-radio-group';

@customElement(tagName)
export class RadioGroup extends GlElement {
	static override readonly styles = [radioStyles];

	@property({ type: Boolean, reflect: true })
	disabled: boolean = false;

	@property({ type: String })
	value?: string;

	@observe(['value', 'disabled'])
	private handleValueChange() {
		this.updateRadioElements();
	}

	@queryAssignedElements({ flatten: true })
	private radioEls!: Radio[];

	override firstUpdated(): void {
		this.role = 'group';
	}

	private updateRadioElements(updateParentGroup = false) {
		this.radioEls.forEach(radio => {
			if (updateParentGroup) {
				radio.parentGroup = this;
			}
			radio.checked = radio.value === this.value;
			radio.disabled = this.disabled;
		});
	}

	override render(): unknown {
		return html`<slot @slotchange=${() => this.updateRadioElements(true)}></slot>`;
	}

	setValue(value: string): void {
		this.value = value;
		const event = new CustomEvent('gl-change-value');
		this.dispatchEvent(event);
	}
}

declare global {
	interface HTMLElementTagNameMap {
		[tagName]: RadioGroup;
	}
}
