import React from 'react';
import PropTypes from 'prop-types';
import Item from './Item';
import Craft from '../containers/Craft';

export const showInventoryAndCraft = (storage, useItem) => {
	const listItems = storage.map(item =>
		<Item key={item.key} data={item} useItem={useItem}/>,
	);
	return (
		<div className="tile is-child">
			<div className="tile">
				<div className="tile is-child is-parent is-vertical">
					<div className="tile is-child">
						Inventory
					</div>
					<ul>{listItems}</ul>
				</div>
				<div className="tile is-child is-parent is-vertical">
					<div className="tile is-child">
						Craft
					</div>
					<Craft />
				</div>
			</div>
		</div>
	);
};
const Inventory = ({ storage, useItem }) => (
	<div className="tile is-ancestor">
		<div className="tile is-vertical">
			<div className="tile">
			<div className="tile is-parent is-vertical">
				<div className="tile is-child">
					{showInventoryAndCraft(storage, useItem)}
				</div>
			</div>
			</div>
		</div>
	</div>
);

Inventory.propTypes = {
	storage: PropTypes.array.isRequired,
	useItem: PropTypes.func.isRequired,
};

export default Inventory;
