import React from 'react'
import styled from 'styled-components'
import {Button, Popover} from 'antd'
import ViewSwitcher from './ViewSwitcher'
import JumpControls from './JumpControls'

const ControlsContanter = styled.div`
    display: inline-flex;
    justify-content: space-between;
    width: 500px;
`
export default function BookCoponentsController(props: any) {
    const {onPrevClick, prevDisable, onNextClick, nextDisable, ...restProps} = props

    return (
        <ControlsContanter>
            <Button
                onClick={()=>{
                    onPrevClick()
                }}
                disabled={prevDisable}
            >
                Previous
            </Button>
            <Button 
                onClick={()=>{
                    onNextClick()
                }}
                disabled={nextDisable}
            >
                Next
            </Button>
            
            
            <Popover
                trigger="click" 
                content={<JumpControls {...restProps}/>}>
                <Button>
                    Jump
                </Button>
            </Popover>

            <ViewSwitcher {...restProps}/>
            
        </ControlsContanter>            
    )
}