/**
 * Payment method picker (Bankkártyás fizetés page).
 *
 * Desktop: one illustration at a time; clicking a method card shows its panel. Mobile: every
 * panel is visible, so every trigger reports `aria-expanded="true"`.
 *
 * Markup contract: `[data-payment-methods]` wraps `<button data-payment-method aria-controls="id">`
 * triggers; the visible panel carries `data-active` (CSS hides the rest on desktop).
 */
const desktop = window.matchMedia('(min-width: 64rem)');

for (const root of document.querySelectorAll<HTMLElement>('[data-payment-methods]')) {
	const triggers = [...root.querySelectorAll<HTMLButtonElement>('[data-payment-method]')];
	const panelOf = (trigger: HTMLElement) => document.getElementById(trigger.getAttribute('aria-controls') ?? '');

	const sync = () => {
		for (const trigger of triggers) {
			const active = panelOf(trigger)?.hasAttribute('data-active') ?? false;
			trigger.setAttribute('aria-expanded', String(!desktop.matches || active));
		}
	};

	const select = (selected: HTMLButtonElement) => {
		for (const trigger of triggers) panelOf(trigger)?.toggleAttribute('data-active', trigger === selected);
		sync();
	};

	for (const trigger of triggers) trigger.addEventListener('click', () => select(trigger));
	desktop.addEventListener('change', sync);
	sync();
}