import { IoCloseOutline } from 'react-icons/io5';
import { useContext } from '@wordpress/element';
import { ThemeContext } from '../Provider/Context';
import { BsDot, BsDropbox } from 'react-icons/bs';
import { formatBytes, getIconByExtension } from '../../utils/common';
import { FaChevronRight } from 'react-icons/fa';
import { __ } from '@wordpress/i18n';
export default function DetailsBar() {
	const { setShowDetails, detailsItem } = useContext(ThemeContext);

	const capitalizer = (keyword) => {
		const result = keyword.charAt(0).toUpperCase() + keyword.slice(1);
		return __(result, 'easy-dropbox-integration');
	};

	const typeMaker = (value) => {
		const keyword = value.split('/')[0];
		const formattedType = capitalizer(keyword);
		return __(formattedType, 'easy-dropbox-integration');
	};

	const dateMaker = (value, format) => {
		const date = new Date(value * 1000);
		const format1 = date.toLocaleDateString('en-US', {
			day: '2-digit',
			month: 'short',
			year: 'numeric',
		});
		const format2 = date.toISOString().split('T')[0];
		if (format === 1) {
			return __(format1, 'easy-dropbox-integration');
		}
		if (format === 2) {
			return __(format2, 'easy-dropbox-integration');
		}
	};

	const locationMaker = (path) => {
		const paths = path.split('/');
		const folders = paths.slice(1, paths.length - 1);

		return (
			<div className='edbi-folder-location'>
				{folders.length < 1 ? (
					<span className='edbi-my-dropbox'>
						<BsDropbox style={{ fontSize: '16px' }} />
						<span>{__('My Dropbox', 'easy-dropbox-integration')}</span>
					</span>
				) : (
					<div className='edbi-details__folders'>
						{folders.map((folder, idx) => (
							<span key={idx}>
								{capitalizer(folder)}
								{idx < folders.length - 1 && (
									<FaChevronRight style={{ fontSize: '8px' }} />
								)}
							</span>
						))}
					</div>
				)}
			</div>
		);
	};

	return (
		<div className='edbi-details-bar'>
			<IoCloseOutline
				style={{
					position: 'absolute',
					top: '15px',
					right: '15px',
					fontSize: '25px',
					cursor: 'pointer',
				}}
				onClick={() => setShowDetails(false)}
			/>

			<div className='edbi-file-name'>
				<img
					src={getIconByExtension(detailsItem?.ext ? detailsItem.ext : 'folder', '32')}
					alt={__('File Icon', 'easy-dropbox-integration')}
				/>
				<div>
					<h3 title={__(detailsItem?.name, 'easy-dropbox-integration')}>
						{__(detailsItem?.name, 'easy-dropbox-integration')}
					</h3>
					<h4>
						{detailsItem?.created
							? dateMaker(detailsItem.created, 1)
							: __('Unknown', 'easy-dropbox-integration')}{' '}
						<BsDot />
						{__(formatBytes(detailsItem.size), 'easy-dropbox-integration')}
					</h4>
				</div>
			</div>
			<ul>
				<li>
					<div className='edbi-details__title'>
						{__('Type', 'easy-dropbox-integration')} <span>:</span>
					</div>
					<div className='edbi-details__value'>
						{detailsItem?.mimetype
							? typeMaker(detailsItem.mimetype)
							: __('Folder', 'easy-dropbox-integration')}
					</div>
				</li>
				<li>
					<div className='edbi-details__title'>
						{__('Size', 'easy-dropbox-integration')} <span>:</span>
					</div>
					<div className='edbi-details__value'>
						{__(formatBytes(detailsItem.size), 'easy-dropbox-integration')}
					</div>
				</li>
				<li>
					<div className='edbi-details__title'>
						{__('Updated', 'easy-dropbox-integration')} <span>:</span>
					</div>
					<div className='edbi-details__value'>
						{detailsItem?.edited
							? dateMaker(detailsItem.edited, 2)
							: __('Not Updated', 'easy-dropbox-integration')}
					</div>
				</li>
				<li>
					<div className='edbi-details__title'>
						{__('Created', 'easy-dropbox-integration')} <span>:</span>
					</div>
					<div className='edbi-details__value'>
						{detailsItem?.created
							? dateMaker(detailsItem.created, 2)
							: __('Unknown', 'easy-dropbox-integration')}
					</div>
				</li>
				<li>
					<div className='edbi-details__title'>
						{__('Location', 'easy-dropbox-integration')} <span>:</span>
					</div>
					<div className='edbi-details__value'>{locationMaker(detailsItem?.path)}</div>
				</li>
			</ul>
		</div>
	);
}