import React, { useState } from '@wordpress/element';
import classNames from 'classnames';
import { __ } from '@wordpress/i18n';
import { useSelect, dispatch } from '@wordpress/data';
import { FaHammer, FaPlug, FaUser, FaRegFolderOpen } from 'react-icons/fa';
import { MdColorLens } from 'react-icons/md';
import { PiWrenchFill } from 'react-icons/pi';
import { RiFolderMusicFill } from 'react-icons/ri';
import { GoSync } from 'react-icons/go';

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

	const { activeAccount } = EDBIData;

	let items = [
		{
			slug: 'accounts',
			label: __('Accounts', 'easy-dropbox-integration'),
			icon: <FaUser />,
		},
		{
			slug: 'app-settings',
			label: __('App & Team', 'easy-dropbox-integration'),
			icon: <FaHammer />,
		},
		{
			slug: 'appearance',
			label: __('Appearance', 'easy-dropbox-integration'),
			icon: <MdColorLens />,
		},
		{
			slug: 'modules',
			label: __('Modules', 'easy-dropbox-integration'),
			icon: <FaPlug />,
		},
		{
			slug: 'private-folders',
			label: __('Private Folders', 'easy-dropbox-integration'),
			icon: <FaRegFolderOpen />,
			isPro: true,
		},
		{
			slug: 'media-library',
			label: __('Media Library', 'easy-dropbox-integration'),
			icon: <RiFolderMusicFill />,
			moduleCondition: 'wp-media',
		},
		{
			slug: 'tools',
			label: __('Tools', 'easy-dropbox-integration'),
			icon: <PiWrenchFill />,
		},
		{
			slug: 'synchronization',
			label: __('Synchronization', 'easy-dropbox-integration'),
			icon: <GoSync />,
		},
	];

	// Allow extensions to modify sidebar items
	if (window.EDBI_EXTENSIONS && window.EDBI_EXTENSIONS.sidebarItems) {
		window.EDBI_EXTENSIONS.sidebarItems.forEach((extension) => {
			const result = extension(items);
			if (Array.isArray(result)) {
				items = result;
			}
		});
	}

	return (
		<>
			<div className='edbi-page__shortcode__sidebar'>
				{items.map((item, index) => {
					if (item.moduleCondition) {
						const isModuleActive = settings?.modules.filter((module) => {
							return module === item.moduleCondition;
						});

						if (!isModuleActive.length > 0) {
							return null;
						}
					}

					return (
						<div
							key={index}
							className={`edbi-page__shortcode__sidebar__item ${
								activeItem === item.slug &&
								'edbi-page__shortcode__sidebar__item--active'
							}`}
							onClick={() => {
								setActiveItem(item.slug);
								// 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;