function PageTemplate(props) {

    const { useRef, useState, useEffect } = React;

    const refSwiperContainer = useRef();
    const refPagination = useRef();

    const imageArray = [
        {
            demo: 'https://d1xzlli46wohoc.cloudfront.net/assets/images/demo/demo-A.png',
            merge: 'https://d1xzlli46wohoc.cloudfront.net/assets/images/demo/template-A.jpg',
        },
        {
            demo:'https://d1xzlli46wohoc.cloudfront.net/assets/images/demo/demo-B.png',
            merge:'https://d1xzlli46wohoc.cloudfront.net/assets/images/demo/template-B.jpg',
        }
    ]

    let mySwiper;

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

    function onConfirm() {
        goNext(imageArray[mySwiper.realIndex]);
    }

    function initSwiper() {
        mySwiper = new Swiper(refSwiperContainer.current,{
            // loop: true,
            // autoplay: {
            //     delay: 3000,
            //     disableOnInteraction: false,
            // },
            direction: 'horizontal',
            slidesPerView: 1,
            spaceBetween: 30,
            initialSlide: 0,
            pagination: {
                el: refPagination.current,
                clickable: true,
                renderBullet: function (index, className) {
                    return '<div class="pagination__bullet ' + className + '"></div>';
                },
            },
            navigation: {
                nextEl: '.description--carousell--next',
                prevEl: '.description--carousell--prev',
            },
        });

    }

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

    return (
        <div class="templatePage">
            <div class="templatePage__header">
                <div class="btn__back" onClick={goBack}>
                    <img src="https://d1xzlli46wohoc.cloudfront.net/assets/images/btn-retake.png" alt="" />
                </div>
            </div>
            <div class="templatePage__body">
                <div class="templatePage__title">
                    <img src="https://d1xzlli46wohoc.cloudfront.net/assets/images/merge-title.png" alt="" />
                </div>
                <div class="templatePage__swiper">
                    <div class="swiper-container" ref={refSwiperContainer}>
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="templatePage__slide">
                                    <img src='https://d1xzlli46wohoc.cloudfront.net/assets/images/demo/demo-A.png' />
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="templatePage__slide">
                                    <img src='https://d1xzlli46wohoc.cloudfront.net/assets/images/demo/demo-B.png' />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="templatePage__pagination" ref={refPagination}>
                    </div>
                </div>
            </div>
            <div class="templatePage__footer">
                <div class="btn__confirm" onClick={onConfirm}>
                    <img src='https://d1xzlli46wohoc.cloudfront.net/assets/images/btn-next.png' />
                </div>
            </div>
        </div>
    );
}