import classNames from "classnames";
import { numAges, Player, State } from 'wonders-common'
import zip from 'lodash/zip'
import range from 'lodash/range'
import './War.css'
import { toRoman } from 'roman-numerals'

function Battle({ age, future, battle }: { age: number, future: boolean, battle: [number | undefined, number | undefined] }) {
  function resultText(result?: number) {
    return future ? '…' : result ?? '🕊️'
  }

  return <div className='wonder-war-battle'>
    <div>{toRoman(age + 1)}</div>
    <div className='wonder-war-battle-results'>
      {range(2).map(i => <div className='wonder-war-battle-result' key={i}>{resultText(battle[i])}</div>)}
    </div>
  </div>
}

export default function War({ state, players, vertical, alignBottom }: { state: State, players: Player[], vertical?: boolean, alignBottom?: boolean }) {
  let battles = zip(players[0].rightBattles, players[1].leftBattles)

  console.log(players, vertical, battles)

  return <div className={classNames({ 'wonder-war': true, 'wonder-war-vertical': vertical, 'wonder-war-horizontal': !vertical, 'wonder-war-align-bottom': alignBottom })}>
    <div className='wonder-war-crossed-swords'>⚔️</div>
    {range(numAges).map(age => <Battle age={age} battle={battles[age] ?? []} future={age >= state.age!} key={age} />)}
  </div>
}
