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

/**
 * A stateless input field for mobile and desktop. 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. Accepts isMobile prop to render mobile variant of text box.
 */
const InputText = (props) => {
    
    const inputProps = {...props};
    delete inputProps.isMobile;
    delete inputProps.children;
    delete inputProps.parentClassName;
    if(props.isMobile) {
        delete inputProps.placeholder;
    }

    const autoComplete = props.type === 'password' ? 'new-password' : 'off';

    return ( props.isMobile ? 
        <div className={`jp-input-text-mobile-container ${props.parentClassName}`}>
            <label id={props.id+'Label'} htmlFor={props.id}>
                {props.label}
                <input {...inputProps} autoComplete={autoComplete}/>   
            </label>
        </div>
        :
        <div className={`jp-input-text-container ${props.parentClassName}`}>
            <label id={props.id+'Label'} htmlFor={props.id}>
                {props.label}
                <input {...inputProps} autoComplete={autoComplete}/>   
            </label> 
        </div>
    );
};

export default InputText;

InputText.propTypes = {
    
    /** Unique ID for the field. Required for web accessibility */
    id: PropTypes.string.isRequired,
    /** Type of the input field. Allowed types: text, number, tel, email, password */
    type: PropTypes.oneOf(['text', 'number', 'tel', 'email', 'password']),
    /** Set this prop to true to render input text mobile */
    isMobile: PropTypes.bool,
    /** Label for the field */
    label: PropTypes.string,
    /** Class applied to parent container for additional styling  */
    parentClassName: PropTypes.string,
};

InputText.defaultProps = {
    type: 'text',
    isMobile: false,
    parentClassName: ''
};