import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import styles from './styles.module.css';
import { Phase4 } from './Phase4';
import { Phase5 } from './Phase5';
const OverlayingTutorial = ({ onTutorialFinished }) => {
    const [phase, setPhase] = useState(0);
    const [isFinished, setIsFinished] = useState(false);
    const [selectedBlocks, setSelectedBlocks] = useState();
    const onFinished = () => {
        setIsFinished(true);
        onTutorialFinished?.(selectedBlocks);
    };
    if (isFinished) {
        return null;
    }
    const onOverlayClick = (e) => {
        e.stopPropagation();
    };
    return (_jsx("div", { className: styles.overlay, onClick: onOverlayClick, children: _jsxs("div", { className: styles.tutorialBody, children: [(phase === 0) ? _jsx(Phase4, { nextPhase: (blocks) => {
                        setSelectedBlocks(blocks);
                        setPhase(1);
                    } }) : null, (phase === 1) ? _jsx(Phase5, { nextPhase: onFinished }) : null] }) }));
};
export default OverlayingTutorial;
