import { Fragment, FunctionComponent, useEffect, useState } from 'react';
import { gameStore } from '../../state-managment/game-state-managment';
import '../components-style/sass/front-hand.css';
export const OppositeHand: FunctionComponent = () => {
    const [showBackHand, setShowBackHand] = useState(false);
    useEffect(() => {
        gameStore.subscribe(() => {
            const ui = gameStore.getState().gameState.ui;
            if (ui?.canShowHands) {
                setShowBackHand(true);
            }
        })
    }, []);
    const createBackHand = (): JSX.Element[] => {
        const backCards: JSX.Element[] = [];
        for (let i = 0; i < 12; i++) {
            const inlineStyle = {
                left: `${(i * 5.33)}%`
            }
            const backCard =
                <div
                    key={`${i}`}
                    id={`opposite-card-${i}`}
                    style={{ ...inlineStyle }}
                    className={`opposite-card`}
                >

                </div>
            backCards.push(backCard);
        }
        return backCards;
    }
    const oppositeHande =
        <Fragment>
            {showBackHand && createBackHand()}
        </Fragment>
    return oppositeHande;
}