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

import { getChats } from '../api'


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

/**
 *
 */
export default function Contacts() {
    const [pms, setPms] = useState([])
    useEffect(() => {
        getChats()
            .then(response => {
                setPms(response.data.pms)
            }).catch(console.log)
    }, [])
    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 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)'
}