import { Link } from "react-router-dom"
import ReactTimeAgo from 'react-time-ago'
import TimeAgo from 'javascript-time-ago'
import ru from 'javascript-time-ago/locale/ru.json'
import React from 'react';

TimeAgo.addLocale(ru)

const ChatItem = ({ id, chat }) => {

    return (
        <li className="aside-chat" >
            <Link to={`/chat_id.${id}`}>
                {chat.avatar && <img src={chat.avatar.url} alt="chat-avatar" />}
                <div className="aside-chat-info">

                    <h5>{chat.title}</h5>
                    {/* {chat.messages && chat.messages.length ? <span>{chat.messages[chat.messages.length - 1].owner.login + ": " + chat.messages[chat.messages.length - 1].text}</span> : <span>Пусто</span>} */}
                    <span>Последнее обновление: </span>
                    {chat.lastModified && <ReactTimeAgo date={+(chat.lastModified)} locale="ru" timeStyle="round" />}
                </div>
            </Link>
        </li>
    )
}

const ChatsList = ({ chats, onChat }) => {
    return (
        <>
            <ul className="chat-list">
                <li className="aside-chat-btn">
                    <Link to="/chat">Новый чат</Link>
                </li>
                {Object.entries(chats).map(([id, chat]) => <ChatItem key={id} id={id} chat={chat} />)}
            </ul>
        </>
    )
}

export default ChatsList