// ./widgets/ResizeblePanelWidget.js
import React, {Component, PropTypes} from 'react';
import '../helpers/number';


export default class ResizeblePanelWidget extends Component {

  constructor(props) {
    super(props);
    this.handleResize = this.handleResize.bind(this);
    this.handleResizeStart = this.handleResizeStart.bind(this);
    this.handleResizeEnd = this.handleResizeEnd.bind(this);
    this.type = 'horizontal';
    this.resizeRange = [20, 60];
    this.state = {
      size: 20
    }
  }

  handleResize(event) {
    event.preventDefault();

    if (this.props.type === 'horizontal') {
      this.setState({size: (100 * event.clientX / document.body.clientWidth).between(this.resizeRange)});
    } else if (this.props.type === 'vertical') {
      this.setState({size: (100 * event.clientY / document.body.clientHeight).between(this.resizeRange)});
    }
  }

  handleResizeStart(event) {
    if (event.button === 0) {
      event.preventDefault();

      document.addEventListener('mousemove', this.handleResize);
      document.addEventListener('mouseup', this.handleResizeEnd);

      console.log('addEventListener handleResize onMouseMove');
    }
  }

  handleResizeEnd(event) {
    if (event.button === 0) {
      event.preventDefault();

      document.removeEventListener('mousemove', this.handleResize);
      document.removeEventListener('mouseup', this.handleResizeEnd);

      console.log('removeEventListener handleResize onMouseMove');
    }
  }

  render() {
    let delimiterPos;
    let sizeFirst;
    let sizeSecond;

    if (this.props.type === 'horizontal') {
      delimiterPos = {left: this.state.size + '%'};
      sizeFirst = {width: this.state.size + '%'};
      sizeSecond = {width: (100 - this.state.size) + '%'};
    } else if (this.props.type === 'vertical') {
      delimiterPos = {top: this.state.size + '%'};
      sizeFirst = {height: this.state.size + '%'};
      sizeSecond = {height: (100 - this.state.size) + '%'};
    }

    return (
      <div className={"resizeble-panel " + this.props.type}>
        <div style={sizeFirst}>{this.props.firstPanel}</div>
        <div style={sizeSecond}>{this.props.secondPanel}</div>
        <div onMouseDown={this.handleResizeStart} style={delimiterPos}></div>
      </div>
    );
  }
}


// ./components/Main.js
import React, {Component, PropTypes} from 'react';
import ResizeblePanel from '../widgets/ResizeblePanelWidget';
import '../helpers/number';


export default class Main extends Component {

  render() {
    return (
      <ResizeblePanel type="horizontal"
                      firstPanel={<b>123</b>}
                      secondPanel={<ResizeblePanel type="vertical"
                                                   firstPanel={<b>321.123</b>}
                                                   secondPanel={<b>321.321</b>}
                      />}
      />
    );
  }
}