import { connect } from "react-redux"
import { actionRemoveChat } from "../../actions/actionsForChats";
import { actionIsOpen, actionOpenModal } from "../../reducers/modalReducer";

import { ChatListItemTitle } from "../ChatListItem/ChatListItem.style"
import { ChatMembersAmount, ChatPageHeaderWrap } from "./ChatPageHeader.style"




const ChatPageHeader = ({ chats, chatId, onclick, openModal}) => {

    let amount = chats[chatId]?.members?.length;

    return (
        <ChatPageHeaderWrap>
            <div style={{cursor: "pointer"}} onClick={() => openModal("chatInfoModal")}>
                <ChatListItemTitle>{chats[chatId]?.title}</ChatListItemTitle>
                <ChatMembersAmount>{amount} {amount === 1 ? 'member' : 'members'}</ChatMembersAmount>
            </div>
            <div onClick={() => onclick(chatId)}>leave chat</div>
        </ChatPageHeaderWrap>
    )
}

export default connect(state => ({chats : state?.chats || []}), {onclick: actionRemoveChat, openModal: actionOpenModal})(ChatPageHeader);