import { useState } from 'react';
import styles from './styles.module.css';
import { Phase4 } from './Phase4';
import { Phase5 } from './Phase5';
import { PosterItem } from '../types';

export type TutorialSelections = {
    click?: PosterItem;
    noClick?: PosterItem;
};

type Props = {
    onTutorialFinished?: (selectedBlocks?: TutorialSelections) => void;
};

const OverlayingTutorial = ({ onTutorialFinished }: Props) => {
    const [phase, setPhase] = useState(0);
    const [isFinished, setIsFinished] = useState(false);
    const [selectedBlocks, setSelectedBlocks] = useState<TutorialSelections | undefined>();

    const onFinished = () => {
        setIsFinished(true);
        onTutorialFinished?.(selectedBlocks);
    };

    if (isFinished) {
        return null;
    }

    const onOverlayClick = (e: React.MouseEvent) => {
        e.stopPropagation();
    };

    return (
        <div className={styles.overlay} onClick={onOverlayClick}>
            <div className={styles.tutorialBody}>
                {(phase === 0) ? <Phase4 nextPhase={(blocks) => {
                    setSelectedBlocks(blocks);
                    setPhase(1);
                }} /> : null}
                {(phase === 1) ? <Phase5 nextPhase={onFinished} /> : null}
            </div>
        </div>
    );
};

export default OverlayingTutorial;
