import React from 'react';

export default class cajaTRexto 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, 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 stiloEx = { display: (labelEx != undefined) ? 'unset' : 'none' };
        const colEx = (labelEx != undefined) ? ((labelEx.trim().length > 0) ? 10 : 12) : 12;
        const styleInput ={textAlign: (align == undefined) ? 'left': align};
        const _Placeholder = (attributes.placeholder != undefined) ? attributes.placeholder : '';
        return (
            <div className={"col-sm-" + col + " col-md-" + col} style={stilo}>
                <div className="form-group">
                    <label htmlFor={id}>{label}</label>
                    <div className="row">
                        <div className={"col-sm-" + colEx + " col-md-" + colEx}>
                            <input type={type} 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} style={styleInput} placeholder ={_Placeholder}/>
                        </div>
                        <div className="col-xs-2 col-sm-2 col-md-2 col-lg-2" style={stiloEx}>
                            <label htmlFor={id}>{labelEx}</label>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}