import React from 'react';
import { InputFieldWrapper } from './StyledWrappers';
import { LabelWrapper, WarningWrapper, InputWrapper } from '../StyledWrappers';
import {debounce} from '../../../UtilitiesFunctions/objectUtilities';
import {Row} from '../../baseComponents';
import Tooltip from '../../Tooltip/Tooltip';
import PropTypes from 'prop-types'
import CircularProgress from 'material-ui/CircularProgress';

export default class InputField extends React.Component {

    validate = () => {
    	return !(this.errorCheck(this.state.value).warning)
    }


	constructor(props) {
		super(props);
		this.state = {
			value: props.value || '',
			warning: ''
		}
	}

	componentWillReceiveProps(nextProps) {
		if(nextProps.value!=undefined && this.state.value !== nextProps.value) {
			this.setState({ value: nextProps.value });
		}
	}

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

	errorCheck = value => {
		let warning = '';
		if(this.props.isRequired && !value){
			warning = 'Please enter a value'
		}
		else if(this.props.type && this.props.type == 'number') {
			if(isNaN(value)) {
				warning = `Please enter valid number`;
			}
			else if(!this.regexValidate(value)) {
				warning = `Please enter valid number`;
			}
			else {
				value = Number(value)
				var min = this.props.minimumValue || 0
				var max = this.props.maximumValue || Number.MAX_VALUE
				if(value < min) {
					warning = `Value cannot be lesser than ${min}`;
				}
				else if(value > max) {
					warning = `Value cannot be more than ${max}`;
				}
			}
		}
		else if(!this.regexValidate(value)){
			warning = `Please enter valid value`;
		}

		this.setState({ warning })
		return { warning }
	}

  getIcon() {
  	if(this.props.showLoader) {
      return <CircularProgress className="icon" size={15} thickness={2} color="rgba(0,0,0,0.7)" />;
    }
    if(this.state.value && this.props.showClear && !this.props.disabled) {
      return <i onClick={this.handleClear} className="material-icons icon">clear</i>;
    }
    if(this.props.showSearch) {
      return <i className="material-icons icon">search</i>;
    }
    return null;
  }

	handleOnChange = (event) => {
		let value = event.target.value;
		var { warning } = this.errorCheck(value)
		this.setState({	value })
		if(this.props.onChange) {
			this.props.onChange(this.props.type == 'number' ? Number(value) : value);
		}
		if(warning && this.props.onError) {
			this.props.onError();
		}
	}

	handleClear = () => {
		this.setState({	value: "", warning: '' })
		if(this.props.onChange) {
			this.props.onChange(this.props.type == 'number' ? 0 : "")
		}
	}

	onFocus = (event) => {
		if(this.props.onFocus) {
			this.props.onFocus(event);
		}
	}

	onBlur = (event) => {
		if(this.props.onBlur) {
			this.props.onBlur();
		}
	}

	render() {
		return(
			<InputFieldWrapper className={this.props.className}>
				<Row center space>
					{this.props.label && <LabelWrapper className={`label ${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={`input-field ${this.state.warning ? 'show-error' :''} ${this.props.inputWrapperClassName}`}>
						<input
							className={`input ${this.state.warning ? 'error' :''}`}
							type={this.props.type||"text"}
							value={this.state.value}
							onChange={this.handleOnChange}
							autoFocus={this.props.autoFocus}
							disabled={this.props.disabled}
							placeholder={this.props.placeholder||''}
							onFocus={this.onFocus}
							onBlur={this.onBlur}
							min={this.props.minimumValue}
							max={this.props.maximumValue}
						/>
						{this.getIcon()}
					</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>}
			</InputFieldWrapper>
		)
	}
}

InputField.PropTypes = {
    label: PropTypes.string,
    type: PropTypes.string,
    isRequired: PropTypes.bool,
    disabled: PropTypes.bool,
    warning: PropTypes.string,
    showWarning: PropTypes.bool,
    placeholder: PropTypes.string,
    value: PropTypes.string,
    autoFocus: PropTypes.bool,
    onChange: PropTypes.func,
    onError: PropTypes.func,
    className: PropTypes.string,
    labelClassName: PropTypes.string,
    inputWrapperClassName: PropTypes.string,
    warningClassName: PropTypes.string,
    minimumValue: PropTypes.number,
    maximumValue: PropTypes.number,
    onFocus: PropTypes.func,
    onBlur: PropTypes.func,
    showSearch: PropTypes.bool,
    showLoader: PropTypes.bool
};
