import React, { useContext } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { RiSettings3Line } from 'react-icons/ri';
import { LuClipboardList, LuListFilter } from 'react-icons/lu';
import { SlSocialDropbox } from 'react-icons/sl';
import { TbDiamond } from 'react-icons/tb';
import { ThemeContext } from '../../file-browser/Provider/Context';

const Sidebar = (props) => {
	const { activeItem, setActiveItem, type } = props;

	const { activeAccount } = EDBIData;

	const {
		setSelectedItems
	} = useContext(ThemeContext);

	const items = [
		{
			slug: 'types',
			label: __('Types', 'easy-dropbox-integration'),
			icon: <SlSocialDropbox />,
		},
		{
			slug: 'source',
			label: __('Source', 'easy-dropbox-integration'),
			icon: <LuClipboardList />,
		},
		{
			slug: 'filters',
			label: __('Filters', 'easy-dropbox-integration'),
			icon: <LuListFilter />,
			// visible: ['uploader'],
		},
		{
			slug: 'advanced',
			label: __('Advanced', 'easy-dropbox-integration'),
			icon: <TbDiamond />,
			viewExcept: ['view-links', 'download-links'],
		},
		{
			slug: 'permission',
			label: __('Permission', 'easy-dropbox-integration'),
			icon: <RiSettings3Line />,
			visible: ['embed-documents', 'view-links', 'download-links', 'media-player', 'slider-carousel', 'gallery' ],
		},
	];

	return (
		<>
			<div className='edbi-page__shortcode__sidebar'>
				{items.map((item, index) => {
					if (item.visible && !item.visible.includes(type)) {
						return null;
					}

					if (item.viewExcept && item.viewExcept.includes(type)) {
						return null;
					}

					return (
						<div
							key={index}
							// className={classNames('edbi-page__sidebar__item', {
							// 	'edbi-page__sidebar__item--active':
							// 		activeItem === item.slug,
							// })}
							className={`edbi-page__shortcode__sidebar__item edbi-page__shortcode__sidebar__item--${item.slug} ${
								activeItem === item.slug &&
								'edbi-page__shortcode__sidebar__item--active'
							}`}
							onClick={(e) => {
								e.preventDefault();
								e.stopPropagation();
								setActiveItem(item.slug);

								// if (item.slug === 'types') {
								// 	// Reset selected items when navigating to types tab
								// 	setSelectedItems({
								// 		files: [],
								// 		folders: [],
								// 	});
								// }

								// Add slug with # to URL.
								// window.history.pushState('', '', '#' + item.slug);
							}}
						>
							<div className='edbi-page__shortcode__sidebar__icon'>{item.icon}</div>
							<div>{__(item.label, 'easy-dropbox-integration')}</div>
						</div>
					);
				})}
			</div>
		</>
	);
};

export default Sidebar;