import React from 'react';
import { LabelWrapper, WarningWrapper, InputWrapper } from '../StyledWrappers';
import { TextAreaFieldWrapper } from './StyledWrappers';
import {Row} from '../../baseComponents';
import Tooltip from '../../Tooltip/Tooltip';

class SimpleTextArea extends React.Component {
	static get propTypes() {
        return {
            label: React.PropTypes.string.isRequired,
            warning: React.PropTypes.string,
            showWarning: React.PropTypes.bool,
            placeholder: React.PropTypes.string,
            isRequired: React.PropTypes.bool,
            disabled: React.PropTypes.bool,
            error: React.PropTypes.bool,
            allowValueUpdate: React.PropTypes.bool,
            onChange: React.PropTypes.func,
            className: React.PropTypes.string,
            labelClassName: React.PropTypes.string,
            inputWrapperClassName: React.PropTypes.string,
            warningClassName: React.PropTypes.string,
            onError: React.PropTypes.func
        };
    }

    validate = () => {
    	let validate = this.regexValidate(this.state.value) && (!this.props.isRequired || (this.props.isRequired &&this.state.value));
    	if(!validate) {
    		this.setState({warning: 'Please enter valid value', error: true});
    	}
    	return validate;
    }

	constructor(props) {
		super(props);
		this.state = {
			value: props.value,
			error: props.error,
			warning: props.warning
		}
		this.handleOnChange = this.handleOnChange.bind(this);
	}	

	regexValidate = (value) => {
		return this.props.validationRegex && value ? RegExp(this.props.validationRegex).test(value) : true;	
	}

	componentWillReceiveProps(nextProps) {
		if(this.props.allowValueUpdate && this.state.value !== nextProps.value) {
			this.setState({ value: nextProps.value });
		}
		if(this.state.error !== nextProps.error) {
			this.setState({ error: nextProps.error });
		}
		if(this.state.warning !== nextProps.warning) {
			this.setState({ warning: nextProps.warning });
		}
	}

	handleOnChange = (event) => {
		var value = event.target.value;
		var error = false;
		if(!this.regexValidate(value)){
			error = true;
		}
		this.setState({	value, error }, () => {
			if(this.props.onChange) {
				this.props.onChange(value);
			}
			if(this.state.error && this.props.onError) {
				this.props.onError();
			}
		});
	}

	handleClear = () => {
		this.setState({	value: "", error: false }, () => {
			if(this.props.onChange) {
				this.props.onChange(this.state.value);
			}
		});
	}

	render() {
		const { textAreaStyles } = this.props;
		return(
			<TextAreaFieldWrapper className={this.props.className}>
				<Row center space>
					{this.props.label && <LabelWrapper className={this.props.labelClassName}>{`${this.props.label}${this.props.isRequired ? ' *' : ''}`}</LabelWrapper>}
					{this.props.showCount ? <div className="count">{this.state.value ? this.state.value.length : 0}</div> : null}
				</Row>
				<Row center>
					<InputWrapper title={this.state.value} className={`textarea-field ${this.state.error ? 'show-error' :''} ${this.props.inputWrapperClassName}`}>
						<textarea
							style = {textAreaStyles}
							value={this.state.value}
							onChange={this.handleOnChange}
							disabled={this.props.disabled}
							placeholder={this.props.placeholder}
							className={this.state.error ? 'error':''}						
						/>
						{
							this.state.value && this.props.showClear && !this.props.disabled ? <i onClick={this.handleClear} className="material-icons clear-icon">clear</i>  : null
						}
					</InputWrapper>
					{
						this.props.helpText && <Tooltip
							hoverElement={<i className="material-icons info">info</i>}
							tooltipText={this.props.helpText}
						/>
					}
				</Row>
				{this.state.warning && this.props.showWarning && <WarningWrapper className={this.props.warningClassName}>{this.state.warning}</WarningWrapper>}
			</TextAreaFieldWrapper>
		)
	}
}

export default SimpleTextArea;