import React from 'react';


export default class Draggable extends React.Component {
    constructor(){
        super();
        this._timer ;
    }
    componentDidMount() {
        let $this = $(this.refs._container)
        let handle = $this.find(this.props.handle)
        let isDrag = false;
        // let _timer = 
        handle.mousedown((e1) => {
            clearTimeout(this._timer)
           
            let startX = e1.clientX;
            let startY = e1.clientY;
            let offset = $this.offset();
          //  isDrag = false;
           // $this.css({ position: 'fixed', ...offset, width: $this.width(), height: $this.height() });
            this.props.onStart && this.props.onStart(e1, { $target: $this }, { position: 'fixed', ...offset, width: $this.width(), height: $this.height() });
           // this._timer = setTimeout(()=>{
            $(document).mousemove((e) => {

                let offsetX = e.clientX - startX;
                let offsetY = e.clientY - startY;
                // isDrag = true;
                if (this.props.axis == 'x') {
                    //  let offsetX = e.clientX - startX;
                    $this.css({ left: offset.left + offsetX });
                } else if (this.props.axis == 'y') {
                    //  let offsetY = e.clientY - startY;
                    $this.css({ top: offset.top + offsetY });
                } else {
                    // let offsetX = e.clientX - startX;
                    // let offsetY = e.clientY - startY;
                    $this.css({ left: offset.left + offsetX, top: offset.top + offsetY, zIndex: 9999 });
                }
                this.props.onDrag && this.props.onDrag({ target: this.refs._container });
            }).mouseup(() => {
                $(document).unbind('mousemove');
                $(document).unbind('mouseup');
                this.props.onStop && this.props.onStop({ target: this.refs._container });
                $this.removeAttr("style");
                return false;
            })
        //    },200)
               
             //if (!isDrag) {
               // this.props.onClick && this.props.onClick({ target: this.refs._container });
              //  return false;
           // } else {
            //    return false;
           // } 

        });
    }
    render() {
        return (
            <div ref="_container"
                {...this.props}
                id={this.props.id}
                className={`${this.props.defaultClassName} ${this.props.className}`}>
                {this.props.children}
            </div>
        )
    }
}