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

const StoreView: FunctionComponent<{
  context: Context;
  pitViewModel: PitViewModel;
  style: ViewStyle,
  children: React.ReactNode
  fontSize: number
}> = ({ context, pitViewModel, style, children, fontSize }) => {
 
  const textColor = getColorByBrightness(
    pitViewModel.pitColor,
    context.themeManager.theme.textColor,
    context.themeManager.theme.textLightColor
  );
  return (
    <View
      style={[style, {
        backgroundColor: pitViewModel.pitColor,
        borderRadius: 100,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        alignContent: 'center',
        flexWrap: 'wrap',
        position: 'relative',
        flexDirection: "row"
      }]}>
      {children}
      <Text style={{
        color: textColor,
        position: 'absolute',
        bottom: fontSize/2,
        fontFamily: 'monospace',
        fontWeight: 'bold',
        fontSize: fontSize
      }}>
        {pitViewModel.stoneCount}
      </Text>
    </View>
  );
};

export default StoreView;