import { useMemo } from 'react'
import { Player, playerStats, Resource, Science, Structure, structureTypes } from 'wonders-common'
import fill from 'lodash/fill'
import './Civ.css'
import Container from 'react-bootstrap/Container'
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'

const resEmojis = new Map<Resource, string>([
  ['brick', '🧱'],
  ['cloth', '👖'],
  ['glass', '⚗️'],
  ['ore', '⛏️'],
  ['paper', '🧻'],
  ['stone', '🗿'],
  ['wood', '🌲'],
])
const sciEmojis = new Map<Science, string>([
  ['education', '🎓'],
  ['engineering', '⚙️'],
  ['research', '📚'],
])
const wonderBgExts = ['jpg', 'webp']

function structurePeek(struct: Structure): string {
  switch (struct.type) {
    case 'science':
      return [...(struct.sciences ?? [])].map(sci => sciEmojis.get(sci)!).join('/')
    case 'advanced industry':
    case 'basic industry':
      return [...(struct.resources?.entries() ?? [])]
        .map(([res, num]) => fill(Array(num), resEmojis.get(res)!).join(''))
        .join('/')
    case 'military':
      return fill(Array(struct.shields ?? 0), '🛡️').join('')
    case 'culture':
      return `${struct.points}⭐`
    default:
      return ''
  }
}

export default function Civ({ player, civStyle }: { player: Player, civStyle: 'player' | 'neighbor' | 'compact' }) {
  const pStats = useMemo(() => playerStats(player), [player])

  const outerStyle: React.CSSProperties = player.wonder === undefined ? {} : {
    backgroundImage: ['linear-gradient(to left, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.75))', ...wonderBgExts.map(ext => `url("/assets/wonders/${player.wonder}.${ext}")`)].join(', '),
  }

  return <Container fluid className='wonder-civ-outer' style={outerStyle}>
    <Row>
      <Col>{player.name}{player.wonder && ` • ${player.wonder}`}</Col>
    </Row>
    <Row>
      {structureTypes.map(type =>
        <Col key={type}>
          <ol>
            {pStats.structObjs.filter(o => o.type === type).map((s, i) =>
              <li key={i} className={`wonder-civ-struct wonder-civ-struct-type-${type.replaceAll(' ', '-')}`}>
                {s.name} {structurePeek(s)}
              </li>
            )}
          </ol>
        </Col>
      )}
    </Row>
  </Container>
}
