import React from 'react';
import { MdOutlineKeyboardArrowRight } from 'react-icons/md';
import { RxHome } from 'react-icons/rx';
import { useContext, useEffect, useRef, useState } from '@wordpress/element';
import { ThemeContext } from '../file-browser/Provider/Context';
import { __ } from '@wordpress/i18n';
import { FiRefreshCw } from 'react-icons/fi';
import { HiOutlineBarsArrowDown } from 'react-icons/hi2';
import FilterDropdown from '../file-browser/components/FilterDropdown';
import { IoFilterOutline } from 'react-icons/io5';
import FileBrowserHeader from '../file-browser/components/browser/Header';

export default function Header(props) {
	const {config} = props;
	const { setPath, currentPath, hideSidebar, isLoading, setIsLoading, setRefresh, sortBy } =
		useContext(ThemeContext);
	const pathParts = currentPath.split('/').filter(Boolean);
	const titleCase = (str) =>
		str
			.split(' ')
			.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
			.join(' ');

	const [dropdownFilter, setDropdownFilter] = useState(false);
	const buttonRef = useRef(null);
	const filterRef = useRef(null);

	const toggleDropdownFilter = () => {
		setDropdownFilter(!dropdownFilter);
	};

	useEffect(() => {
		const handleClickOutside = (event) => {
			if (
				filterRef.current &&
				!filterRef.current.contains(event.target) &&
				!buttonRef.current.contains(event.target) // ignore button
			) {
				setDropdownFilter(false);
			}
		};

		document.addEventListener('mousedown', handleClickOutside);
		return () => {
			document.removeEventListener('mousedown', handleClickOutside);
		};
	}, []);
	return (
		<div className='edbi-shortcode-builder__navbar edbi-navbar'>
			<div className='edbi-navbar-top'>
				<div className='edbi-navbar-top-left'>
					<span
						onClick={() => {
							currentPath !== '/' && setPath('/');
						}}
						className={`edbi-breadcrumb ${
							currentPath === '/' || currentPath === ''
								? 'edbi-breadcrumb-active'
								: ''
						} ${hideSidebar && 'edbi-margin-left'}`}
					>
						<RxHome />
						<h6 style={{ marginLeft: '2px' }}>
							{__('Home', 'easy-dropbox-integration')}
						</h6>
					</span>

					{pathParts.map((part, index) => {
						const pathUpToHere = '/' + pathParts.slice(0, index + 1).join('/');

						return (
							<span
								key={index}
								onClick={() => setPath(pathUpToHere)}
								className={`edbi-breadcrumb ${
									pathUpToHere === currentPath ? 'edbi-breadcrumb-active' : ''
								}`}
							>
								<MdOutlineKeyboardArrowRight />
								<h6>{__(titleCase(part), 'easy-dropbox-integration')}</h6>
							</span>
						);
					})}
				</div>
				<div className='edbi-navbar-top-right'>
					<button
						disabled={isLoading}
						onClick={() => {
							setRefresh(true);
							setIsLoading(true);
						}}
						className='edbi-button'
					>
						<FiRefreshCw
							className={`edbi-upload-icon ${
								isLoading ? 'edbi-rotate-animation' : ''
							} `}
						/>
						<span>{__('Refresh', 'easy-dropbox-integration')}</span>
					</button>
					<div ref={buttonRef} onClick={toggleDropdownFilter} className='edbi-filter'>
						<button className='edbi-button'>
							<IoFilterOutline style={{ fontSize: '20px' }} />
						</button>
						{dropdownFilter && <FilterDropdown filterRef={filterRef} />}
					</div>
					<FileBrowserHeader
						// config={{
						// 	showBreadCrumb: true,
						// 	showFilter: true,
						// 	showAccount: true,
						// 	showRefresh: true,
						// 	showMoreMenu: {
						// 		show: true,
						// 		showNewFolder: true,
						// 		showUploader: true,
						// 	},
						// }}
						config={config}
					/>
				</div>
			</div>
		</div>
	);
}