import * as React from "react";
import { FunctionComponent } from "react";
import Util from "../../util/Util";
import PitViewModel from "../../viewmodel/PitViewModel";
import StoneView from "./StoneView";
import { Pressable, View } from "react-native";

const PitView: FunctionComponent<{
    pitViewModel: PitViewModel;
    onClick: () => void;
}> = ({ pitViewModel, onClick }) => {
    const stones = [...Util.range(pitViewModel.stoneCount)].map((i, index) => (
        <StoneView key={index} color={pitViewModel.stoneColor} />
    ));

    return (
        <Pressable onPress={onClick}>
            <View style={{
                backgroundColor: pitViewModel.pitColor,
                margin: 5,
                padding: 5,
                borderRadius: 50,
                display: 'flex',
                alignItems: 'center',
                alignContent: 'center',
                justifyContent: 'center',
                //justifyItems: 'center',
                flexWrap: 'wrap',
            }}>
                {stones}
            </View>
        </Pressable>
    );
};

export default PitView;