import * as React from "react";
import { FunctionComponent } from "react";
import { Context } from "../context/context";
import { Game } from "../models/Game";
import { User } from "../models/User";
import { getColorByBrightness } from "../util/ColorUtil";
import CircularPanel from "./CircularPanel";

function getInfoPanelTextByGameState(params: {
  context: Context;
  game?: Game;
  currentUser: User;
  whitePlayer: User;
  blackPlayer: User;
  leftPlayer?: User;
  isSpectator?: boolean;
}): string | undefined {
  const {
    context,
    game,
    currentUser,
    whitePlayer,
    blackPlayer,
    leftPlayer,
    isSpectator
  } = params;

  if (leftPlayer) {
    return isSpectator ? `${leftPlayer.name} ${context.texts.UserLeftTheGame}` :
      leftPlayer.id == currentUser.id ? context.texts.YouLeftTheGame : context.texts.OpponentLeftTheGame;
  }

  const isGameEnded = game?.mancalaGame.state == "ended";
  if (isGameEnded) {
    const wonPlayerID = game.mancalaGame.getWonPlayerId();
    let whoWon;
    if (wonPlayerID) {
      const wonPlayer = wonPlayerID == whitePlayer.id ? whitePlayer : blackPlayer;
      whoWon = isSpectator ? `${wonPlayer.name} ${context.texts.Won}` :
        game.mancalaGame.getWonPlayerId() === currentUser.id
          ? context.texts.YouWon
          : context.texts.YouLost;
    } else {
      whoWon = context.texts.GameDraw;
    }
    return context.texts.GameEnded + " " + whoWon;
  }

  if (game) {
    const playingPlayer = game.mancalaGame.checkIsPlayerTurn(whitePlayer.id) ? whitePlayer : blackPlayer;
    return isSpectator ? `${playingPlayer.name} ${context.texts.Playing}` : game.mancalaGame.checkIsPlayerTurn(currentUser.id)
      ? context.texts.YourTurn
      : context.texts.OpponentTurn;
  }

  return undefined;
}

const InfoPanel: FunctionComponent<{
  context: Context;
  game?: Game;
  currentUser: User;
  whitePlayer: User;
  blackPlayer: User;
  leftPlayer?: User;
  style?: React.CSSProperties;
  visible?: boolean;
  isSpectator?: boolean;
}> = ({
  context,
  game,
  currentUser,
  whitePlayer,
  blackPlayer,
  leftPlayer,
  style,
  visible,
  isSpectator
}) => {
    if (visible === false) return <></>;
    const isUserTurn = currentUser.id ? game?.mancalaGame.checkIsPlayerTurn(currentUser.id) : false;
    const containerColor = isUserTurn
      ? context.themeManager.theme.playerTurnColor
      : context.themeManager.theme.boardColor;
    const textColor = getColorByBrightness(
      containerColor,
      context.themeManager.theme.textColor,
      context.themeManager.theme.textLightColor
    );
    const text = getInfoPanelTextByGameState({
      context,
      game,
      currentUser,
      whitePlayer,
      blackPlayer,
      leftPlayer,
      isSpectator
    });
    if (text) {
      return (
        <CircularPanel style={style} color={containerColor}>
          <h4 style={{ margin: "0", color: textColor, transition: 'color 0.5s' }}>
            {text}
          </h4>
        </CircularPanel>
      );
    } else {
      return (<div></div>)
    }
  };

export default InfoPanel;
