import { __ } from '@wordpress/i18n';
import ImageGallery from './type/ImageGallery';
import FileUploader from './type/FileUploader';
import MediaPlayer from './type/MediaPlayer';
// import FileBrowser from './type/FileBrowser';

const App = ({ data, accountId }) => {
	// Check if pro component is available for this shortcode type
	if (window.EDBI_PRO_Components && window.EDBI_PRO_Components[data.type]) {
		const ProComponent = window.EDBI_PRO_Components[data.type];

		// For uploader type, use pro component as a wrapper around free component
		if (data.type === 'uploader') {
			return (
				<ProComponent data={data} accountId={accountId}>
					<FileUploader data={data} accountId={accountId} shortcodeId={data.shortcode_id} />
				</ProComponent>
			);
		}

		// For other pro types, render directly
		return <ProComponent data={data} accountId={accountId} />;
	}

	// Fall back to free version components
	switch (data.type) {
		case 'gallery':
			return <ImageGallery data={data} accountId={accountId} />;
		// case 'file-browser':
		// 	return <FileBrowser data={data} accountId={accountId} shortcodeId={data.shortcode_id} />;
		// case 'media-player':
		// 	return <MediaPlayer data={data} accountId={accountId} />;
		case 'uploader':
			return <FileUploader data={data} accountId={accountId} shortcodeId={data.shortcode_id} />;
		case 'text':
			return <div>{__('Text', 'easy-dropbox-integration')}</div>;
		case 'button':
			return <div>{__('Button', 'easy-dropbox-integration')}</div>;
		default:
			return <div>{__('Shortcode', 'easy-dropbox-integration')}</div>;
	}
};

export default App;