function App() {

    const { useRef, useState, useEffect } = React;

    let userImage;
    let userTemplate;
    let userDemo;
    let userMerge;
    let userShare;
    let userOrder = 0;

    const [component, setComponent] = useState('');
    const [currentPage, setCurrentPage] = useState('');
    const [loading, setLoading] = useState(false);
    
    function backFromPagePhotograph() {
        window.history.go(-1);
    }

    function goPagePhotograph() {
        setCurrentPage('photographePage');
        setComponent(<PagePhotograph next={goPageTemplate} back={backFromPagePhotograph}/>)
    }

    function backFromPageTemplate() {
        goPagePhotograph()
    }
    
    function goPageTemplate(base64) {
        userImage = base64;
        // console.log('userImag: \n', userImage);
        setCurrentPage('templatePage');
        setComponent(<PageTemplate next={goPageMerge} back={backFromPageTemplate}/>);
    }

    function backFromPageMerge() {
        // goPageTemplate(userImage);
        goPagePhotograph();
    }

    function goPageMerge(src) {
        userDemo = src.demo;
        userTemplate = src.merge;
        // console.log('userTemplate: \n', userTemplate);
        setCurrentPage('mergePage');
        setComponent(<PageMerge userImage={userImage} userTemplate={userTemplate} userDemo={userDemo} next={goPageShare} back={backFromPageMerge}/>)
    }

    function backFromPageShare() {
        // goPageMerge();
        goPagePhotograph();
    }

    function goPageShare(base64) {
        userMerge = base64;
        // console.log('userMerge: \n', userMerge);
        setCurrentPage('sharePage');
        setComponent(<PageShare userMerge={userMerge} back={backFromPageShare}/>)
    }
    
    useEffect(() => {
        goPagePhotograph();
        return () => {};
    },[])

    useEffect(() => {
        if (!userImage) return;
        
    },[userImage])

    useEffect(() => {
        if (!userTemplate) return;
        
    },[userTemplate])

    useEffect(() => {
        if (!userMerge) return;
        
    },[userMerge])

    return (
        <div class='main__container'>
            {component},
            <LoaderComponent show={loading}></LoaderComponent>
        </div>
        
    );
}

ReactDOM.render(
    <App></App>,
    document.getElementById('app')
);