// @flow
import React, {Component, PropTypes} from 'react';
import '../helpers/number';


export class ResizeblePanel 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);
    }
  }

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

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

  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}>
        {React.cloneElement(this.props.children[0], {size: sizeFirst})}
        {React.cloneElement(this.props.children[1], {size: sizeSecond})}
        <div onMouseDown={this.handleResizeStart} style={delimiterPos}></div>
      </div>
    );
  }
}

ResizeblePanel.propTypes = {
  type: PropTypes.string,
  resizeRange: PropTypes.array
};

export class Panel extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div style={this.props.size}>{this.props.children}</div>
    );
  };
}