import * as React from "react";
import { FunctionComponent } from "react";
import { PitViewModel, getColorByBrightness } from "@mancala/core";
import { Context } from "../../context/context";
import { Pressable, View, ViewStyle, Text } from "react-native";
import Util from "../../util/Util";
import StoneView from "./StoneView";

interface PitViewProps {
  pitViewModel: PitViewModel;
  context: Context;
  onClick: () => void;
  style: ViewStyle;
  fontSize: number;
}

const PitView: FunctionComponent<PitViewProps> = ({ pitViewModel, context, onClick, style, fontSize }) => {
  const textColor = getColorByBrightness(
    pitViewModel.pitColor,
    context.themeManager.theme.textColor,
    context.themeManager.theme.textLightColor
  );

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

  return (
    <View style={[style, { backgroundColor: pitViewModel.pitColor, borderRadius: 100, position: "relative" }] }>
      <Pressable onPress={onClick} style={{ width: "100%", height: "100%", padding: 5, display: "flex", alignItems: "center", alignContent: "center", justifyContent: "center", flexDirection: "row", flexWrap: "wrap" }}>
        {stones}
      </Pressable>
      {pitViewModel.stoneCount > 0 && (
        <Text
          style={{
            color: textColor,
            position: "absolute",
            bottom: fontSize / 2,
            alignSelf: "center",
            fontFamily: "monospace",
            fontWeight: "bold",
            fontSize: fontSize,
          }}
        >
          {pitViewModel.stoneCount}
        </Text>
      )}
    </View>
  );
};

export default PitView;