import React from 'react'
import {Transition, animated} from 'react-spring/renderprops'
import styled, { } from 'styled-components'

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:number | string, height: number| string}>`
    width: ${props=> props.width? props.width: '100%'};
    height: ${props=> props.height? props.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, width, height} = props
    return <StyledImage src={src} width={width} height={height}/>
}


function BookComponent(props: any) {
    const {src, currIndex, flagToReverse} = props    
    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,
                                    }}>
                                    {React.createElement(()=><PageComponent src={src[currIndex]? src[currIndex].src: null}/>)}
                                </animated.div>
                            )
                        }
                    }
                </Transition>
            </PageContainer>
        </ComponentContainer>
    )
}

export {ComponentContainer, PageContainer, PageComponent, BookComponent as default }