/* eslint-disable no-undef */
import { loadStyles, addXCloakStyle } from '../utils.js';

export class RewardsLauncher extends HTMLElement {
	constructor() {
		super();
		this.attachShadow(
			{
				mode: 'open',
			}
		);
	}

	async connectedCallback() {
		const template = document.getElementById( 'rewards-launcher-template' );

		if ( ! template ) {
			throw new Error( 'Template not found: rewards-launcher-template' );
		}

		addXCloakStyle( this.shadowRoot );

		const templateContent = template.content.cloneNode( true );
		this.shadowRoot.appendChild( templateContent );

		// Load styles.
		await loadStyles( this.shadowRoot );

		// Initialize Alpine.js within the shadow DOM.
		if ( ! window.Alpine ) {
			return;
		}

		window.Alpine.initTree( this.shadowRoot );
	}
}
