import { useState, useContext } from '@wordpress/element';
import Navbar from './components/Navbar';
import Sidebar from './components/Sidebar';
import HiddenSideBar from './components/HiddenSideBar';
import Browser from './components/Browser';
// import '../store/browserStore';
import 'lightgallery/css/lightgallery-bundle.css';
import DetailsBar from './components/DetailsBar';
import { ThemeContext } from './Provider/Context';
import { __ } from '@wordpress/i18n';
import { IoClose } from 'react-icons/io5';

import '../css/uploader.scss';

const App = () => {
	const { showDetails } = useContext(ThemeContext);
	const [showNotice, setShowNotice] = useState(true);

	return (
		<>
			{/* {showNotice && (
				<div className='edbi-notice edbi-notice--info edbi-notice--dismissible' style={{
					background: '#f0f6fc',
					borderLeft: '4px solid #72aee6',
					padding: '12px 16px',
					display: 'flex',
					alignItems: 'flex-start',
					justifyContent: 'space-between',
					gap: '12px',
					position: 'relative',
					margin: '0',
				}}>
					<div style={{ flex: 1 }}>
						<p style={{ margin: 0, fontSize: '14px', lineHeight: '1.5' }}>
							{__('Facing file loading issues? Try removing your account and adding it again from the', 'easy-dropbox-integration')}{' '}
							<a href="admin.php?page=easy-dropbox-integration-settings#accounts" target="_blank" style={{
								color: '#2271b1',
								textDecoration: 'underline',
								fontWeight: '500'
							}}>
								{__('Settings page', 'easy-dropbox-integration')}
							</a>
						</p>
					</div>
					<button
						onClick={() => setShowNotice(false)}
						style={{
							background: 'transparent',
							border: 'none',
							cursor: 'pointer',
							padding: '0',
							display: 'flex',
							alignItems: 'center',
							justifyContent: 'center',
							color: '#646970',
							flexShrink: 0,
						}}
						type="button"
					>
						<IoClose size={18} />
					</button>
				</div>
			)} */}
			<div className='edbi-app'>
				
				<HiddenSideBar />
				<Sidebar />
				<div className='edbi-main-container'>
					<Navbar
						showSearch={true}
						showFilter={true}
						showAccount={true}
						showRefresh={true}
						showMoreMenu={{
							show: true,
							showNewFolder: true,
							showUpload: true,
							showDownload: true,
							showDelete: true,
							showShare: true,
						}}
					/>
					<Browser config={{ allowBulkMode: true, shortcodeBuilder: false }} />
				</div>
				{showDetails && <DetailsBar />}
			</div>
		</>
	);
};

export default App;