import { __ } from '@wordpress/i18n';
import { useContext, useEffect, useState } from '@wordpress/element';
import { ThemeContext } from '../file-browser/Provider/Context';
import { AiOutlineClose } from 'react-icons/ai';
import { MdDragIndicator } from 'react-icons/md';
import { getIconByExtension } from '../utils/common';

import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

export default function SelectedItemBox() {
	const { selectedContent, setSelectedContent, setSelectedCards, toggleCard, selectedItems, setSelectedItems } =
		useContext(ThemeContext) || {};

	const [allSelectedItems, setAllSelectedItems] = useState([]);

	useEffect(() => {
		setAllSelectedItems([...(selectedItems?.files || []), ...(selectedItems?.folders || [])]);
	}, [selectedItems]);
	const handleClear = () => {
		setSelectedContent([]);
		setSelectedCards([]);
		setAllSelectedItems([]);
		setSelectedItems({ files: [], folders: [] });
	};

	// 🔥 function to reorder after drag
	const handleDragEnd = (result) => {
		if (!result.destination) return;

		const items = Array.from(allSelectedItems);
		const [reorderedItem] = items.splice(result.source.index, 1);
		items.splice(result.destination.index, 0, reorderedItem);

		setAllSelectedItems(items);
	};

	return (
		<div className='edbi-shortcode-builder__selected-item__box'>
			<div className='edbi-shortcode-builder__selected-item__box__header'>
				<h3>
					{__(allSelectedItems.length + ' Selected Items', 'easy-dropbox-integration')}
				</h3>
				<button
					onClick={handleClear}
					className='edbi-shortcode-builder__selected-item__box__header__btn'
				>
					{__('Clear', 'easy-dropbox-integration')}
				</button>
			</div>

			{allSelectedItems.length < 1 ? (
				<div className='edbi-shortcode-builder__selected-item__box__empty'>
					{__('No item selected', 'easy-dropbox-integration')}
				</div>
			) : (
				<DragDropContext onDragEnd={handleDragEnd}>
					<Droppable droppableId='selectedItems'>
						{(provided) => (
							<div
								className='edbi-shortcode-builder__selected-item__box__items'
								{...provided.droppableProps}
								ref={provided.innerRef}
							>
								{allSelectedItems.map((item, idx) => (
									<Draggable
										key={item.id}
										draggableId={String(item.id)}
										index={idx}
									>
										{(provided) => (
											<div
												className={`edbi-shortcode-builder__selected-item__box__item ${
													allSelectedItems.length - 1 !== idx
														? 'edbi-shortcode__border__bottom'
														: ''
												}`}
												ref={provided.innerRef}
												{...provided.draggableProps}
											>
												<div {...provided.dragHandleProps}>
													<MdDragIndicator className='edbi-shortcode-builder__drag-icon' />
													{item.thumbnail ? (
														<img
															src={item?.thumbnail}
															alt={__(
																'Item Image',
																'easy-dropbox-integration'
															)}
														/>
													) : (
														<img
															src={getIconByExtension(
																item.ext ? item.ext : 'folder'
															)}
															alt={__(
																'Item Image',
																'easy-dropbox-integration'
															)}
														/>
													)}
													<span className='edbi-shortcode-builder__selected-item__box__item__name'>
														{__(item?.name, 'easy-dropbox-integration')}
													</span>
												</div>
												<button
													onClick={() => toggleCard(item.id, item)}
													className='edbi-shortcode-builder__selected-item__box__item__close'
												>
													<AiOutlineClose />
												</button>
											</div>
										)}
									</Draggable>
								))}
								{provided.placeholder}
							</div>
						)}
					</Droppable>
				</DragDropContext>
			)}
		</div>
	);
}