import { Dispatch } from 'ketchup-react'
import { Action, maxPlayers, minPlayers, Player, startGameAction, State, structures } from 'wonders-common'
import Civ from '../Civ/Civ'
import Card from '../Card/Card'
import './Game.css'
import WonderSelector from '../WonderSelector/WonderSelector'
import War from '../War/War'
import first from 'lodash/first'
import last from 'lodash/last'

function getDistant<T>(arr: T[], idx: number) {
  switch (idx) {
    case 0: return arr.slice(2, -1)
    case arr.length - 1: return arr.slice(1, -2)
    default: return [...arr.slice(idx + 2), ...arr.slice(0, idx - 1)]
  }
}

export default function Game({ state, playerName, dispatch }: { state: State, playerName?: string, dispatch: Dispatch<Action> }) {
  const playerIdx: number | undefined = state.players.findIndex(p => p.name === playerName)
  const player: Player | undefined = state.players[playerIdx]
  const started = state.stage !== 'play' ? undefined : {
    left: state.players[(playerIdx + 1) % state.players.length],
    right: state.players[(playerIdx - 1 + state.players.length) % state.players.length],
    distant: getDistant(state.players, playerIdx),
  }

  let gameElem: JSX.Element
  if (!player || !started) {
    gameElem = <div className='wonder-lobby'>
      {state.players.map(p =>
        <Civ key={p.name} player={p} displayStyle='distant' />
      )}
    </div>
    if (player) {
      gameElem = <>
        {gameElem}
        <div>
          <WonderSelector state={state} player={player} dispatch={dispatch} />
          <button onClick={() => dispatch(startGameAction(state.players.length))}
            disabled={started !== undefined
              || state.players.length < minPlayers
              || state.players.length > maxPlayers
              || state.players.some(p => p.wonder === undefined)}>
            Start Game
          </button>
        </div>
      </>
    }
  } else {
    console.log(player.name, player.leftBattles)
    console.log(started.right.name, started.right.rightBattles)
    gameElem = <>
      <div className='wonder-distant'>
        <War vertical players={[started.left, first(started.distant)!]} state={state} alignBottom />
        {started.distant.map((p, i) =>
          <>
            <Civ key={p.name} player={p} displayStyle='distant' />
            {i + 1 < started.distant.length && <War vertical players={started.distant.slice(i, i + 2)} state={state} />}
          </>
        )}
        <War vertical players={[last(started.distant)!, started.right]} state={state} alignBottom />
      </div>
      <div className='wonder-neighbors'>
        <div className='wonder-neighbor'>
          <Civ player={started.left} displayStyle='neighbor' />
          <War players={[started.left, player]} state={state} />
        </div>
        <div className='wonder-center'>
          <div>{state.age === undefined ? '' : `Age ${state.age + 1} ${state.age % 2 === 0 ? '🔃' : '🔄'}`}</div>
          <div><button>Discards</button></div>
        </div>
        <div className='wonder-neighbor'>
          <Civ player={started.right} displayStyle='neighbor' />
          <War players={[started.right, player]} state={state} />
        </div>
      </div>
      <Civ player={player} displayStyle='player' />
      <div>{player.hand?.map(s => structures.get(s)!)?.map((s, i) =>
        <Card key={i} structure={s} />
      )}</div>
    </>
  }

  return <div className='wonder-game'>{gameElem}</div>
}
