import React, { useState, useEffect } from "react";
import { connect } from "react-redux";
import { backURL } from "../constants";
import { Link } from "react-router-dom";
import { AvatarStub, color } from "../components/AvatarStub";
import { actionFullMsgsByChat } from "../actions";
import { actionUserFindOne, store } from "../reducers";
import Button from "react-bootstrap/esm/Button";



const ChatsPage = ({ chats = [], _id, msgOneChat, msgCount = 20,}) => {

    
    
    return (
        <>
            <div className="chatsContainer">
                {chats.map((chat, _id) => (
                    <>
                        
                        <Link className="chatsList"  to={`/main/${chat._id}`}>
                            {chat.avatar?.url ? (
                                <img
                                    className="smallForChat"
                                    src={backURL + chat.avatar?.url}
                                />
                            ) : (
                                <AvatarStub
                                    login={
                                        chat.title !== null
                                            ? chat.title
                                            : "chat without title"
                                    }
                                    color={color()}
                                />
                            )}
                            <h5 className="chatTitle">
                                {chat.title !== null
                                    ? chat.title
                                    : "chat without title"}
                            </h5>

                        </Link>
                    </>
                ))}
                <Link className="newChatButton" to="/newchat">
                    +
                </Link>
                
            </div>
            
        </>
    );
};

export const CChatsPage = connect(
    (state) => ({
        chats: Object.values(state.chats).filter((el) => el._id),
    }), {msgOneChat : actionFullMsgsByChat}
)(ChatsPage);