import React, { Component, PropTypes } from 'react';

class ResizableTextArea extends Component {
    constructor(props) {
        super(props);

        this._lastY = 0;
        this._lastX = 0;
        this._textAreaHeight = 0;
        this._textAreaWidth = 0;

        this._onEnableDrag = this._onEnableDrag.bind(this);
        this._onDisableDrag = this._onDisableDrag.bind(this);
        this._onMouseMove = this._onMouseMove.bind(this);
    }

    componentDidMount() {
        this._dragger.addEventListener('mousedown', this._onEnableDrag);
    }

    componentWillUnmount() {
        this._dragger.removeEventListener('mousedown', this._onEnableDrag);
        this._removeEventListeners();
    }

    getTextarea() {
        return this._textArea;
    }

    _onEnableDrag(e) {
        document.addEventListener('mousemove', this._onMouseMove);
        document.addEventListener('mouseup', this._onDisableDrag);

        this._prevTextAreaStyleBackgroundColor = this._textArea.style.backgroundColor;
        this._textArea.style.backgroundColor = 'transparent';

        this._lastY = e.clientY;
        this._lastX = e.clientX;
        this._textAreaHeight = this._textArea.offsetHeight;
        this._textAreaWidth = this._textArea.offsetWidth;

        // this prevents scrolling while dragging the textarea
        e.preventDefault();
    }

    _onDisableDrag() {
        this._removeEventListeners();

        this._textArea.style.backgroundColor = this._prevTextAreaStyleBackgroundColor;
        // remove selection, which can be a site effect when hovering over the text
        window.getSelection().removeAllRanges();
    }

    _removeEventListeners() {
        document.removeEventListener('mousemove', this._onMouseMove);
        document.removeEventListener('mouseup', this._onDisableDrag);
        if (this._scrollableContainer) {
            this._scrollableContainer.removeEventListener('mousedown', this._onPreventMouseDownOnScrollableParent);
        }
    }

    _onMouseMove(e) {
        if (this.props.directions.indexOf('y') !== -1) {
            const yMovement = e.clientY - this._lastY;
            this._textAreaHeight = Math.max(this._textAreaHeight + yMovement, 30);
            this._textArea.style.height = this._textAreaHeight + 'px';
        }

        if (this.props.directions.indexOf('x') !== -1) {
            const xMovement = e.clientX - this._lastX;
            this._textAreaWidth = Math.max(this._textAreaWidth + xMovement, 100);
            this._textArea.style.width = this._textAreaWidth + 'px';
        }

        this._lastX = e.clientX;
        this._lastY = e.clientY;
    }

    render() {
        const props = {};

        Object.keys(this.props).forEach((k) => {
            props[k] = this.props[k];
        });

        props.className = `resizable-textarea ${this.props.className}`;
        props.ref = t => this._textArea = t;

        delete props.directions;

        const draggerClassNames = `resizable-textarea-dragger direction-${this.props.directions}`;

        return (
            React.createElement('div', { className: 'resizable-textarea-container', ref: c => this._container = c },
                React.createElement('textarea', props),
                React.createElement('div', { className: draggerClassNames, ref: d => this._dragger = d })
            ));
    }
}

ResizableTextArea.propTypes = {
    directions: PropTypes.string,
    className: PropTypes.string
};

ResizableTextArea.defaultProps = {
    directions: 'y',
    className: ''
};

export default ResizableTextArea;


@@ -479,32 +479,332 @@
 ntDidMount() %7B%0D%0A
+        if (this._textArea.offsetHeight %3C this.props.minHeight) %7B%0D%0A            this._textArea.style.height = this.props.minHeight + 'px';%0D%0A        %7D%0D%0A%0D%0A        if (this._textArea.offsetWidth %3C this.props.minWidth) %7B%0D%0A            this._textArea.style.width = this.props.minWidth + 'px';%0D%0A        %7D%0D%0A%0D%0A
         this._dr
@@ -857,24 +857,24 @@
 ableDrag);%0D%0A
-
     %7D%0D%0A%0D%0A   
@@ -2562,10 +2562,28 @@
 nt, 
-30
+this.props.minHeight
 );%0D%0A
@@ -2861,11 +2861,27 @@
 nt, 
-100
+this.props.minWidth
 );%0D%0A
@@ -3343,16 +3343,81 @@
 ctions;%0D
+%0A        delete props.minWidth;%0D%0A        delete props.minHeight;%0D
 %0A%0D%0A     
@@ -3941,16 +3941,83 @@
 s.string
+,%0D%0A    minWidth: PropTypes.number,%0D%0A    minHeight: PropTypes.number
 %0D%0A%7D;%0D%0A%0D%0A
@@ -4074,16 +4074,16 @@
 : 'y',%0D%0A
-
     clas
@@ -4091,16 +4091,56 @@
 Name: ''
+,%0D%0A    minWidth: 100,%0D%0A    minHeight: 30
 %0D%0A%7D;%0D%0A%0D%0A

set minWidth/Height on mount