import { Bank, MancalaGame, Pit } from "mancala.js";
import * as React from "react";
import { FunctionComponent, useState } from "react";

type Theme = {
  background: string;
  boardColor: string;
  boardColorWhenPlayerTurn: string;
  storeColor: string;
  storeColorWhenPlayerTurn: string;
  holeColor: string;
  ballColor: string;
};

const theme: Theme = {
  background: "#EEEEEE",
  boardColor: "#4D606E",
  boardColorWhenPlayerTurn: "#84b8a6",
  storeColor: "#3FBAC2",
  storeColorWhenPlayerTurn: "#6cab94",
  holeColor: "#D3D4D8",
  ballColor: "#393E46",
};

const BallView: FunctionComponent<{ color: string }> = ({ color }) => {
  return (
    <div
      style={{
        background: color,
        margin: "1px",
        width: "1vw",
        height: "1vw",
        borderRadius: "10vw",
      }}
    ></div>
  );
};

function range(size: number) {
  var ans = [];
  for (let i = 0; i < size; i++) {
    ans.push(i);
  }
  return ans;
}

const HoleView: FunctionComponent<{
  hole: Pit;
  color: string;
  onClick: () => void;
}> = ({ hole, color, onClick }) => {
  const balls = [...range(hole.stoneCount)].map((i) => (
    <BallView color={theme.ballColor} />
  ));

  return (
    <div
      onClick={onClick}
      style={{
        background: color,
        margin: "5px",
        padding: "5px",
        borderRadius: "10vw",
        display: "flex",
        alignItems: "center",
        alignContent: "center",
        justifyContent: "center",
        justifyItems: "center",
        flexWrap: "wrap",
      }}
    >
      {balls}
    </div>
  );
};

const StoreView: FunctionComponent<{
  store: Bank;
  color: string;
  gridColumn: string;
  gridRow: string;
}> = ({ store, color, gridColumn, gridRow }) => {
  const balls = [...range(store.stoneCount)].map((i) => (
    <BallView color={theme.ballColor} />
  ));
  return (
    <div
      style={{
        gridColumn: gridColumn,
        gridRow: gridRow,
        background: color,
        margin: "5px",
        borderRadius: "10vw",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        alignContent: "center",
        flexWrap: "wrap",
      }}
    >
      {balls}
    </div>
  );
};

const BoardView: FunctionComponent<{
  game?: MancalaGame;
  userKey: string;
  onHoleSelect: (index: number, hole: Pit) => void;
}> = ({ game, userKey, onHoleSelect }) => {
  const player1Pits = game?.board.player1Pits.map((hole) => (
    <HoleView
      hole={hole}
      color={theme.holeColor}
      onClick={() => {
        if (game.turnPlayerId === game.player1Id)
          onHoleSelect(game.board.player1Pits.indexOf(hole), hole);
      }}
    />
  ));

  const player2Pits = game!!.board.player2Pits.map((hole) => (
    <HoleView
      hole={hole}
      color={theme.holeColor}
      onClick={() => {
        if (game.turnPlayerId === game.player2Id)
          onHoleSelect(game.board.player2Pits.indexOf(hole), hole);
      }}
    />
  ));

  const isUserTurn = game.checkIsPlayerTurn(userKey);

  const storeColor = isUserTurn
    ? theme.storeColor
    : theme.storeColorWhenPlayerTurn;

  return (
    <div
      style={{
        margin: "10px",
        padding: "20px",
        display: "grid",
        gridTemplateColumns: "repeat(8, 11vw)",
        gridTemplateRows: "repeat(2, 11vw)",
        borderRadius: "3vw",
        background: isUserTurn
          ? theme.boardColor
          : theme.boardColorWhenPlayerTurn,
      }}
    >
      {userKey === game.player2Id ? (
        <>
          <StoreView
            store={game!!.board.player1Bank}
            color={storeColor}
            gridColumn="1 / 2"
            gridRow="1 / 3"
          />
          <StoreView
            store={game!!.board.player2Bank}
            color={storeColor}
            gridColumn="8 / 9"
            gridRow="1 / 3"
          />
          {player1Pits.reverse()}
          {player2Pits}
        </>
      ) : (
        <>
          <StoreView
            store={game!!.board.player2Bank}
            color={storeColor}
            gridColumn="1 / 2"
            gridRow="1 / 3"
          />
          <StoreView
            store={game!!.board.player1Bank}
            color={storeColor}
            gridColumn="8 / 9"
            gridRow="1 / 3"
          />
          {player2Pits.reverse()}
          {player1Pits}
        </>
      )}
    </div>
  );
};

export default BoardView;