import { useMemo } from 'react';
import { Player, playerStats, Resource, Science, sumMaps } from 'wonders-common';
import fill from 'lodash/fill'

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']

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

  const outerStyle = {
    backgroundImage: player.wonder && wonderBgExts.map(ext => `url(/assets/wonders/${player.wonder}.${ext})`).join(', '),
  }

  return <div className='wonder-civ-outer' style={outerStyle}>
    <div>{[...pStats.resources].flatMap(([res, n]) => fill(Array(n), resEmojis.get(res)!)).join('')}</div>
    <div>{pStats.shields}🛡️</div>
    <div>${player.gold}</div>
    <div>{player.name}</div>
    <div>{pStats.sciences.map(s => [...s].map(sci => sciEmojis.get(sci)!)).map(s =>
      s.length === 1 ? s[0] : `(${s.join('/')})`
    )}</div>
    <div>{[...sumMaps(pStats.structObjs.map(s => new Map([[s.type, 1]])))].map(([type, n]) =>
      <span className={`wonder-civ-struct wonder-civ-struct-type-${type.replaceAll(' ', '-')}`}>n</span>
    )}</div>
  </div>
}
