import React from 'react';

export default class textArea 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();
    }

    render() {
        const { id, label, type, value, col, attributes, onChangeInput, accion, onKeyPress, rows, resize } = 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 _resize = (resize != undefined ? resize : '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>                    
                    <textarea  name={name} className="form-control" style={{resize: _resize}} onChange={onChangeInput} name={id} id={id} ref={id} maxLength={maxLength} {...readOnlyAttr} {...keyPressAttr} value={value} min={min} max={max}  rows={rows} {... {resize: 'none'}}/>                    
                </div>
            </div>
        )
    }
}