import { useContext, useEffect } from '@wordpress/element';
import ModalHeader from '../components/modal/ModalHeader';
import Context, { ThemeContext } from '../file-browser/Provider/Context';
import FileBrowser from './FileBrowser';


const EFileBrowser = ( props ) => {
	const { initialSelectedItems, ...restProps } = props;

	return (
		<Context initialSelectedItems={initialSelectedItems}>
			<EFileBrowserContent {...restProps} />
		</Context>
	);
}

const EFileBrowserContent = (props) => {
	const { folderSelectOnly, onDone, title, onClose } = props;
	const { selectedItems, setBulkMode } = useContext(ThemeContext);

	useEffect(() => {
		if (folderSelectOnly) {
			setBulkMode(true);
		}
	}, [folderSelectOnly, setBulkMode]);

	return (
		<>
			<ModalHeader
				title={title}
				onClickDone={() => onDone(selectedItems)}
				onClickClose={onClose}
			/>
			<FileBrowser {...props} />
		</>
	);
}

window.EDBIFileBrowser = EFileBrowser;


export default EFileBrowser;