import React, { useEffect, useState, useContext } from '@wordpress/element';
import { useSelect, dispatch } from '@wordpress/data';
import ModalHeader from '../../components/modal/ModalHeader';
import { __ } from '@wordpress/i18n';

// import '../../store/browserStore';
// import '../../store/settingsData';
import { ThemeContext } from '../../file-browser/Provider/Context';

const App = ({ onClose, onDone }) => {
	const [save, setSave] = useState(false);
	const [data, setData] = useState({});

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

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

	const EDBIModalBrowser = window.EDBIModalBrowser;

	return (
		<EDBIModalBrowser
			title={__('CF7 Module Configure', 'easy-dropbox-integration')}
			save={save}
			setSave={setSave}
			data={data}
			setData={setData}
			type='uploader'
			isFormUploader='cf7'
			uploadImmediately={false}
			isSingleFolderSelector={true}
			onDone={(data) => {
				// setSave(true);
				// console.log('save', save);
				// console.log('setSave', setSave);
				// console.log('data', data);
				onDone(data);
				// setSave(false);
			}}
			onClose={() => onClose()}
		/>
	);
};

export default App;