import PropTypes from 'prop-types'
import { css } from 'emotion'
import { compose, onlyUpdateForKeys } from 'recompose'
import SVGArrowRight from './svg/SVGArrowRight'
import SVGArrowLeft from './svg/SVGArrowLeft'
import SVGArrowDropUp from './svg/SVGArrowDropUp'
import SVGArrowDropDown from './svg/SVGArrowDropDown'
import { floorSettings, wallSettings } from '../shared/settings'

const Cell = ({
  x,
  y,
  walls,
  teleporter,
  floor,
  encounters,
  onClick,
  partyIsHere,
  partyIsFacing,
  dmView,
  isSelected,
  explored,
}) => {
  const containerRef = React.createRef()
  const { n, e, s, w } = walls
  const getFloorClass = () => {
    if (floor) {
      return floorSettings[floor].color
    } else if (explored || dmView) {
      return floorSettings[0].color
    } else {
      return floorSettings[99].color
    }
  }
  const getBorderClass = type => {
    if (type && (explored || dmView)) {
      return `${wallSettings[type].width} ${wallSettings[type].style} ${wallSettings[type].color}`
    } else if (explored || dmView) {
      return `${wallSettings[0].width} ${wallSettings[0].style} ${wallSettings[0].color}`
    } else {
      return `${wallSettings[99].width} ${wallSettings[99].style} ${wallSettings[99].color}`
    }
  }
  const cellContainer = css`
    cursor: pointer;
    box-sizing: border-box;
    display: flex;
    height: ${dmView ? 35 : 25}px;
    width: ${dmView ? 35 : 25}px;
    background: ${getFloorClass()};
    border-top: ${getBorderClass(n)};
    border-bottom: ${getBorderClass(s)};
    border-right: ${getBorderClass(e)};
    border-left: ${getBorderClass(w)};
    filter: ${isSelected ? `drop-shadow(0.5rem 0.5rem blue) invert(30%)` : null};
  `
  return (
    <div
      {...{
        onMouseOver: () => console.log(x, y),
        ref: containerRef,
        onClick: e => {
          onClick(e, containerRef)
        },
        className: cellContainer,
      }}
    >
      <div style={{ fontSize: `0.6rem` }}>
        {encounters && `${encounters.id}|${encounters.type}`}
      </div>
      {teleporter &&
        `${teleporter.destination.x}${teleporter.destination.y}${teleporter.destination.z}`}
      {partyIsHere && partyIsFacing === `e` && <SVGArrowRight />}
      {partyIsHere && partyIsFacing === `w` && <SVGArrowLeft />}
      {partyIsHere && partyIsFacing === `n` && <SVGArrowDropUp />}
      {partyIsHere && partyIsFacing === `s` && <SVGArrowDropDown />}
    </div>
  )
}

Cell.propTypes = {}
const mapStateToProps = state => ({})

const enhance = compose()
// onlyUpdateForKeys([``]), connect(mapStateToProps, {})

export default enhance(Cell)