function PageMerge(props) {
    const { useRef, useState, useEffect } = React;

    const { userImage, userDemo, userTemplate } = props;

    const [ loading, setLoading ] = useState(false);

    const refDisplayImage = useRef();

    const _self = this;

    function goNext(_mergeImage) {
        props.next(_mergeImage);
    }
    
    function goBack() {
        props.back();
    }

    function doFaceMerge() {
        return new Promise((resolve, reject) => {
            const faceFusionAPI = new FaceFusionAPI();
            faceFusionAPI.start(
                userTemplate,
                userImage,
                0.29,
                async (_merge_image: string) => {
                    resolve(_merge_image);
                },
                (errMsg: string) => {
                    reject(new Error(errMsg));
                },
          );
        });
    }

    function mergeFace() {
        setLoading(true);
        doFaceMerge().then((_mergeImage) => {
            setLoading(false);
            goNext(_mergeImage);
        }).catch((error) => {
            console.log('MergeFace error: \n' + error.name + 'Message: \n' + error.message);
            if (confirm('融合失敗, 是否要再試一次？')) {
                mergeFace();
            } else {
                goBack();
            }
        });
    }

    useEffect(() => {
        mergeFace();
        return () => {};
    }, []);

    return (
        <div class="mergePage">
            <div class="mergePage__header">
                <div class="btn__back">
                    <img src="https://d1xzlli46wohoc.cloudfront.net/assets/images/btn-retake.png" alt="" />
                </div>
            </div>
            <div class="mergePage__body">
                <div class="mergePage__title">
                    <img src="https://d1xzlli46wohoc.cloudfront.net/assets/images/merge-title.png" alt="" />
                </div>
                <div class="mergePage__demo">
                    <div class="mergePage__picture">
                        <img ref={refDisplayImage} src={userDemo}/>
                    </div>
                    {
                        (loading) ? (<div class="mergePage__loader">
                                    <div class="loader-46"></div>
                                    <div class="loader__text">您的專屬菜單正在輸出...</div>
                                </div>) : ('')
                    }
                </div>
            </div>
            <div class="mergePage__footer"></div>
        </div>
    );
}