import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { compose, onlyUpdateForKeys, withState } from 'recompose'
import CombatControls from './CombatControls'
import { Object } from 'core-js'
import { CombatContext } from '../context/CombatContext'

const CombatScreen = ({ encounters, combat, partyAgent, targets, setTarget, items }) => {
	const encounterData = encounters[partyAgent.coords.dungeon][combat.encounterId]
	const encounteredMonsters = encounterData && encounterData.monsters
	return combat.isOn === true ? (
		<div>
			<CombatContext.Consumer>
				{(combatContext) => <CombatControls {...{ targets, setTarget, combatContext }} />}
			</CombatContext.Consumer>
			<div>
				ENEMY: {JSON.stringify(encounters.__types[combat.encounterType])}
				TARGETS: {JSON.stringify(targets)}
				{encounteredMonsters &&
					Object.values(encounteredMonsters).map((m, i) => {
						const monsterId = Object.keys(encounteredMonsters)[i]
						return (
							<div
								style={{
									background:
										targets[partyAgent.activeCharacter] === monsterId ? `lightblue` : `white`,
								}}
								key={`${monsterId}`}
								onClick={() =>
									setTarget((x) => {
										if (encounterData.monsters[monsterId].currentRow === 1) {
											if (
												items.weapons[partyAgent.party[partyAgent.activeCharacter].slot00].reach ===
												1
											) {
												return { ...x, [partyAgent.activeCharacter]: monsterId }
											} else {
												console.log(
													`can't reach with ${items.weapons[
														partyAgent.party[partyAgent.activeCharacter].slot00
													].name} into the back row!`
												)
												return x
											}
										}
										if (encounterData.monsters[monsterId].currentRow === 0) {
											return { ...x, [partyAgent.activeCharacter]: monsterId }
										}
									})}
							>
								{m.name} | hp: {m.currentHp}/{m.maxHp} (row: {m.currentRow}){' '}
								{Object.keys(partyAgent.party).map(
									(key) =>
										targets[key] === monsterId && (
											<span {...{ key }}>#{partyAgent.party[key].name}</span>
										)
								)}
							</div>
						)
					})}
			</div>
		</div>
	) : (
		<div>PEACE</div>
	)
}

CombatScreen.propTypes = {}
const mapStateToProps = ({ encounters, combat, partyAgent, items }) => ({
	encounters,
	combat,
	partyAgent,
	items,
})

const enhance = compose(
	//onlyUpdateForKeys([ `encounters`, `combat`, `partyAgent` ]),
	withState(`targets`, `setTarget`, {}),
	connect(mapStateToProps, {})
)

export default enhance(CombatScreen)