content: import React from 'react';
  import PropTypes from 'prop-types';
  
  import _ from 'lodash';
  
  import { LoadingScreen } from './ui/LoadingScreen';
  import { AddToSetButton } from './ui/AddToSetButton';
  
  import { extractThemeName } from '../lib/helpers';
  
  export const TargetSet = (props) => {
  	let themeName = '';
  	const currentSet = props.getCurrentSet(props.match.params.set_number);
  
  	if (!_.isEmpty(currentSet)) {
  		themeName = extractThemeName(currentSet.details.theme_id, props.popularThemes);
  	}
  
  	return (
  		<div className="set-display">
  			<h1>Set Details</h1>
  			{(_.isEmpty(currentSet)) &&
  			<LoadingScreen />
  			}
  
  			{(!_.isEmpty(currentSet)) &&
  			<div className="set-screen">
  				<div className="display-side">
  					<h2>{currentSet.details.name}</h2>
  					<h2>{currentSet.details.set_num}</h2>
  					<img src={currentSet.details.set_img_url} alt={currentSet.details.name} />
  				</div>
  				<div className="data-side">
  					<div className="set-details">
  						<ul>
  							<li><span>Theme:</span>{themeName}</li>
  							<li><span>Year:</span>{currentSet.details.year}</li>
  							<li><span>Pieces:</span>{currentSet.details.num_parts}</li>
  							<li><span>Owned:</span>{currentSet.quantity}</li>
  						</ul>
  
  						{(currentSet.quantity === 0) &&
  						<AddToSetButton handleAddSet={props.handleAddSet}
  										userSets={props.userSets}
  										currentSet={currentSet} />
  						}
  					</div>
  				</div>
  			</div>
  			}
  		</div>
  	);
  };
  
  TargetSet.propTypes = {
  	handleAddSet: PropTypes.func.isRequired,
  	userSets: PropTypes.array.isRequired,
  	cachedThemes: PropTypes.array.isRequired,
  	popularThemes: PropTypes.array.isRequired
  };