class WdeScrollBar{
    // max = 0
    // isDragged = false
    /**
    * @param {HTMLElement} handler
    */
    constructor(handler){
        console.log( handler.clientHeight)
        let max = handler.parentElement.clientHeight - handler.clientHeight
        let yOffset = null
        let yPosInit = 0
        handler.addEventListener('mousedown', (event) => {
            // yOffset = event.offsetY
            yPosInit = event.clientY - Number(handler.style.top.replace('px','' ))

            

            // console.log()
            document.addEventListener('mousemove', drag);
            document.addEventListener('mouseup', stop)
            //TODO Document dissallow select
        })

        function drag() {

            console.log(event.clientY - yPosInit,  Number(handler.style.top.replace('px','' )))

            let pos = event.clientY - yPosInit
            let clampPos = Math.min(Math.max(pos, 0), max)
            handler.style.top = clampPos + "px";


            // let yPos = Number(handler.style.top.replace('px', 0))
            // console.log(event)
            // console.log(yOffset)
            // console.log(event.movementY)

            // let pos = event.clientY - handler.clientHeight
            
            
            // console.log(pos)
            // let pos2 = yPos + event.movementY
            // console.log(event.clientY - yPosInit)
            // console.log(event.offsetY)
            // yPos += event.yOffset
            // handler.style.top = event.clientY - yPosInit + 'px'
            // console.log(handler.Y)
            // let pos =  yPosInit - event.clientY
            // let newPos = Math.min(Math.max(pos, 0), max)
            // console.log(handler.style.top , event.offsetY)
            // handler.style.top = event.clientY+ "px";
        }

        function stop() {
            console.log("stop")
            document.removeEventListener('mousemove', drag);
            document.removeEventListener('mouseup', stop)
        }
    }
    // /**
    // * @param {HTMLElement} element
    // */
    // BindHandler(element) {
    //     element.addEventListener('mousedown', (event) => {
    //         this.isDragged = 
    //         element.addEventListener('mouseup', this.stop);
    //     });
    //     element.removeEventListener
    // }

    // drag(){

    // }
    // stop(doc){
    //     console.log("stop")
    //     doc.removeEventListener('mouseup', (event) => {
    //             this.stop(document)
    //         });
    // }
    // MoveHandler(param) {
    //     console.log("Move")
    // }
}