import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { cardinalDirections } from '../shared/settings'
import { compose, onlyUpdateForKeys } from 'recompose'
import { setAsync as setDungeonsAsync } from '../redux/actions/dungeons'
import { setAsync as setEditorAsync } from '../redux/actions/editor'
import { clearAsync as clearWallsAsync, setAsync as setWallsAsync } from '../redux/actions/walls'
import { clearAsync as clearFloorAsync, setAsync as setFloorAsync } from '../redux/actions/floor'
import {
	clearAsync as clearEncountersAsync,
	setAsync as setEncountersAsync,
} from '../redux/actions/encounters'
const DungeonEditor = ({
	dungeons,
	editor,
	encounters,
	walls,
	floor,
	setDungeonsAsync,
	setEditorAsync,
	clearWallsAsync,
	clearFloorAsync,
	clearEncountersAsync,
	setWallsAsync,
	setFloorAsync,
	setEncountersAsync,
}) => {
	return (
		<div>
			<div
				style={{
					display: `flex`,
				}}
			>
				{Object.keys(dungeons).map((dungeon, i) => (
					<div
						key={i}
						onClick={() =>
							setEditorAsync({
								attribute: `dungeon`,
								value: Object.keys(dungeons)[i],
							})}
						style={{
							fontWeight: editor.dungeon === Object.keys(dungeons)[i] ? `bold` : `normal`,
						}}
					>
						|{Object.keys(dungeons)[i]}|
					</div>
				))}
				dimensions: x
				<input
					type={`number`}
					value={dungeons[editor.dungeon].dimensions.x}
					onChange={(e) =>
						setDungeonsAsync({
							dungeon: editor.dungeon,
							attribute: `dimensions`,
							value: {
								x: parseInt(e.target.value, 10),
							},
						})}
				/>
				y
				<input
					type={`number`}
					value={dungeons[editor.dungeon].dimensions.y}
					onChange={(e) =>
						setDungeonsAsync({
							dungeon: editor.dungeon,
							attribute: `dimensions`,
							value: {
								y: parseInt(e.target.value, 10),
							},
						})}
				/>
				z
				<input
					type={`number`}
					value={dungeons[editor.dungeon].dimensions.z}
					onChange={(e) =>
						setDungeonsAsync({
							dungeon: editor.dungeon,
							attribute: `dimensions`,
							value: {
								z: parseInt(e.target.value, 10),
							},
						})}
				/>
			</div>
			activeFloor
			<input
				type={`number`}
				value={editor.activeFloor}
				onChange={(e) =>
					setEditorAsync({
						attribute: `activeFloor`,
						value: parseInt(e.target.value, 10),
					})}
			/>
			<div
				onClick={async () => {
					const objects = { walls, floor, encounters }
					await clearEncountersAsync({ dungeon: editor.dungeon })
					await clearFloorAsync({ dungeon: editor.dungeon })
					await clearWallsAsync({ dungeon: editor.dungeon })
					Object.keys(objects.walls[editor.dungeon]).forEach((key) => {
						const z = /z(\d+)/.exec(key)[1]
						const x = /x(\d+)/.exec(key)[1]
						const y = /y(\d+)/.exec(key)[1]

						cardinalDirections.forEach((cardinal) => {
							if (objects.walls[editor.dungeon][key][cardinal]) {
								const type = objects.walls[editor.dungeon][key][cardinal]
								setWallsAsync({
									dungeon: editor.dungeon,
									x,
									y,
									z: parseInt(z, 10) + 1,
									type,
									cardinal,
								})
							}
						})
					})
					Object.keys(objects.encounters[editor.dungeon]).forEach((key) => {
						const z = /z(\d+)/.exec(key)[1]
						const x = /x(\d+)/.exec(key)[1]
						const y = /y(\d+)/.exec(key)[1]
						const type = objects.encounters[editor.dungeon][key].type
						const id = objects.encounters[editor.dungeon][key].id
						setEncountersAsync({
							dungeon: editor.dungeon,
							x,
							y,
							z: parseInt(z, 10) + 1,
							type,
							id,
						})
					})
					Object.keys(objects.floor[editor.dungeon]).forEach((key) => {
						const z = /z(\d+)/.exec(key)[1]
						const x = /x(\d+)/.exec(key)[1]
						const y = /y(\d+)/.exec(key)[1]
						const type = objects.floor[editor.dungeon][key]
						setFloorAsync({
							dungeon: editor.dungeon,
							x,
							y,
							z: parseInt(z, 10) + 1,
							type,
						})
					})
					console.log(objects)
				}}
			>
				lift up 1 level
			</div>
			<div
				onClick={async () => {
					const objects = { walls, floor, encounters }
					await clearEncountersAsync({ dungeon: editor.dungeon })
					await clearFloorAsync({ dungeon: editor.dungeon })
					await clearWallsAsync({ dungeon: editor.dungeon })
					Object.keys(objects.walls[editor.dungeon]).forEach((key, i) => {
						const z = /z(\d+)/.exec(key)[1]
						const x = /x(\d+)/.exec(key)[1]
						const y = /y(\d+)/.exec(key)[1]
						console.log(z, x, y, key)
						cardinalDirections.forEach((cardinal) => {
							if (objects.walls[editor.dungeon][key][cardinal]) {
								const type = objects.walls[editor.dungeon][key][cardinal]
								setWallsAsync({
									dungeon: editor.dungeon,
									x,
									y,
									z: parseInt(z, 10) - 1,
									type,
									cardinal,
								})
							}
						})
					})
					Object.keys(objects.encounters[editor.dungeon]).forEach((key) => {
						const z = /z(\d+)/.exec(key)[1]
						const x = /x(\d+)/.exec(key)[1]
						const y = /y(\d+)/.exec(key)[1]
						const type = objects.encounters[editor.dungeon][key].type
						const id = objects.encounters[editor.dungeon][key].id
						setEncountersAsync({
							dungeon: editor.dungeon,
							x,
							y,
							z: parseInt(z, 10) - 1,
							type,
							id,
						})
					})
					Object.keys(objects.floor[editor.dungeon]).forEach((key, i) => {
						const z = /z(\d+)/.exec(key)[1]
						const x = /x(\d+)/.exec(key)[1]
						const y = /y(\d+)/.exec(key)[1]
						console.log(z, x, y, key)
						const type = objects.floor[editor.dungeon][key]
						setFloorAsync({
							dungeon: editor.dungeon,
							x,
							y,
							z: parseInt(z, 10) - 1,
							type,
						})
					})
					console.log(objects)
				}}
			>
				escavate down 1 level
			</div>
		</div>
	)
}

DungeonEditor.propTypes = {}
const mapStateToProps = ({ dungeons, editor, walls, floor, encounters }) => ({
	dungeons,
	editor,
	walls,
	floor,
	encounters,
})

const enhance = compose(
	onlyUpdateForKeys([ `dungeons`, `editor` ]),
	connect(mapStateToProps, {
		setDungeonsAsync,
		setEditorAsync,
		clearWallsAsync,
		clearFloorAsync,
		clearEncountersAsync,
		setWallsAsync,
		setFloorAsync,
		setEncountersAsync,
	})
)

export default enhance(DungeonEditor)