import React from 'react';

export default class cajaTextoNumero extends React.Component {

    constructor(props) {
        super(props);
    }

    componentDidUpdate = () => {
        this.validarAcciones();
    }

    validarAcciones = () => {
        const { id, accion, attributes } = this.props;
        const component = this.refs[id];
        if (attributes.focus) component.focus();
    }
    handleFocus = (event) => event.target.select();
    render() {
        const { id, label, type, value, col, attributes, onChangeInput, accion, onKeyPress, onBlur, onFocus, onFormatear, labelEx,align } = this.props;
        const readOnlyAttr = attributes.readOnly ? { readOnly: 'readOnly' } : {};
        const keyPressAttr = onKeyPress != undefined ? { onKeyPress: onKeyPress } : {};
        const maxLength = attributes.maxLength != undefined ? attributes.maxLength : '';
        const min = attributes.min != undefined ? attributes.min : '';
        const max = attributes.max != undefined ? attributes.max : '';
        const stilo = { display: !!attributes.hidden ? attributes.hidden : 'unset', float: attributes.float ==undefined ? 'left' : attributes.float };
        const onblur = onBlur != undefined ? onBlur : () => { };
        const onfocus = onFocus != undefined ? onFocus : this.handleFocus;
        const Editando = attributes.Editando != undefined ? attributes.Editando : true;
        const Tipo = 'number';
        const nada = () => { };
        const stiloEx = { display: (labelEx != undefined) ? 'unset' : 'none' };
        const colEx = (labelEx != undefined) ? ((labelEx.trim().length > 0) ? 9 : 12) : 12;
        const styleInput ={textAlign: (align == undefined) ? 'right': align};
        return (

            <div className={"col-sm-" + col + " col-md-" + col} style={stilo}>
                <div className="form-group">
                    <label htmlFor={id}>{label}</label>
                    {/* {Editando ? (
                        <input type="number" className="form-control" onChange={onChangeInput} onBlur={onblur} name={id} id={id} ref={id} maxLength={maxLength} {...readOnlyAttr} {...keyPressAttr} value={value} min={min} max={max} onFocus={this.handleFocus} />
                    ) : (
                        <input type="text" className="form-control" name={id} id={id} ref={id}  value={onFormatear(value)} {...readOnlyAttr} onFocus={onfocus} />
                    )
                    }*/}
                    <div className="row">
                        <div className={"col-sm-" + colEx + " col-md-" + colEx}>
                            <input type={Editando ? "number" : "text"} className="form-control" onChange={onChangeInput} onBlur={Editando ? onblur : nada} onFocus={Editando ? nada : onfocus} name={id} id={id} ref={id} maxLength={maxLength} 
                            {...readOnlyAttr} {...keyPressAttr} value={Editando ? value : onFormatear(value)} min={min} max={max} style={styleInput}/>
                        </div>
                        <div className="col-xs-3 col-sm-3 col-md-3 col-lg-3" style={stiloEx}>
                            <label htmlFor={id}>{labelEx}</label>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}