import { useContext, useState } from '@wordpress/element';
import { IoMdClose } from 'react-icons/io';
import { FaDropbox, FaFolderOpen } from 'react-icons/fa';
import { MdOutlineKeyboardArrowRight } from 'react-icons/md';
import { ThemeContext } from '../Provider/Context';
import Parcentage2 from './Parcentage2';
import { decode } from 'js-base64';

const HiddenSideBar = () => {
	const [isFile, setIsFile] = useState(true);
	const [isParentOpen, setIsParentOpen] = useState(true);
	const [openChild, setOpenChild] = useState(null);
	const { isDrawerOpen, setIsDrawerOpen, folders, showContexify, setPath } =
		useContext(ThemeContext);

	let { activeAccount: activeAccountData } = EDBIData;
	let activeAccount;
	try {
		activeAccount = typeof activeAccountData === 'string' ? JSON.parse(decode(activeAccountData)) : activeAccountData;
	} catch (e) {
		console.error('Error parsing active account:', e);
		activeAccount = null;
	}

	const handleChildClick = (name) => {
		setOpenChild(openChild === name ? null : name);
	};

	return (
		<aside
			className={`edbi-sidebar2 ${isDrawerOpen ? 'edbi-open-sidebar' : 'edbi-close-sidebar'}`}
		>
			<div className='edbi-sidebar-header'>
				<img
					src={`${EDBIData?.assets}/images/file-browser/ultradevs-logo.png`}
					alt='UltraDevs Logo'
					className='edbi-logo edbi-logo2'
				/>
				<IoMdClose
					onClick={() => setIsDrawerOpen(false)}
					className='edbi-menu-icon edbi-menu-icon2'
				/>
			</div>
			<div className='edbi-sidebar-nav-container edbi-sidebar-nav-container2'>
				<section
					onClick={() => setIsFile(true)}
					className={`sidebar-navlink ${isFile === true ? 'edbi-active-button' : ''}`}
				>
					<i className='fa-solid fa-folder-open icon'></i> All Files
				</section>
				<section
					onClick={() => setIsFile(false)}
					className={`sidebar-navlink ${isFile === false ? 'edbi-active-button' : ''}`}
				>
					<i className='fa-regular fa-image icon'></i> Photos
				</section>
			</div>

			{isFile ? (
				<div className='edbi-sidebar-folder-container edbi-sidebar-folder-container2'>
					<h6>Folders</h6>
					<div className='edbi-folder-container edbi-folder-container2'>
						<div
							className={`edbi-folder-label edbi-folder-label2 ${
								isParentOpen ? 'active' : ''
							}`}
							onClick={() => setIsParentOpen(!isParentOpen)}
						>
							<MdOutlineKeyboardArrowRight
								className={`arrow ${isParentOpen ? 'edbi-rotate' : ''}`}
							/>
							<FaDropbox className='edbi-dropbox-icon' />
							<span>My Dropbox</span>
						</div>

						{isParentOpen && (
							<div className='edbi-folder-content edbi-folder-content2'>
								{folders.map((folder, idx) => (
									<div
										key={idx}
										onClick={() => setPath(folder.path)}
										onContextMenu={(e) => {
											if (false === showContexify) {
												return;
											}
											showContexify(e, 'file-browser-folder', {
												type: 'folder',
												path: item.path,
												item,
											});
										}}
									>
										<div
											className={`edbi-folder-label edbi-child ${
												openChild === folder ? 'active' : ''
											}`}
											onClick={() => handleChildClick(folder)}
										>
											<MdOutlineKeyboardArrowRight
												className={`edbi-right-arrow ${
													openChild === folder ? 'edbi-rotate' : ''
												}`}
											/>
											<FaFolderOpen className='edbi-folder-icon' />
											<span className='edbi-sidebar-folder'>
												<span className='edbi-folder-name'>
													{folder.name}
												</span>
											</span>
										</div>
										{/* {openChild === folder && (
											<div className='edbi-folder-subcontent'>
												<div className='edbi-border-arrow' />
												<div className='edbi-folder-item'>Sub Folder 1</div>
												<div className='edbi-folder-item'>Sub Folder 2</div>
											</div>
										)} */}
									</div>
								))}
							</div>
						)}
					</div>

					{/* <Parcentage2 usedGB={1.39} totalGB={3.4} /> */}
				</div>
			) : (
				<div className='edbi-photos-container'>Photos will appear here</div>
			)}
		</aside>
	);
};

export default HiddenSideBar;