import { createPortal } from 'react-dom';
import { useEffect, useState } from 'react';
import Meter from './Meter';
import CountdownTimer from './CoundownTimer';
import styled, { css } from 'styled-components';
import TutorialBtn from './TutorialBtn';
    
function MobileGameUI({ isShow, isTutorialModalOpen, timerSeconds, timerShouldStart, onTimerFinished, openTutorial }) {
    const [isMounted, setIsMounted] = useState(false);

    useEffect(() => {
        setIsMounted(true);
    }, []);


    return (
        isMounted && createPortal(
            <StyledContainer $isShow={isShow}>
                <Meter className="mobile-meter" />
                <CountdownTimer
                    className="mobile-countdown-timer"
                    onFinish={onTimerFinished}
                    totalSeconds={timerSeconds}
                    shouldStart={timerShouldStart}
                />
                <TutorialBtn
                    className="mobile-tutorial-btn"
                    onClick={openTutorial}
                    disabled={isTutorialModalOpen}
                />
            </StyledContainer>,
            document.getElementById('mobile-game-ui-root')
        )
    );
}

const StyledContainer = styled.div`

    display: flex;
    justify-content: space-between;

    width: 100%;

    opacity: ${({ $isShow }) => $isShow ? 1 : 0};
    transition: opacity 0.2s ease-out;

    .mobile-meter {
        padding-left: 32px;
        border-left: none;
        border-radius: 0;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
    }

    .mobile-countdown-timer {
        border-radius: 0;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
    }

    .mobile-tutorial-btn {
        position: absolute;
        right: 0;
        bottom: -10px;
        transform: translateY(100%);
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
`;

export default MobileGameUI;
