import React, {useState, useCallback, useEffect} from 'react'
import {Row, Col, Slider, InputNumber} from 'antd'

const JumpControls = (props: any)=>{
    const {src, currIndex, setBookContextState} = props
    const [inputValue, setInputValue] = useState(currIndex)

    const onChange = useCallback(
        (value) => {
            if(value){
                const newCurrIndex = value -1
                if(newCurrIndex < src.length && newCurrIndex >=0){
                    setBookContextState({
                        currIndex: value - 1,
                        flagToReverse: value < inputValue
                    })
                }                
            }  
        },
        [inputValue])

    useEffect(()=>{
        setInputValue(currIndex + 1)
    }, [currIndex])

    return <Row>
        <Col span={12}>
        <Slider
            min={1}
            max={src.length}
            onChange={onChange}
            value={typeof inputValue === 'number' ? inputValue : 0}
        />
        </Col>
        <Col span={4}>
        <InputNumber
            min={1}
            max={src.length}
            style={{ margin: '0 8px' }}
            value={inputValue}
            onChange={onChange}
        />
        </Col>
    </Row>
}

export default JumpControls