import { useMemo } from 'react'
import { Player, playerStats, Resource, Science, Structure, StructureType, wonders } from 'wonders-common'
import fill from 'lodash/fill'
import './Civ.css'
import classNames from 'classnames'

type DisplayStyle = 'player' | 'neighbor' | 'distant'

const resEmojis = new Map<Resource, string>([
  ['brick', '🧱'],
  ['cloth', '👖'],
  ['glass', '⚗️'],
  ['ore', '⛏️'],
  ['paper', '🧻'],
  ['stone', '🗿'],
  ['wood', '🌲'],
])
const sciEmojis = new Map<Science, string>([
  ['education', '🎓'],
  ['engineering', '⚙️'],
  ['research', '📚'],
])
const structTypeLayout = new Map<DisplayStyle, StructureType[][]>([
  ['player', [
    ['basic industry'], ['advanced industry'], ['military'], ['science'], ['commerce'], ['guild'], ['culture'],
  ]],
  ['neighbor', [
    ['basic industry', 'advanced industry'],
    ['military', 'science'],
    ['commerce', 'guild', 'culture'],
  ]],
  ['distant', [
    ['basic industry', 'advanced industry', 'military'],
    ['science', 'commerce', 'guild', 'culture'],
  ]],
])

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, displayStyle }: { player: Player, displayStyle: DisplayStyle }) {
  const pStats = useMemo(() => playerStats(player), [player])

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

  return <div className='wonder-civ'>
    <div>{player.name}</div>
    {wonder && <div className='wonder-civ-wonder' style={{ backgroundImage: wonderBgImage }}>
      <div>{wonder.name}</div>
      <div>{resEmojis.get(wonder.innateResource)}</div>
    </div>}
    <div className='wonder-civ-structs'>
      {structTypeLayout.get(displayStyle)!.map((col, i) =>
        <div key={i} className='wonder-civ-struct-col'>
          {col.filter(type => pStats.structObjs.some(s => s.type === type)).map(type =>
            <ol key={type} className='wonder-civ-struct-group'>
              {pStats.structObjs.filter(o => o.type === type).map((s, i) =>
                <li key={i} className={classNames({ 'wonder-civ-struct': true, [`wonder-civ-struct-type-${type.replaceAll(' ', '-')}`]: true })}>
                  {s.name} {structurePeek(s)}
                </li>
              )}
            </ol>
          )}
        </div>
      )}
    </div>
  </div>
}
