import React from 'react';
import toastr from 'toastr';
import AutoBind from '../../../containers/UserInfo/Partials/UserInfoView/node_modules/react-autobindiners/UserInfo/Partials/LoginView/node_modules/react-autobind';

class InputNumber extends React.Component {

    constructor() {
        super();
        AutoBind(this);
    }

    onPlus(e){
        var antValue = this.props.value;       
            var newValue = parseInt(antValue) + 1;
            this.setState({ numberValue: newValue });
            const inputEvent = { target: { value: newValue, name: 'boton', id: 'cantidad' } };
            this.props.onChange(inputEvent);
            e.target.blur();
        
    }

    onChange(e) {
        const id = e.target.id;
        const value = e.target.value;
        if (value >= 0) {
            const inputEvent = { target: { value: value, name: id, id: id } };
            this.props.onChange(inputEvent);
        } 
    }

    onClick(e) {
        e.target.select();
        //Descomentar la linea a continuacion si se desea que aparezcan los botones de aplicar y cancelar en lugar
        // de los botones + y -
      //  this.props.onClick({ target: {id:'cantidad'}, currentTarget: e.currentTarget});
    }

    onMinus(e){
      var antValue= this.props.value;
      if (antValue>0){
        var newValue= parseInt(antValue)-1;
        this.setState({numberValue:newValue});
        const inputEvent = {target: { value: newValue, name: 'boton', id:'cantidad' }};
        this.props.onChange(inputEvent);
      }    
      e.target.blur();
    }
    render() { 
        const { title, value, onChange, showApplyOption, onClick, esNuevoDetalle} = this.props;
        return (
            <div className="quantity">
                {showApplyOption ? <button id='btnCancel' ref='btnCancel' className="cancel" onClick={onClick}><i className="fa fa-times" aria-hidden="true"></i></button>
                    : <button id='btnMinus' ref='btnMinus' className="less" onClick={this.onMinus.bind(this)}>-</button>}
                <input id='cantidad' ref='cantidad' type="number" name="cantidad" value={value} onChange={this.onChange} onClick={this.onClick}/>          
                {showApplyOption ?
                    <button id='btnApply' ref='btnApply' className="apply" onClick={onClick}><i className="fa fa-check" aria-hidden="true"></i></button>
                    : <button id='btnPlus' ref='btnPlus' className="plus" onClick={this.onPlus.bind(this)}>+</button>   }
                    </div>
        )
    }
};
export default InputNumber;