document.addEventListener( 'alpine:init', () => {
	// console.log( 'alpine:init' );
	Alpine.store( 'accordionAttributes', {} );

	Alpine.data( 'heading', () => ( {
		loadGoogleFonts( fontFamilies ) {
			console.log( 'loadGoogleFonts', fontFamilies );

			if ( ! Array.isArray( fontFamilies ) || fontFamilies.length === 0 )
				return;
			const fontNames = fontFamilies
				.map( ( f ) => f.replace( / /g, '+' ) )
				.join( '|' );
			const fontUrl = `https://fonts.googleapis.com/css?family=${ fontNames }:400,700&display=swap`;
			document
				.querySelectorAll( 'link[data-google-font]' )
				.forEach( ( link ) => link.remove() );
			const link = document.createElement( 'link' );
			link.rel = 'stylesheet';
			link.href = fontUrl;
			link.setAttribute( 'data-google-font', fontNames );
			document.head.appendChild( link );
		},
		init() {
			console.log(
				'heading FontFamilies: ',
				this.$root.dataset.fontFamilies
			);
			// Example: load fonts on init
			if ( this.$root && this.$root.dataset.fontFamilies ) {
				try {
					const fonts = JSON.parse( this.$root.dataset.fontFamilies );
					this.loadGoogleFonts( fonts );
				} catch ( e ) {}
			}
		},
	} ) );

	Alpine.data( 'accordions', () => ( {
		attributes: {},
		openItems: [],
		collapseOtherItems: this.attributes?.collapseOtherItems,
		init() {
			// Alpine.store('accordionAttributes', JSON.parse(this.$root.dataset.attributes));
			// this.collapseOtherItems = ! this.$store.accordionAttributes?.collapseOtherItems??true;
			// console.log("accordionAttributes:", this.$store.accordionAttributes.collapseOtherItems);
			// console.log("window?.multiple??true:", window?.multiple??true);

			this.$watch( 'attributes', ( _attributes ) => {
				this.collapseOtherItems = _attributes.collapseOtherItems;

				if ( _attributes.expandFirstItem ) {
					const firstItemId = this.$el.querySelector(
						'.alpha-accordion-item'
					).id;
					this.openItems.push( firstItemId );
				}
			} );
			this.attributes = JSON.parse( this.$root.dataset.attributes );
			this.accordionItem = {
				':id'() {
					return this.$id( 'accordion' );
				},
			};
		},
		updateAttributes( attributes ) {
			this.attributes = attributes;
		},
		toggleMultiple() {
			this.collapseOtherItems = ! this.collapseOtherItems;
		},
		accordionsWrapper: {
			'x-effect'() {
				console.log(
					'effect attributes changes: ',
					this.attributes?.collapseOtherItems
				);
			},
		},
		accordionItem: {},
		accordionHead: {
			'@click'() {
				this.toggleOpen( this.$el );
			},
		},
		accordionContent: {
			'x-collapse'() {
				return true;
			},
			'x-cloak'() {
				return true;
			},
			'x-show'() {
				return this.isOpen( this.$el ) === true;
			},
		},
		closeItem: {
			'x-show'() {
				return this.isOpen( this.$el ) !== true;
			},
		},
		openItem: {
			'x-show'() {
				return this.isOpen( this.$el ) === true;
			},
		},
		clickedId( id ) {
			if ( this.openItems.includes( id ) ) {
				this.openItems = this.openItems.filter(
					( item ) => item !== id
				);
			} else {
				if ( this.collapseOtherItems === false ) {
					this.openItems = [];
				}
				this.openItems.push( id );
			}
		},
		toggleOpen( $el ) {
			$el.closest( '.alpha-accordion-item' ).classList.toggle(
				'accordion-open'
			);
			this.clickedId( $el.closest( '.alpha-accordion-item' ).id );
		},

		isOpen( $el ) {
			return this.openItems.some(
				( item ) => item == $el.closest( '.alpha-accordion-item' ).id
			);
		},
	} ) );

	// Utility: List all fontFamilies from all headings
	window.listAllHeadingFontFamilies = function () {
		const headings = document.querySelectorAll( '[x-data="heading"]' );
		const fontFamilies = [];
		headings.forEach( ( el ) => {
			if ( el.dataset.fontFamilies ) {
				try {
					const fonts = JSON.parse( el.dataset.fontFamilies );
					fontFamilies.push( { element: el, fontFamilies: fonts } );
				} catch ( e ) {
					fontFamilies.push( {
						element: el,
						fontFamilies: 'Invalid JSON',
					} );
				}
			} else {
				fontFamilies.push( { element: el, fontFamilies: 'Not set' } );
			}
		} );
		console.log( 'All heading fontFamilies:', fontFamilies );
		return fontFamilies;
	};
	// Usage: window.listAllHeadingFontFamilies();
} );
