import React, { useEffect } from 'react';
import { MessageList } from '../components/message-list';
import { connect } from 'react-redux';
import { removeOldestMessage } from '../actions/message.actions';

export default function Page({ title, messages, dispatch, children }) {
    useEffect(() => {
        document.title = title ? `${title } - PleaseWait` : 'PleaseWait';
    });

    useEffect(() => {
        if (!Array.isArray(messages) || messages.length === 0) return;

        let timeoutId = setTimeout(() => {
            dispatch(removeOldestMessage());
        }, 5000);

        return () => clearTimeout(timeoutId);
    }, [messages]);

    return (
        <div className="container">
            <MessageList messages={messages} />
            { children }
        </div>
    );
}

function mapStateToProps(state) {
    return { messages: state.messages.sortedByTimestamp };
}

export const ConnectedPage = connect(mapStateToProps)(Page);