import * as React from "react";
import { FunctionComponent } from "react";
import { Context } from "../../context/context";
import { BoardViewModel, PitViewModel } from "@mancala/core";
import PitView from "./PitView";
import StoreView from "./StoreView";
import { Game } from "@mancala/core";
import { Pit } from "mancala.js";
import { View, Dimensions } from "react-native";
import StoneView from "./StoneView";
import Util from "../../util/Util";

const BoardView: FunctionComponent<{
  game: Game;
  context: Context;
  boardId: string;
  boardViewModel: BoardViewModel;
  revert: boolean;
  onPitSelect: (index: number, pit: Pit) => void;
}> = ({ game, context, boardId, boardViewModel, revert, onPitSelect }) => {
  const windowWidth = Dimensions.get('window').width;
  const windowHeight = Dimensions.get('window').height; // Currently unused but kept for potential future use

  const boardMargin = 0;
  const boardPadding = 10;
  const gap = 5;
  const totalGap = gap * 7;

  const pitWidth = (windowWidth - boardMargin * 2 - boardPadding * 2 - totalGap) / 8;

  const mancalaGame = game?.mancalaGame;
  const theme = context.themeManager.theme;

  const createPitView = (key: any, pit: Pit, pitViewModel: PitViewModel) => {
    const stones = [...Util.range(pitViewModel.stoneCount)].map((i, index) => (
      <StoneView key={index} color={pitViewModel.stoneColor} style={{ width: pitWidth / 10, height: pitWidth / 10 }} />
    ));
    return (
      <PitView
        key={key}
        pitViewModel={pitViewModel}
        context={context}
        onClick={() => onPitSelect(pit.index, pit)}
        style={{ width: pitWidth, height: pitWidth }}
        fontSize={pitWidth / 5} // keep original divisor as per revert request
      >
        {stones}
      </PitView>
    );
  };

  const createPitViewList = (pits: Pit[]) => pits.map((pit, index) => createPitView(index, pit, boardViewModel.pits[pit.index]));

  const player1Pits = createPitViewList(mancalaGame?.board.player1Pits);
  const player2Pits = createPitViewList(mancalaGame?.board.player2Pits);
  const player1BankIndex = mancalaGame?.board.player1BankIndex();
  const player2BankIndex = mancalaGame?.board.player2BankIndex();
  const player1BankViewModel = boardViewModel.pits[player1BankIndex];
  const player2BankViewModel = boardViewModel.pits[player2BankIndex];

  const primaryStoreViewModel = revert ? player1BankViewModel : player2BankViewModel;
  const secondaryStoreViewModel = revert ? player2BankViewModel : player1BankViewModel;

  const stonesPrimaryStore = [...Util.range(primaryStoreViewModel.stoneCount)].map((i, index) => (
    <StoneView key={index} color={primaryStoreViewModel.stoneColor} style={{ width: pitWidth / 10, height: pitWidth / 10 }} />
  ));

  const stonesSecondaryStore = [...Util.range(secondaryStoreViewModel.stoneCount)].map((i, index) => (
    <StoneView key={index} color={secondaryStoreViewModel.stoneColor} style={{ width: pitWidth / 10, height: pitWidth / 10 }} />
  ));

  return (
    <View
      style={{
        backgroundColor: theme.boardColor,
        padding: boardPadding,
        borderRadius: 20,
        flexDirection: "row",
        gap: gap,
        height: "auto",
      }}
    >
      <StoreView
        context={context}
        pitViewModel={primaryStoreViewModel}
        style={{ width: pitWidth, height: pitWidth * 2 + gap }}
        fontSize={pitWidth / 5}
      >
        {stonesPrimaryStore}
      </StoreView>
      <View style={{ flex: 6 }}>
        <View
          style={{
            flexDirection: "row",
            width: "100%",
            flex: 1,
            gap: gap,
          }}
        >
          {revert ? player1Pits?.reverse() : player2Pits?.reverse()}
        </View>
        <View
          style={{
            flexDirection: "row",
            width: "100%",
            flex: 1,
            gap: gap,
          }}
        >
          {revert ? player2Pits : player1Pits}
        </View>
      </View>
      <StoreView
        context={context}
        pitViewModel={secondaryStoreViewModel}
        style={{ width: pitWidth, height: pitWidth * 2 + gap }}
        fontSize={pitWidth / 5}
      >
        {stonesSecondaryStore}
      </StoreView>
    </View>
  );
};

export default BoardView;
