import React, {useState, useEffect} from 'react'
import {Transition, animated} from 'react-spring/renderprops'
import {ComponentContainer, PageComponent, PageContainer} from './OnePageView'
import { IBookContext } from './BookComponent'

export default function TwoPagesView(props: any) {
    let {src, currIndex, flagToReverse} = props
    const [pagesToshow, setPagesToShow] = useState<IBookContext[]>([])
    
    useEffect(()=>{
        const shouldShowPage = (pageIndex: number)=>{
            return src.length > 0 && pageIndex <= src.length - 1
        }

        const newCurrIndex = currIndex % 2 === 0 ? currIndex: currIndex - 1

        const shouldShowFirstPage = shouldShowPage(newCurrIndex)
        if(shouldShowFirstPage){
            const shouldShowSecondPage = shouldShowPage(newCurrIndex + 1)
            setPagesToShow([
                src[newCurrIndex], 
                shouldShowSecondPage? src[newCurrIndex + 1]: {
                        src: '',
                        alt: '',
                        thumbnail: '',
                    }
            ])
        }
    }, [currIndex, src])

    return (
        <ComponentContainer>
            <PageContainer>
                <Transition
                    reset
                    unique
                    items={pagesToshow}
                    keys={(item: any)=> item.src}
                    initial={{}}
                    from={{opacity: 1, transform: flagToReverse? "translate3d(-50%, 0, 0)": "translate3d(100%, 0, 0)"}}
                    enter={{ opacity: 1, transform: "translate3d(0%, 0, 0)" }}
                    leave={{ opacity: 0, transform: flagToReverse? "translate3d(100%, 0, 0)": "translate3d(-50%, 0, 0)"}}
                >
                    {
                        currIndex=> style=>{
                            return(
                                <animated.div style={{
                                    ...style,
                                    }}>
                                    {React.createElement(()=>{
                                        return <PageComponent width={"50%"} src={pagesToshow[0]? pagesToshow[0].src: null}/>
                                    })}
                                </animated.div>
                            )
                        }
                    }
                </Transition>

                <Transition
                    reset
                    unique
                    items={pagesToshow}
                    keys={(item: any)=> item.src}
                    from={{opacity: 1, transform: flagToReverse? "translate3d(0%, 0, 0)": "translate3d(150%, 0, 0)"}}
                    enter={{ opacity: 1, transform: "translate3d(50%, 0, 0)" }}
                    leave={{ opacity: 0, transform: flagToReverse? "translate3d(150%, 0, 0)": "translate3d(0%, 0, 0)"}}
                    initial={{}}
                >
                    {
                        currIndex=> style=>{
                            return(
                                <animated.div style={{
                                    ...style,
                                    }}>
                                    {React.createElement(()=>{
                                        return <PageComponent width={"50%"} src={pagesToshow[1]? pagesToshow[1].src: null}/>
                                    })}
                                </animated.div>
                            )
                        }
                    }
                </Transition>
            </PageContainer>
        </ComponentContainer>
    )
}

interface Book {
    name: string
}