import React, { useEffect, useState, useContext } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import ModalHeader from '../components/modal/ModalHeader';
import ShortCodeModal from '../shortcode-builder/ShortCodeModal';
import Context, { ThemeContext } from '../file-browser/Provider/Context';


// import '../store/browserStore';
// import '../store/settingsData';

const EModalBrowser = ({
	title,
	onClose,
	onDone,
	initData = {},
	isFormUploader = false,
	uploadImmediately = false,
	isSingleFolderSelector = true,
	data,
	setData
}) => {
	const [save, setSave] = useState(false);
	// const [data, setData] = useState(initData);

	// const {
	// 	setSelectedItems,
	// } = useContext(ThemeContext);

	// useEffect(() => {
	// 	setSelectedItems({
	// 		files: [],
	// 		folders: [],
	// 	});
	// }, []);

	const handleClose = () => {
		// setSelectedItems({
		// 	files: [],
		// 	folders: [],
		// });
		onClose();
	};

	return (
		<Context>
			<ModalHeader
				title={title}
				onClickDone={() => {
					onDone(data);
				}}
				onClickClose={handleClose}
			/>
			<div
				className='edbi-modal-browser'
				style={{ padding: '0px !important', background: '#F0F0F1' }}
			>
				<ShortCodeModal
					save={save}
					setSave={setSave}
					data={data}
					setData={setData}
					type='uploader'
					isFormUploader={isFormUploader}
					uploadImmediately={uploadImmediately}
					isSingleFolderSelector={isSingleFolderSelector}
				/>
			</div>
		</Context>
	);
};

window.EDBIModalBrowser = EModalBrowser;

export default EModalBrowser;