import React from 'react';
import PropTypes from 'prop-types';
import DVHeader from './DVHeader';
import DVBody from './DVBody';
import DVFooter from './DVFooter';
import Spinner from '../../Spinner';
import Div100vh from 'react-div-100vh';
import { useSelector } from 'react-redux'

const CIDetailView = ({
	activeItem,
	isFirst,
	isLast,
	close,
	catalog,
	pending,
	openDetail,
	showNextItem,
	showPrevItem,
	match,
	participated,
	sendParticipation,
	toggleParticipated,
	color
}) => {
	if (activeItem === null) {
		// we have the catalog, but this view was not opened through an action
		// but by it's URL. Now we need to dispatch an action that,
		// depending on the current route, will tell which id the ID of the item to display.
		if (catalog.length) {
			catalog.forEach((item, i) => {
				if (item.inventory_number === match.params.itemId.replace('__', ' ')) {
					openDetail(i);
				}
			});
		}

		// we don't know yet what data to display.
		// Most certainly the catalog is being fetched.
		return (
			<div className='CIDetailView__loading AppContent'>
				<DVHeader close={close} />
				{pending && <Spinner />}
			</div>
		);
	}
	if (activeItem.inventory_number !== match.params.itemId.replace('__', ' ')) {
		window.history.pushState(null, null, activeItem.inventory_number.replace(' ', '__'));
	}
	const doYouKnowMoreURL = (
		useSelector(state => state.urls.site) + "do-you-know-more/?object_id=" + activeItem.inventory_number
	);
	return (
		<Div100vh>
			<div className='CIDetailView AppContent' id='CIDetailView'>
				<div id='CIDetailView-top-element'></div>
				<DVHeader close={close} />
				<DVBody
					item={activeItem}
					isFirst={isFirst}
					isLast={isLast}
					showNextItem={showNextItem}
					showPrevItem={showPrevItem}
				/>
				<DVFooter
					item={activeItem}
					participated={participated}
					sendParticipation={sendParticipation}
					toggleParticipated={toggleParticipated}
					doYouKnowMoreURL={doYouKnowMoreURL}
					color={color}
				/>
			</div>
		</Div100vh>
	);
};

CIDetailView.propTypes = {
	activeItem: PropTypes.object,
	isFirst: PropTypes.bool,
	isLast: PropTypes.bool,
	close: PropTypes.func.isRequired,
	catalog: PropTypes.array,
	openDetail: PropTypes.func.isRequired,
	showNextItem: PropTypes.func.isRequired,
	showPrevItem: PropTypes.func.isRequired,
	match: PropTypes.object.isRequired
};
export default CIDetailView;