import React, { useState, useEffect } from 'react';
import { fetchMessages } from './services';
import errorMessages from './errorMessages';

const RefreshMessages = ({ user }) => {
    // This state is all local to the component
    const [error, setError] = useState('');
    const [currentMessages, setCurrentMessages] = useState([]);

    useEffect(() => {
        //setInterval(() => {
        console.log('call to refresh messages:');
        console.log(user);
        setError('');
        // start service call
        fetchMessages()
            .then((messages) => {
                setCurrentMessages(messages);
                console.log("Refresh messages");
                console.log(messages);
                // onMessage(true, messages);
            })
            .catch((err) => {
                setError(errorMessages[err.code || 'DEFAULT']);
                if (err.code === errorMessages.USER_NOTFOUND || err.code === errorMessages.USER_UNAUTHORIZED) {
                    //onMessage(false, []);
                }
            });
        //}, 500);
    }, []);

    return (
        <div className="CurrentMessages">
            <p className="error">{error}</p>
            <h2>Messages:</h2>
            <ul className="Messages">

                {currentMessages.map(message =>
                    <p><b>User:</b> {message.username}, <b>Message:</b> {message.text}, <b>Time:</b> {message.timestamp}</p>
                )}
            </ul>
        </div >
    );
};

export default RefreshMessages;