import React from 'react';
import ReactDOM from 'react-dom';
import {autobind, debounce} from 'core-decorators';

import {modifyObjValues} from './utils';

class ScrollBar extends React.Component {

  constructor(props){
    super(props);

    let {scrollTop, scrollHeight, offsetHeight, scrollLeft, scrollWidth, offsetWidth, type, minScrollSize} = props;

    if (type === 'vertical') {
      let height = offsetHeight * offsetHeight/scrollHeight;
      if (height < minScrollSize) {
        height = minScrollSize;
      }

      let marginTop = scrollTop * (offsetHeight - height)/(scrollHeight - offsetHeight);

      this.state = {
          isDragging: false,
          lastClientPosition: 0,
          height,
          marginTop
      }

      this.handleMouseMove = this.handleMouseMoveForVertical;
    } else {


      this.handleMouseMove = this.handleMouseMoveForHorizontal;
    }
  }

  componentDidMount(){
    if (this.props.ownerDocument) {
      this.props.ownerDocument.addEventListener("mousemove", this.handleMouseMove);
      this.props.ownerDocument.addEventListener("mouseup", this.handleMouseUp);
    } 
  }

  componentWillUnmount(){
    if (this.props.ownerDocument) {
      this.props.ownerDocument.removeEventListener("mousemove", this.handleMouseMove);
      this.props.ownerDocument.removeEventListener("mouseup", this.handleMouseUp);
    }
  }

  componentWillReceiveProps(nextProps) {
    let {scrollTop, scrollHeight, offsetHeight, scrollLeft, scrollWidth, offsetWidth, type, minScrollSize} = nextProps;

    this.mapToScrollBar(nextProps);
        
  }

  componentDidUpdate() {
    //console.log('componentDidUpdate');
  }

  @autobind
  handleScrollBarContainerClick() {
    console.log('handleScrollBarContainerClick');
  }

  @autobind
  handleMouseMoveForHorizontal(e){
    
  }

  @autobind
  handleMouseMoveForVertical(e){
    let {scrollTop, scrollHeight, offsetHeight, scrollLeft, scrollWidth, offsetWidth, type, minScrollSize} = this.props;
    let {height, marginTop} = this.state;
            
    if(this.state.isDragging){
        e.preventDefault();


        var scroller = ReactDOM.findDOMNode(this.refs.scroller);
        var scrollerRect = scroller.getBoundingClientRect();
        var scrollerOffsetTop = scrollerRect.top;
        var scrollerOffsetHeight = scrollerRect.height;
        
       
        var pos = (e.pageY - scrollerOffsetTop) / scrollerOffsetHeight;

        var resTop = pos * scrollHeight  - this.handlerPositionTop;
        
        this.props.mapToScrollBarVertical(resTop);
    }
  }

  mapToScrollBar(props) {
    let {scrollTop, scrollHeight, offsetHeight, scrollLeft, scrollWidth, offsetWidth, type, minScrollSize} = props;

    var scroller = ReactDOM.findDOMNode(this.refs.scroller);
    var scrollerHeight = scroller.getBoundingClientRect().height;
    if (type === 'vertical') {
      let height = offsetHeight * offsetHeight/scrollHeight ;
      if (height < minScrollSize) {
        height = minScrollSize;
      }

      let marginTop = scrollTop * (scrollerHeight - height)/(scrollHeight - offsetHeight);

      this.setState({
          height,
          marginTop
      })
    } else {

    }
  }

  calculatorDelta(delta) {
    let {scrollTop, scrollHeight, offsetHeight, scrollLeft, scrollWidth, offsetWidth, type, minScrollSize} = this.props;
    let {height} = this.state;
    if (type === 'vertical') {
      return delta*(scrollHeight - offsetHeight)/ (offsetHeight - height);
    } else {

    }
  }

  @autobind
  handleMouseDown(e){
    e.preventDefault();
    e.stopPropagation();

    this.setState({isDragging: true});
    
    var handler = ReactDOM.findDOMNode(this.refs.handler);
    var handlerOffsetTop = handler.getBoundingClientRect().top;
    this.handlerPositionTop = e.pageY + (window.scrollY || document.documentElement.scrollTop) - handlerOffsetTop;
  }

  @autobind
  handleMouseUp(e){
    e.preventDefault();
    this.setState({isDragging: false });
  }

  isVertical(){
    return this.props.type === 'vertical';
  }

  render() {
    let {children} = this.props;
    let {height, marginTop}  = this.state;

    let style = {
      height,
      marginTop
    }

    return (
      <div className={`scroll-area-track`} onMouseDown={this.handleScrollBarContainerClick} ref="scroller">
        <div className={`scroll-area-gripper`} style={style} onMouseDown={this.handleMouseDown} ref="handler">
        </div> 
      </div> 
    );
  }


  smoothScroll() {

  }
}



export default ScrollBar;