
class SelectValue extends React.Component {
    constructor(props) {
        super(props);
        //this.notSelected = "null";
        //this.other = "other";
        this.state = {
            data: (this.props.data) ? this.props.data : "null",
            options:  this.props.options
        }
    };
    changeValue = (e) => {
        var
            valueState = (e.target.name == "main" && (e.target.value == "other")) ? null : e.target.value,
            valueData = (valueState=="null") ? null : valueState;
        this.setState({data: valueState});
        this.props.onChange(valueData);
    };
    eachOption = (item, i) => {
        return (
            <option key={i} value={item}>{item}</option>
        );
    };
    rendNormal = () => {
        return (
            <div>
                <span className="title">{(this.props.title) ? this.props.title : this.props.name}:&nbsp;</span>
                <select className="form-control targets" value={this.state.data} name="main" onChange={this.changeValue}>
                    <option value="null">Выберите значение</option>
                    {this.state.options.map(this.eachOption)}
                    <option value="other">Другой...</option>
                </select>
            </div>
        );    
  
    };
    rendOther = () => {
        return (
            <div>
                <span className="title">{(this.props.title) ? this.props.title : this.props.name}:&nbsp;</span>
                <select className="form-control targets" value={"other"} name="main" onChange={this.changeValue}>
                    <option value="null">Выберите значение</option>
                    {this.state.options.map(this.eachOption)}
                    <option value="other">Другой...</option>
                </select>
                &nbsp;
                <input className="form-control targets" defaultValue={this.state.data} name="other" onChange={this.changeValue} />
            </div>
        );
    };
    render() {
        var isDataInOptions = this.state.options.indexOf(this.state.data)>-1;
        if (isDataInOptions || (this.state.data == "null")) {
            return this.rendNormal ();
        } else {
            return this.rendOther ();
        }
    }
}