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

const DungeonMap = ({
	dungeons,
	walls,
	floor,
	minimapAreaRadius = 5,
	partyAgent: { coords: { dungeon } },
	partyAgent: { coords, explored },
}) => {
	return (
		<div>
			{new Array(dungeons[dungeon].dimensions.y).fill(null).map((_, yr) => {
				const y = dungeons[dungeon].dimensions.y - yr - 1
				if (
					minimapAreaRadius
						? y < coords.y + minimapAreaRadius && y > coords.y - minimapAreaRadius
						: true
				) {
					return (
						<div key={y} {...{ className: `row`, style: { display: `flex` } }}>
							{new Array(dungeons[dungeon].dimensions.x).fill(null).map((_, x) => {
								if (
									minimapAreaRadius
										? x < coords.x + minimapAreaRadius && x > coords.x - minimapAreaRadius
										: true
								) {
									return (
										<Cell
											key={`${x}${y}`}
											{...{
												dmView: false,
												explored: explored[dungeon] && explored[dungeon][`x${x}y${y}z${coords.z}`],
												x,
												y,
												partyIsHere: coords.x === x && coords.y === y,
												partyIsFacing: coords.facing,
												floor: floor[dungeon][`x${x}y${y}z${coords.z}`],
												walls: walls[dungeon][`x${x}y${y}z${coords.z}`]
													? walls[dungeon][`x${x}y${y}z${coords.z}`]
													: {},
											}}
										/>
									)
								}
							})}
						</div>
					)
				}
			})}
		</div>
	)
}

DungeonMap.propTypes = {}
const mapStateToProps = ({ walls, floor, dungeons, partyAgent }) => ({
	walls,
	floor,
	dungeons,
	partyAgent,
})

const enhance = compose(connect(mapStateToProps), onlyUpdateForKeys([ `partyAgent`, `explored` ]))

export default enhance(DungeonMap)