import React from 'react';
import './text-area.less';

let FieldKit, TextFormatter;

if (typeof document !== 'undefined') {
    FieldKit = require('field-kit/dist/field-kit');
    TextFormatter = FieldKit.Formatter;
}


/**\

    title: TextArea
    category: atom
    description: A textarea with the ability to be bound both ways
    props:
        label[String]: A label to display above the textarea
        blur[Function]: A callback for the blur event
        placeholder[String]:
            Some text to display when the textarea has no value
        altPlaceholder[String]:
            Some text to display when the textarea has no value and has focus.
            If not defined, the placeholder is used
        error[String]: Field specific error text
        value[String]: The value of the textarea
        update[Function]: A callback for the textarea's onChange event
        setFocus[Boolean]: Sets focus on initial render if true
        disabled[Boolean]: Disables the element

\**/
class TextArea extends React.Component {
    state = {
        focused: false
    };

    componentWillReceiveProps(props) {
        /* istanbul ignore else: no one cares */
        if (props.hasOwnProperty('value')) {
            if (!this.state.focused || !this.field.value()) {
                this.field.setValue(props.value);
            }
        }
    }

    componentDidMount() {
        this.field =
            new FieldKit.TextField(this.textarea, new TextFormatter());
        this.field.setValue(this.props.value || '');
        this.field.setDelegate({
            textDidChange: this.update.bind(this),
            textFieldDidEndEditing: this.update.bind(this)
        });

        if (this.props.setFocus) {
            this.textarea.focus();
            this.onFocus();
        }
    }

    update(evt) {
        if (typeof this.props.update === 'function') {
            this.props.update(evt.value());
        }
    }

    onFocus() {
        this.setState({
            focused: true
        });
    }

    onBlur() {
        this.setState({
            focused: false
        });

        if (typeof this.props.blur === 'function') {
            this.props.blur(this);
        }
    }

    render() {
        const { label } = this.props;
        let classer = 'text-area',
            placeholder = this.props.placeholder || '',
            errorTooltip;

        if (this.state.focused && this.props.altPlaceholder) {
            placeholder = this.props.altPlaceholder;
        }

        if (this.props.disabled) {
            classer += ' disabled';
        }

        if (this.props.error) {
            classer += ' has-error';

            if (!this.props.disabled) {
                errorTooltip = (
                    <div className="error-tooltip">
                        { this.props.error }
                    </div>
                );
            }
        }

        return (
            <div className={ classer }>
                <div>
                    { label ? <label>{ this.props.label }</label> : null }
                    <textarea
                        ref={ (c) => (this.textarea = c) }
                        placeholder={ placeholder }
                        defaultValue={ this.props.value }
                        onFocus={ this.onFocus.bind(this) }
                        onBlur={ this.onBlur.bind(this) }
                        disabled={ this.props.disabled } />
                    { errorTooltip }
                </div>
            </div>
        );
    }
}

export default TextArea;
