import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { compose, onlyUpdateForKeys } from 'recompose'
import PartyControls from './PartyControls'

const PartyScreen = ({ party, coords, activeCharacter }) => {
	return (
		<div>
			x{coords.x}
			y{coords.y}
			z{coords.z} ({coords.dungeon}) | facing: {coords.facing}
			<div style={{ display: `flex`, border: `1px solid`, padding: `0.5rem` }}>
				<PartyControls />

				{Object.values(party).map((p, i) => (
					<div
						key={p.name}
						style={{
							marginRight: `2rem`,
							padding: `0.5rem`,
							backgroundColor: activeCharacter === i ? `grey` : `white`,
							color: activeCharacter === i ? `white` : `black`,
						}}
					>
						{p.name} | hp:{p.currentHp}/{p.maxHp}
					</div>
				))}
			</div>
		</div>
	)
}

PartyScreen.propTypes = {}
const mapStateToProps = ({ partyAgent: { party, coords, activeCharacter } }) => ({
	party,
	coords,
	activeCharacter,
})

const enhance = compose(
	connect(mapStateToProps, {}),
	onlyUpdateForKeys([ `party`, `coords`, `activeCharacter` ])
)

export default enhance(PartyScreen)