import { useContext } from '@wordpress/element';
import { FaRegCircle } from 'react-icons/fa';
import { MdOutlineCheckCircleOutline } from 'react-icons/md';
import { ThemeContext } from '../Provider/Context';
import { __ } from '@wordpress/i18n';
const sortList = [
	{ name: 'Name', value: 'name' },
	{ name: 'Size', value: 'size' },
	// { name: 'Created', value: 'created' },
	{ name: 'Modified', value: 'modified' },
];

const sortDirections = [
	{ name: 'Ascending', value: 'asc' },
	{ name: 'Descending', value: 'desc' },
];

const FilterDropdown = ({ filterRef }) => {
	const { sortBy, setSortBy, sortDirection, setSortDirection } = useContext(ThemeContext);

	return (
		<div ref={filterRef} className='edbi-filter-dropdown'>
			<h5 className='edbi-filter-list'>{__('SORT BY', 'easy-dropbox-integration')}</h5>
			<div className='edbi-menu-divider'></div>

			{sortList.map((item, idx) => (
				<div
					key={idx}
					className={`edbi-menu-item ${sortBy === item.value && 'edbi-active-filter'}`}
					onClick={() => setSortBy(item.value)}
				>
					{sortBy === item.value ? (
						<MdOutlineCheckCircleOutline className='icon edbi-active-filter-icon' />
					) : (
						<FaRegCircle className='edbi-inactive-filter-icon' />
					)}
					{__(item.name, 'easy-dropbox-integration')}
				</div>
			))}

			<h5 className='edbi-filter-list edbi-dir'>
				{' '}
				{__('SORT DIRECTION', 'easy-dropbox-integration')}
			</h5>
			<div className='edbi-menu-divider'></div>

			{sortDirections.map((item, idx) => (
				<div
					onClick={() => setSortDirection(item.value)}
					key={idx}
					className={`edbi-menu-item ${
						sortDirection === item.value && 'edbi-active-filter'
					}`}
				>
					{sortDirection === item.value ? (
						<MdOutlineCheckCircleOutline className='icon edbi-active-filter-icon' />
					) : (
						<FaRegCircle className='edbi-inactive-filter-icon' />
					)}
					{__(item.name, 'easy-dropbox-integration')}
				</div>
			))}
		</div>
	);
};

export default FilterDropdown;