import { useEffect, useState } from 'react';
import { Helmet } from 'react-helmet';

import { getChats } from '../api';


import Contact from './Contact.js';
import { ChatSpinner } from './Spinner';

/**
 *
 */
export default function Contacts(props) {
    const [pms, setPms] = useState([]);
    useEffect(() => {
        getChats()
            .then(response => {
                setPms(response.data.pms);
            });
    }, []);
    return (
        <div className="msg-cont">
            <Helmet>
                <title>Messages</title>
            </Helmet>
            <div style={chatListStyle}>
                {
                    pms.length ? pms.map((chat) =>
                        <Contact key={chat.uname} user={chat} style={chatTitleStyle} />
                    ) : <><ChatSpinner /><ChatSpinner /><ChatSpinner /><ChatSpinner /><ChatSpinner /></>
                }
            </div>
        </div>
    );
}

const wrapperStyle = {
    display: 'flex',
    backgroundColor: '#fff'
};

const chatListStyle = {
    display: 'flex',
    flexDirection: 'column',
    width: '100%',
    padding: '12px'
};

const chatTitleStyle = {
    width: '100%',
    padding: '12px',
    textAlign: 'left',
    background: 'var(--main-background-color)',
    color: 'var(--text-color)',
    borderBottom: '1px solid var(--border-color)'
};