import { useContext } from '@wordpress/element';
import { MdOutlineCheckCircleOutline } from 'react-icons/md';
import { FaRegCircle } from 'react-icons/fa';
import { TbLayoutGrid, TbListDetails } from 'react-icons/tb';
import { ThemeContext } from '../Provider/Context';
import { __ } from '@wordpress/i18n';

const columnOptions = [2, 3, 4, 5, 6];

const DisplayDropdown = ({ displayRef }) => {
	const { gridView, setGridView, gridColumns, setGridColumns, truncateNames, setTruncateNames } =
		useContext(ThemeContext);

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

			<div
				className={`edbi-menu-item ${gridView && 'edbi-active-filter'}`}
				onClick={() => setGridView(true)}
			>
				{gridView ? (
					<MdOutlineCheckCircleOutline className='icon edbi-active-filter-icon' />
				) : (
					<FaRegCircle className='edbi-inactive-filter-icon' />
				)}
				<TbLayoutGrid className='edbi-right-icon' />
				{__('Grid', 'easy-dropbox-integration')}
			</div>
			<div
				className={`edbi-menu-item ${!gridView && 'edbi-active-filter'}`}
				onClick={() => setGridView(false)}
			>
				{!gridView ? (
					<MdOutlineCheckCircleOutline className='icon edbi-active-filter-icon' />
				) : (
					<FaRegCircle className='edbi-inactive-filter-icon' />
				)}
				<TbListDetails className='edbi-right-icon' />
				{__('List', 'easy-dropbox-integration')}
			</div>

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

			<div
				className={`edbi-menu-item ${!truncateNames && 'edbi-active-filter'}`}
				onClick={() => setTruncateNames(!truncateNames)}
			>
				{!truncateNames ? (
					<MdOutlineCheckCircleOutline className='icon edbi-active-filter-icon' />
				) : (
					<FaRegCircle className='edbi-inactive-filter-icon' />
				)}
				{__('Show full name', 'easy-dropbox-integration')}
			</div>

			{gridView && (
				<>
					<h5 className='edbi-filter-list edbi-dir'>
						{__('ITEMS PER ROW', 'easy-dropbox-integration')}
					</h5>
					<div className='edbi-menu-divider'></div>

					<div className='edbi-columns-row'>
						{columnOptions.map((cols) => (
							<button
								key={cols}
								type='button'
								aria-pressed={gridColumns === cols}
								className={`edbi-columns-option ${
									gridColumns === cols ? 'edbi-columns-option--active' : ''
								}`}
								onClick={() => setGridColumns(cols)}
							>
								{cols}
							</button>
						))}
					</div>
				</>
			)}
		</div>
	);
};

export default DisplayDropdown;