import React, {useState, useCallback, useEffect} from 'react'
import {Transition, animated} from 'react-spring/renderprops'
import styled, { } from 'styled-components'
import BookComponentsController from './BookComponentsController'

const ComponentContainer = styled.div`
    display: flex;
    flex-direction: column;  
    overflowY: hidden;
    align-items: center;
`

const PageContainer = styled.div`
    height: 600px;
    position: relative;
    width: 100%;
    cursor: pointer;
    margin-bottom: 8px;
    overflow-x: hidden;
    & > div {
        will-change: transform, opacity;
        position: absolute;
        width: 100%;
        height: 100%;
    }
`

const StyledImage = styled(animated.div)<{src:string}>`
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: ${props=> `url('${props.src}')`} no-repeat center;
    background-size: contain;
`

const PageComponent = (props: any)=>{
    const {src} = props
    return <StyledImage src={src}/>
}


function BookComponent(props: any) {
    const {src, currIndex, setBookContextState, flagToReverse} = props
    const [prevDisable, setPrevDisable] = useState(true)
    const [nextDisable, setNextDisable] = useState(false)
    
    const changePage = useCallback((indexToGo, goToPrevious)=>{
        const newCurrIndex = currIndex + indexToGo
        setBookContextState({
            currIndex: newCurrIndex,
            flagToReverse: goToPrevious
        })
    
    }, [currIndex])

    useEffect(() => {
        setNextDisable(currIndex >= src.length - 1)
        setPrevDisable(currIndex <= 0)
    }, [currIndex, src])

    return (
        <ComponentContainer>
            <PageContainer>
                <Transition
                    reset
                    unique
                    items={currIndex}
                    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)"}}
                    initial={{}}
                >
                    {
                        currIndex=> style=>{
                            return(
                                <animated.div style={{
                                    ...style,
                                    overflowX: 'hidden'
                                    
                                    }}>
                                    {React.createElement(()=><PageComponent src={src[currIndex]? src[currIndex].src: null}/>)}
                                </animated.div>
                            )
                        }
                    }
                </Transition>
            </PageContainer>

            <BookComponentsController 
                prevDisable={prevDisable} 
                onPrevClick={()=> changePage(-1, true)}
                nextDisable={nextDisable}
                onNextClick={()=>changePage(1, false)}
                {...props}
            />

        </ComponentContainer>
    )
}

export default BookComponent