import styles from './styles.module.css';
import { Phase1 } from './Phase1';
import { Phase2 } from './Phase2';
import { Phase4 } from './Phase4';

type Props = {
    onTutorialFinished?: () => void;
    tutorialPhase: undefined | number;
    setTutorialPhase: (phase: number) => void;
};

const OverlayingTutorial: React.FC<Props> = ({ onTutorialFinished, tutorialPhase, setTutorialPhase }) => {

    const onFinished = () => {
        if (onTutorialFinished) {
            onTutorialFinished();
        }
    };

    if (!tutorialPhase) {
        return null;
    }
    
    const onOverlayClick = (e: React.MouseEvent) => {
        e.stopPropagation();
    };

    return (
        <div className={styles.overlay} onClick={onOverlayClick}>
            <div className={styles.tutorialBody}>
               {(tutorialPhase === 1) ? <Phase1 nextPhase={() => setTutorialPhase(2)} /> : null}
               {(tutorialPhase === 2) ? <Phase2 nextPhase={() => setTutorialPhase(3)} /> : null}
               {(tutorialPhase === 3) ? <Phase4 nextPhase={onFinished} /> : null}
            </div>
        </div>
    );
};

export default OverlayingTutorial;
