import styled from "styled-components";
import CountdownTimer from "./CoundownTimer";
import TutorialBtn from "./TutorialBtn";
import { useMemo } from "react";


function GameUI({ gameState, isMobile, COUNTDOWN, CHAPTER_STATES, handleTimerFinished, openTutorial }) {

    const memoCountdownTimer = useMemo(() => {
        if (gameState === CHAPTER_STATES.COVER) return null;
        return (
            <CountdownTimer
                className="countdown-timer"
                shouldStart={gameState === CHAPTER_STATES.GAME}
                totalSeconds={COUNTDOWN}
                onFinish={handleTimerFinished}
            />
        );
    }, [gameState, isMobile, handleTimerFinished, CHAPTER_STATES]);

    if (typeof isMobile !== "boolean" || isMobile === true || gameState !== CHAPTER_STATES.GAME) return null;

    return (
        <StyledContainer>
            {memoCountdownTimer}
            <TutorialBtn
                onClick={openTutorial}
            />
        </StyledContainer>
    );
}

const StyledContainer = styled.div`
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 200;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;

    button {
        pointer-events: auto;
        cursor: none;
    }
`;


export default GameUI;