import React from 'react';
import IDUtil from '../../util/IDUtil';
import ElasticsearchDataUtil from '../../util/ElasticsearchDataUtil';

class KeywordTermLimitSelector extends React.Component {

    constructor(props) {
        super(props);
		this.state = {
			termLimit : Math.min(this.props.termLimit ? this.props.termLimit : 20, this.props.dataLimit ? this.props.dataLimit : 20)
		};

        this.CLASS_PREFIX = 'kfs';
    }

    //only update on a new search or a new term limit
    shouldComponentUpdate(nextProps, nextState) {
        return (nextProps.searchId != this.props.searchId)
        || (nextProps.termLimit != this.props.termLimit);
    }

	onOutput(data) {
        if (this.props.onOutput) {
            this.props.onOutput(this.constructor.name, data);
        }
	}


	limitChanged(e) {
	    let data = null;

        data = {
            termLimit: e.target.value
        }
		this.setState({termLimit : e.target.value});

        this.onOutput(data);
        }

  render() {

   //if less data available than the termlimit, reduce the term limit
  this.state.termLimit = Math.min(this.props.termLimit ? this.props.termLimit : 20, this.props.dataLimit ? this.props.dataLimit : 20);
        return (
                <div className={IDUtil.cssClassName('keyword-limit', this.CLASS_PREFIX)}>
                        <label className={IDUtil.cssClassName('ms_label', this.CLASS_PREFIX)} htmlFor="term-limit">Max keyword values to display:</label>
                        <input className={"form-control "+ IDUtil.cssClassName('ms_input', this.CLASS_PREFIX)} id="term-limit" type="number" min="1" max="50" step="1" value={this.state.termLimit} onChange={(e) => {this.limitChanged(e)}}/>
                </div>
        );
    }
}


export default KeywordTermLimitSelector;