import React from 'react';

export default class cajaTextoBusqueda 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, onClick,onBlur } = 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' };
        const onblur = onBlur != undefined ? onBlur : ()=>{};
        const stiloDiv = attributes.readOnlyBoton == undefined ? {} : ( attributes.readOnlyBoton ? { 'pointer-events': 'none' } : {});
        return (
            <div className={"col-xs-12 col-sm-" + col + " col-md-" + col + " col-lg-" + col} style={stilo}>
                <div className="form-group">
                    <label htmlFor={id}>{label}</label>
                    <div className="row">
                        <div className="col-xs-11 col-sm-11 col-md-11 col-lg-11 search-div">
                            <input type={type} className="form-control" onChange={onChangeInput} name={id} id={id} ref={id} maxLength={maxLength}  {...readOnlyAttr} {...keyPressAttr} value={value} min={min} max={max} onFocus={this.handleFocus} onBlur={onblur}/>
                        </div>
                        <div className="col-xs-1 col-sm-1 col-md-1 col-lg-1 search-div-bn" style={stiloDiv} >                        
                            <a className="button-search" data-toggle="modal" data-target="#buscar-cuenta" onClick={()=>{onClick(id)}}> <i className="fa fa-search"></i></a>
                        </div>
                    </div>
                </div>
            </div>            
        )
    }
}