import TimeAgo from 'javascript-time-ago'
import ru from 'javascript-time-ago/locale/ru.json'
import React, { useState } from 'react';
import { connect } from "react-redux";
import { ChatItem } from "./chatItem";
import { Box, List, Fab, ListItem } from '@mui/material'
import history from '../components/history';
import AddIcon from '@mui/icons-material/Add';

TimeAgo.addLocale(ru)

const ChatsList = ({ chats }) => {
    const [selected, setSelected] = useState(false)

    const handleListItemClick = (event, id) => {
        setSelected(id)
    }

    return (
        <Box sx={{ width: '100%', bgcolor: 'background.paper' }}>
            <List component="nav" aria-label="main mailbox folders" sx={{
                width: '100%',
                bgcolor: 'background.paper',
                position: 'relative',
                overflow: 'auto',
                maxHeight: '93vh',
            }}>
                {Object.entries(chats).map(([id, chat]) => <ChatItem key={id} id={id} chat={chat} selected={selected} handle={handleListItemClick} />)}
                <ListItem sx={{
                    position: 'fixed',
                    bottom: '10px',
                    left: '18%',
                }}>
                    <Fab color="primary" aria-label="add" onClick={() => history.push("/chat")}>
                        <AddIcon />
                    </Fab>
                </ListItem>
            </List>
        </Box >
    )
}

const ConnectChatsList = connect(state => ({ chats: state.chat }))(ChatsList)

export default ConnectChatsList