/* eslint-disable react/style-prop-object */
import { Dispatch } from 'ketchup-react'
import { Action, Player, State, structures } from 'wonders-common'
import Civ from '../Civ/Civ'
import Card from '../Card/Card'
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'

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)]
    }
}

function DistantCivs({ players }: { players: Player[] }) {
  return <Row>{players.map(p =>
    <Col key={p.name}>
      <Civ player={p} style='compact'/>
    </Col>
  )}</Row>
}

export default function Game({ state, playerName }: { 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),
  }

  if (started && player) {
    return <>
      <DistantCivs players={started.distant}/>
      <Row>
        <Col><Civ player={started.left} style='neighbor'/></Col>
        <Col>
          <div>{state?.age === undefined ? '' : `Age ${state.age + 1} ${state.age % 2 === 0 ? '🔃' : '🔄'}`}</div>
          <div><button>Discards</button></div>
        </Col>
        <Col><Civ player={started.right} style='neighbor'/></Col>
      </Row>
      <Row>
        <Civ player={player} style='player'/>
      </Row>
      <Row>{player.hand.map(s => structures.get(s)!).map(s =>
        <Col>
          <Card structure={s}/>
        </Col>
      )}</Row>
    </>
  } else {
    return <DistantCivs players={state.players}/>
    // TODO Pick wonder
  }
}
