import { useState } from 'react';
import styles from './styles.module.css';
import { Phase0 } from './Phase0';
import { Phase1 } from './Phase1';
import { Phase2 } from './Phase2';
import { Phase3 } from './Phase3';
import { Phase4 } from './Phase4';
import { Phase5 } from './Phase5';

const OverlayingTutorial = () => {
    const [phase, setPhase] = useState(0);
    const [isFinished, setIsFinished] = useState(false);

    const onFinished = () => {
        setIsFinished(true);
    };

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

    return (
        <div className={styles.overlay} onClick={onOverlayClick}>
            <div className={styles.tutorialBody}>
               {(phase === 0) ? <Phase0 nextPhase={() => setPhase(1)} /> : null}
               {(phase === 1) ? <Phase1 nextPhase={() => setPhase(2)} /> : null}
               {(phase === 2) ? <Phase2 nextPhase={() => setPhase(3)} /> : null}
               {(phase === 3) ? <Phase3 nextPhase={() => setPhase(4)} /> : null}
               {(phase === 4) ? <Phase4 nextPhase={() => setPhase(5)} /> : null}
               {(phase === 5) ? <Phase5 nextPhase={onFinished} /> : null}
            </div>
        </div>
    );
};

export default OverlayingTutorial;
