/**
 * PosePickerPopover web component
 *
 * Scrolls the selected style into view when the style picker list becomes
 * visible (e.g. tab switch or popover open).
 */
class PosePickerPopover extends HTMLElement {
	#styleListObserver;

	connectedCallback() {
		// When the style picker list becomes visible (e.g. tab switch or
		// popover open), scroll the selected style into view.
		const styleList = this.querySelector(".style-picker-list");
		if (styleList) {
			this.#styleListObserver = new IntersectionObserver(([entry]) => {
				if (entry.isIntersecting) {
					const checked = styleList.querySelector("input:checked");
					checked
						?.closest("label")
						?.scrollIntoView({ block: "nearest" });
				}
			});
			this.#styleListObserver.observe(styleList);
		}
	}

	disconnectedCallback() {
		this.#styleListObserver?.disconnect();
	}
}

customElements.define("pose-picker-popover", PosePickerPopover);