import React from '@wordpress/element';
import { useSelect, dispatch } from '@wordpress/data';
import Accounts from './contents/Accounts';
import AppSettings from './contents/AppSettings';
import Appearance from './contents/Appearance';
import Modules from './contents/Modules';
import Tools from './contents/Tools';
import MediaLibrary from './contents/MediaLibrary';
import AutoSync from './contents/AutoSync';
import PrivateFolders from './contents/PrivateFolders';

const Content = (props) => {
	const { activeItem, settings, setSettings, isSaving, setSaving } = props;

	const { activeAccount } = EDBIData;

	// const settingsData = useSelect( ( select ) => {
	//     return select( 'edbi-page' ).getSettings();
	// })

	// Check for extension content renderers
	let extensionContent = null;
	if (window.EDBI_EXTENSIONS && window.EDBI_EXTENSIONS.contentRenderers) {
		for (const renderer of window.EDBI_EXTENSIONS.contentRenderers) {
			const result = renderer({ activeItem, settings, setSettings, isSaving, setSaving });
			if (result) {
				extensionContent = result;
				break;
			}
		}
	}

	if (extensionContent) {
		return extensionContent;
	}

	return (
		<div className='edbi-settings-content'>
			{activeItem === 'accounts' && (
				<Accounts
					// formData={formData}
					// setFormData={setFormData}
					settings={settings}
					setSettings={setSettings}
					isSaving={isSaving}
					setSaving={setSaving}
				/>
			)}
			{activeItem === 'app-settings' && (
				<AppSettings
					settings={settings}
					setSettings={setSettings}
				/>
			)}
			{activeItem === 'appearance' && (
				<Appearance
					// formData={formData}
					// setFormData={setFormData}
					settings={settings}
					setSettings={setSettings}
					isSaving={isSaving}
					setSaving={setSaving}
				/>
			)}

			{activeItem === 'modules' && (
				<Modules
					settings={settings}
					setSettings={setSettings}
					isSaving={isSaving}
					setSaving={setSaving}
				/>
			)}

			{
				activeItem === 'private-folders' && (
					<PrivateFolders
						settings={settings}
						setSettings={setSettings}
						isSaving={isSaving}
						setSaving={setSaving}
					/>
				)
			}

			{activeItem === 'media-library' && (
				<MediaLibrary
					settings={settings}
					setSettings={setSettings}
					isSaving={isSaving}
					setSaving={setSaving}
				/>
			)}

			{activeItem === 'tools' && (
				<Tools
					settings={settings}
					setSettings={setSettings}
					isSaving={isSaving}
					setSaving={setSaving}
				/>
			)}

			{activeItem === 'synchronization' && (
				<AutoSync
					settings={settings}
					setSettings={setSettings}
				/>
			)}

			{/* {activeItem !== 'accounts' &&
				activeItem !== 'appearance' &&
				activeItem !== 'modules' && (
					<div className='edbi-page__coming-soon'>
						<h2>Coming Soon!</h2>
					</div>
				)} */}
		</div>
	);
};

export default Content;