import { useGame } from '../../contexts/game-context'
import Grid from '../board/grid'
import Space from '../space/space'
import type { GameEntity } from '../../types'

export default function Entity ({ entity }: { entity: GameEntity }) {
  const { clickTarget, allClickable } = useGame()
  const isClickable = allClickable.has(entity)
  const attributes = entity.attributes
  const entityType = attributes.entityType ?? attributes.type

  switch (entityType) {
    case 'Grid':
      return <Grid grid={entity} />
    case 'Space':
      return <Space space={entity} />
    default:
      return (
        <div
          onClick={(e) => {
            if (isClickable) {
              e.stopPropagation()
              clickTarget(entity)
            }
          }}
          className={[
            'entity',
            attributes.player !== undefined && `player-${String(attributes.player)}`,
            isClickable && 'entity--clickable',
          ].filter(Boolean).join(' ')}
        >
          {entity.rule.displayProperties?.map((property, i) => (
            <div key={i}>
              {property}: {String((attributes[property] as string | number | boolean | undefined) ?? '')}
            </div>
          ))}
        </div>
      )
  }
}