/**
 * customizer.ts  (replaces js/customizer.js)
 * Binds postMessage handlers for the WordPress Customizer live preview.
 */

declare const wp: {
	customize: {
		bind( event: string, callback: () => void ): void;
		( settingId: string, callback: ( value: { get(): string; bind( cb: ( v: string ) => void ): void } ) => void ): void;
	};
};

( function () {
	'use strict';

	wp.customize( 'blogname', ( value ) => {
		value.bind( ( to: string ) => {
			const el = document.querySelector<HTMLElement>( '.site-title a' );
			if ( el ) el.textContent = to;
		} );
	} );

	wp.customize( 'blogdescription', ( value ) => {
		value.bind( ( to: string ) => {
			const el = document.querySelector<HTMLElement>( '.site-description' );
			if ( el ) el.textContent = to;
		} );
	} );

	wp.customize( 'header_textcolor', ( value ) => {
		value.bind( ( to: string ) => {
			const els = document.querySelectorAll<HTMLElement>( '.site-title a, .site-description' );
			els.forEach( ( el ) => {
				el.style.color = to === 'blank' ? 'transparent' : to;
			} );
		} );
	} );

	wp.customize( 'cyywordpress_welcome_text', ( value ) => {
		value.bind( ( to: string ) => {
			const el = document.querySelector<HTMLElement>( '.welcome-banner' );
			if ( el ) el.textContent = to;
		} );
	} );
} )();
