import React from 'react';
import PropTypes from 'prop-types';

/**
 * A stateless input field for mobile. It can be of type: text, number, tel, email or password. Label field will get the id of the input field along with "Label" string appended to it. Input field will receive all additional props.
 */
const InputTextMobile = (props) => {
    
    let inputProps = {...props};
    delete inputProps.placeholder;

    return (
        <div className="jp-input-text-mobile-container">
            <label id={props.id+'Label'} htmlFor={props.id}>
                {props.placeholder}
                <input {...inputProps} autoComplete={props.type === 'password' ? 'new-password' : 'off'}/>   
            </label>      
        </div>
    );
};

export default InputTextMobile;

InputTextMobile.propTypes = {
    
    /** Unique ID for the field */
    id: PropTypes.string.isRequired,
    /** Placeholder text which will be added to the label */
    placeholder: PropTypes.string.isRequired,
    /** Type of the input field. Allowed types: text, number, tel, email, password */
    type: PropTypes.oneOf(['text', 'number', 'tel', 'email', 'password'])
};

InputTextMobile.defaultProps = {
    type: 'text'
};