
/**
 * WordPress dependencies
 */
import { __ } from '@wordpress/i18n';
import { Suspense } from '@wordpress/element';

/**
 * Internal dependencies
 */
import FormLayer from './FormLayer';
import CTALayer from './CTALayer';
import HotspotLayer from './HotspotLayer';
import Ads from './AdsLayer';
import PollLayer from './PollLayer';

/**
 * Core Layer Components.
 * Additional layer types can be registered via PHP filters.
 */
const coreLayerComponents = {
	form: {
		component: FormLayer,
	},
	cta: {
		component: CTALayer,
	},
	hotspot: {
		component: HotspotLayer,
	},
	ad: {
		component: Ads,
	},
	poll: {
		component: PollLayer,
	},
};

/**
 * Get all registered layer components (core + PHP filtered).
 * PHP filtered components are loaded from window.godamVideoEditorConfig and
 * their actual components are loaded from window.godamLayerComponents.
 *
 * @return {Object} Object containing all registered layer components.
 */
const getLayerComponents = () => {
	const components = { ...coreLayerComponents };

	// Merge with PHP-filtered components (e.g., WooCommerce)
	const phpComponents = window.godamVideoEditorConfig?.layerComponents || {};
	const loadedComponents = window.godamLayerComponents || {};

	Object.keys( phpComponents ).forEach( ( key ) => {
		const componentName = phpComponents[ key ];
		if ( loadedComponents[ componentName ] ) {
			components[ key ] = {
				component: loadedComponents[ componentName ],
			};
		}
	} );

	return components;
};

/**
 * Component to add the layer based on the type.
 *
 * @param {Object}   param0          - Props for the Layer component.
 * @param {Object}   param0.layer    - The layer data containing type and associated metadata.
 * @param {Function} param0.goBack   - Callback to navigate back to the previous step.
 * @param {number}   param0.duration - Duration of the video in seconds or milliseconds.
 *
 * @return {JSX.Element} The rendered Layer component.
 */
const Layer = ( { layer, goBack, duration } ) => {
	const LayerComponents = getLayerComponents();
	const layerType = layer?.type ?? 'cta';
	const Component = LayerComponents[ layerType ]?.component;

	// Fallback to CTA layer if component is not found
	if ( ! Component ) {
		const FallbackComponent = LayerComponents.cta?.component;
		if ( ! FallbackComponent ) {
			return <div>{ __( 'Error: No layer components registered', 'godam' ) }</div>;
		}
		return <FallbackComponent layerID={ layer.id } goBack={ goBack } duration={ duration } />;
	}

	return (
		<Suspense fallback={ <div>{ __( 'Loading layer…', 'godam' ) }</div> }>
			<Component layerID={ layer.id } goBack={ goBack } duration={ duration } />
		</Suspense>
	);
};

/**
 * Export default `Layer` component.
 */
export default Layer;
