import { useContext, useEffect, useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { FaFolderOpen } from 'react-icons/fa';
import { HiOutlineDotsVertical } from 'react-icons/hi';
import { ThemeContext } from '../../Provider/Context';
import { GoCopy, GoInfo, GoLinkExternal, GoShareAndroid } from 'react-icons/go';
import { FiEye, FiLink } from 'react-icons/fi';
import { BsDownload, BsSignTurnSlightLeft } from 'react-icons/bs';
import { LuPencilLine } from 'react-icons/lu';
import { RiDeleteBin6Line } from 'react-icons/ri';

const FolderList = ( props ) => {
	const [showPreviousPath, setShowPreviousPath] = useState(false);

	const {
		folders,
		setPath,
		showMoreMenu = true,
		enableSelected = false,
		folderSelectOnly = false,
		enableFolderSelect = false,
		selectedFolder,
		handleItemClick,
		allowBulkMode = true,
		isSingleFolderSelector = false,
		shortcodeBuilder,
		fileTypeFilter = null,
	} = props;

	const {
		gridView,
		setFolders,
		openMenu,
		setOpenMenu,
		rightClickMenu,
		menuPosition,
		setSelectedItem,
		setRightClickMenu,
		setMenuPosition,
		rightClickPosition,
		setRightClickPosition,
		activeCols,
		selectedCards,
		toggleCard,
		bulkMode,
		setBulkMode,
		isFolder,
		setIsFolder,
		selectedItem,
		selectedItems,
		setSelectedItems,
		previousPath,
	} = useContext(ThemeContext);

	// Instead of useSelect, we get selectedItems from context
	const currentSelectedFolder = selectedItems || {
		files: [],
		folders: selectedFolder,
	};

	const [currentFolder, setCurrentFolder] = useState(currentSelectedFolder);

	const onFolderClickHandler = (item) => {
		setSelectedItems({
			...currentSelectedFolder,
			folders: [...currentSelectedFolder.folders, item],
		});

		setCurrentFolder({
			...currentFolder,
			folders: [...currentFolder.folders, item],
		});
	};

	// If shortcodeBuilder is true, set bulkMode to true
	useEffect(() => {
		if (shortcodeBuilder) {
			setBulkMode(true);
		}
	}, [shortcodeBuilder]);

	useEffect(() => {
		if ('/' === previousPath) {
			setShowPreviousPath(false);
		} else {
			setShowPreviousPath(true);
		}
	}, [previousPath]);

	useEffect(() => {
		setFolders((prev) => {
			if (JSON.stringify(prev) !== JSON.stringify(folders)) {
				return folders;
			}
			return prev; // no update
		});
	}, [folders]);

	const pastelColors = [
		'#2772f0cc',
		'#ffa000',
		'#f98db4',
		'#7b6fff',
		'#27d3a2',
		'#8c42ac',
		'#2fb776cc',
		'#58d9fd',
		'#f05d27',
		'#bbd622',
	];

	// Close menu when clicking outside
	useEffect(() => {
		const handleClickOutside = (e) => {
			if (!e.target.closest('.edbi-context-menu') && !e.target.closest('.menu-button')) {
				setOpenMenu(null);
				setRightClickMenu(null);
			}
		};
		document.addEventListener('click', handleClickOutside);
		return () => document.removeEventListener('click', handleClickOutside);
	}, []);

	const toggleMenu = (id, e, item) => {
		if (openMenu === id) {
			setOpenMenu(null);
			setSelectedItem(null);
			return;
		}

		const buttonRect = e.currentTarget.getBoundingClientRect();
		const menuHeight = 350;
		const menuWidth = 220;

		let top = buttonRect.bottom;
		let left = buttonRect.right - menuWidth;

		if (window.innerHeight - buttonRect.bottom < menuHeight) {
			top = buttonRect.top;
		}

		if (window.innerWidth - buttonRect.right < menuWidth) {
			left = buttonRect.left - 380;
		}

		setMenuPosition({ top, left });
		setOpenMenu(id);
		setSelectedItem(item);
		setRightClickMenu(null);
	};

	const toggleRightClickMenu = (e, item) => {
		setIsFolder(true);
		if (bulkMode) return;
		e.preventDefault();

		const menuHeight = 300;
		const menuWidth = 250;

		let top = e.clientY;
		let left = e.clientX;

		if (window.innerHeight - e.clientY < menuHeight) {
			top = e.clientY - menuHeight;
		}
		if (window.innerWidth - e.clientX < menuWidth) {
			left = e.clientX - menuWidth;
		}

		setRightClickPosition({ top, left });
		setRightClickMenu(item);
		setOpenMenu(null);
	};

	const handleAction = (action, e) => {
		if (!selectedItem) return;
		handleItemClick({
			id: action,
			event: e,
			props: {
				data: {
					item: selectedItem,
					index: folders.findIndex((f) => f.id === selectedItem.id),
				},
			},
		});
		setOpenMenu(null);
		setSelectedItem(null);
	};

	const handleRightClickAction = (action, e) => {
		if (!rightClickMenu) return;
		handleItemClick({
			id: action,
			event: e,
			props: {
				data: {
					item: rightClickMenu,
					index: folders.findIndex((f) => f.id === rightClickMenu.id),
				},
			},
		});
		setRightClickMenu(null);
	};

	return (
		<div
			className={`${gridView ? 'edbi-folder-grid-container' : 'edbi-folder-list-container'} ${
				shortcodeBuilder ? 'edbi-grid-4' : ''
			} edbi-grid-${activeCols} `}
		>
			{folders.length > 0 &&
				folders.map((item, index) => {
				
					const existsInSelected = selectedItems?.folders?.filter((sItem) => {
						return sItem.id == item.id;
					}).length > 0
					return (
						<div
							className={`edbi-folder-container ${
								existsInSelected ? 'edbi-bulk__mode' : '' // @TODO: fix this.
							}`}
							style={{
								outlineColor:
									existsInSelected &&
									pastelColors[index % pastelColors.length],
							}}
							key={index}
						>
							{gridView && (
								<div
									className='edbi-shadow'
									style={{
										background: `radial-gradient(circle, ${
											pastelColors[index % pastelColors.length]
										} 0%, transparent 100%)`,
									}}
								/>
							)}

							<div
								key={index}
								onClick={() => {
									setPath(item.path);
									setOpenMenu(null);
									setRightClickMenu(null);
								}}
								onContextMenu={(e) => toggleRightClickMenu(e, item)}
							>
								<div className='edbi-folder'>
									<div className='edbi-name-folder'>
										<FaFolderOpen
											className='edbi-folder-icon'
											style={{
												color: pastelColors[index % pastelColors.length],
											}}
										/>
										<span>{__(item.name, 'easy-dropbox-integration')}</span>
									</div>

									{
										enableFolderSelect &&
										( isSingleFolderSelector || (bulkMode && allowBulkMode)) && (
										<label className='chk-label' onClick={(e) => e.stopPropagation()}>
											<input
												type='checkbox'
												checked={existsInSelected}
												onChange={(e) => {
													e.stopPropagation();
													if ( isSingleFolderSelector && selectedItems?.folders?.length > 0 ) {
														if (existsInSelected) {
															toggleCard(item.id, item)
														}
														return;
													}
													toggleCard(item.id, item)
												}}
											/>
											<span
												className='custom-circle edbi-item-checkbox'
												aria-hidden='true'
												style={{
													backgroundColor:
														existsInSelected &&
														pastelColors[index % pastelColors.length],
													borderColor:
														existsInSelected &&
														pastelColors[index % pastelColors.length],
												}}
											>
												<svg viewBox='0 0 24 24' aria-hidden='true'>
													<path d='M5 12.5l4 4L19 7.5'></path>
												</svg>
											</span>
										</label>
									)}

									{!bulkMode && ! isSingleFolderSelector && showMoreMenu && (
										<div
											onClick={(e) => {
												e.stopPropagation();

												toggleMenu(item.id, e, item);
											}}
											className='edbi-folder-dot-container'
										>
											<HiOutlineDotsVertical className='edbi-dot-icon' />
										</div>
									)}
								</div>
							</div>
						</div>
					);
				})}
			{/* Floating Context Menu */}
			{openMenu && isFolder && (
				<div
					className='absolute z-50 edbi-menu-card context-menu'
					style={{
						top: `${menuPosition.top}px`,
						left: `${menuPosition.left}px`,
					}}
				>
					<div className='edbi-menu-item' onClick={() => handleAction('open')}>
						<GoLinkExternal className='edbi-right-icon' />{' '}
						{__('Open in Dropbox', 'easy-dropbox-integration')}
					</div>

					<div className='edbi-menu-item' onClick={() => handleAction('details')}>
						<GoInfo className='edbi-right-icon' />{' '}
						{__('Details', 'easy-dropbox-integration')}
					</div>
					<div className='edbi-menu-divider'></div>

					<div className='edbi-menu-item' onClick={() => handleAction('direct-link')}>
						<FiLink className='edbi-right-icon' />{' '}
						{__('Direct Link', 'easy-dropbox-integration')}
					</div>

					<div className='edbi-menu-item' onClick={() => handleAction('share')}>
						<GoShareAndroid className='edbi-right-icon' />{' '}
						{__('Share', 'easy-dropbox-integration')}
					</div>
					<div className='edbi-menu-divider'></div>

					<div className='edbi-menu-item' onClick={() => handleAction('download')}>
						<BsDownload className='edbi-right-icon' />{' '}
						{__('Download', 'easy-dropbox-integration')}
					</div>

					<div className='edbi-menu-item' onClick={() => handleAction('move')}>
						<BsSignTurnSlightLeft className='edbi-right-icon' />{' '}
						{__('Move', 'easy-dropbox-integration')}
					</div>

					<div className='edbi-menu-item' onClick={() => handleAction('rename')}>
						<LuPencilLine className='edbi-right-icon' />{' '}
						{__('Rename', 'easy-dropbox-integration')}
					</div>
					<div className='edbi-menu-divider'></div>

					<div className='edbi-menu-item' onClick={() => handleAction('delete')}>
						<RiDeleteBin6Line className='edbi-right-icon' />{' '}
						{__('Delete', 'easy-dropbox-integration')}
					</div>
				</div>
			)}

			{rightClickMenu && isFolder && (
				<div
					className='absolute edbi-filter-dropdown edbi-filter-dropdown-2 nedkkdk'
					style={{
						top: `${rightClickPosition.top - 80}px`,
						left: `${rightClickPosition.left - 200}px`,
					}}
				>
					<div className='edbi-menu-item' onClick={() => handleRightClickAction('open')}>
						<GoLinkExternal className='edbi-right-icon' />{' '}
						{__('Open in Dropbox', 'easy-dropbox-integration')}
					</div>

					<div
						className='edbi-menu-item'
						onClick={() => handleRightClickAction('details')}
					>
						<GoInfo className='edbi-right-icon' />{' '}
						{__('View Details', 'easy-dropbox-integration')}
					</div>
					<div className='edbi-menu-divider'></div>

					<div
						className='edbi-menu-item'
						onClick={() => handleRightClickAction('direct-link')}
					>
						<FiLink className='edbi-right-icon' />{' '}
						{__('Direct Link', 'easy-dropbox-integration')}
					</div>

					<div className='edbi-menu-item' onClick={() => handleRightClickAction('share')}>
						<GoShareAndroid className='edbi-right-icon' />{' '}
						{__('Share', 'easy-dropbox-integration')}
					</div>
					<div className='edbi-menu-divider'></div>

					<div
						className='edbi-menu-item'
						onClick={() => handleRightClickAction('download-as-zip')}
					>
						<BsDownload className='edbi-right-icon' />{' '}
						{__('Download as Zip', 'easy-dropbox-integration')}
					</div>

					<div className='edbi-menu-divider'></div>

					<div className='edbi-menu-item' onClick={() => handleRightClickAction('move')}>
						<BsSignTurnSlightLeft className='edbi-right-icon' />{' '}
						{__('Move', 'easy-dropbox-integration')}
					</div>

					<div
						className='edbi-menu-item'
						onClick={() => handleRightClickAction('rename')}
					>
						<LuPencilLine className='edbi-right-icon' />{' '}
						{__('Rename', 'easy-dropbox-integration')}
					</div>

					<div
						className='edbi-menu-item'
						onClick={() => handleRightClickAction('duplicate')}
					>
						<GoCopy className='edbi-right-icon' />{' '}
						{__('Copy', 'easy-dropbox-integration')}
					</div>
					<div className='edbi-menu-divider'></div>

					<div
						className='edbi-menu-item'
						onClick={() => handleRightClickAction('delete')}
					>
						<RiDeleteBin6Line className='edbi-right-icon' />
						{__('Delete', 'easy-dropbox-integration')}
					</div>
				</div>
			)}
		</div>
	);
};

export default FolderList;