import List from '@mui/material/List';
import { makeStyles } from '@material-ui/core'
import { useEffect } from 'react';
import { useSelector,useDispatch } from 'react-redux';
import AlertInfo from '../../../reusableComponents/AlertInfo'
import ContactItem from './ContactItem';
import { getState } from '../../../../redux/contacts/selector'
import { asyncGetContacts } from '../../../../redux/contacts/operations'
import { asyncStartChatById } from '../../../../redux/chat/operations'
import { getIsOpen } from '../../../../redux/control/selector'
import { actionIsOpen } from '../../../../redux/control/action';
import { handleSort,timeStampFilter } from '../../../../helpers';
import { TContacts,TContact } from '../../../../typescript/redux/contacts/types';
const useStyles = makeStyles({
list: {
width: '100%',
maxHeight: '93vh',
overflowY: 'scroll',
'&::-webkit-scrollbar': {
width: '0.4em'
},
'&::-webkit-scrollbar-track': {
boxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
webkitBoxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
backgroundColor: '#eceeec',
},
'&::-webkit-scrollbar-thumb': {
backgroundColor: '#ccc8c8',
},
"&::-webkit-scrollbar-thumb:focus": {
backgroundColor: "#959595",
},
"&::-webkit-scrollbar-thumb:active": {
backgroundColor: "#959595",
},
},
})
interface IContactList {
value: string,
handleClick: any,
sort: boolean,
date: any
}
const ContactsList = ({value,handleClick,sort,date} : IContactList) => {
const classes = useStyles()
const dispatch = useDispatch()
const { total, contacts } = useSelector(getState)
const isOpen = useSelector(getIsOpen)
const filteredContacts = ():TContacts => handleSort('name', contacts, sort).filter((el:TContact) => {
const credentials = el.name + ' ' + el.lastName
if (!date) {
return credentials.toLowerCase().includes(value.toLowerCase())
} else if (credentials.toLowerCase().includes(value.toLowerCase())
&& timeStampFilter(date) === timeStampFilter(el.createdAt)) {
return el
}
})
const handleListItemClick = (companionId:string) => {
handleClick()
isOpen&&dispatch(actionIsOpen(''))
dispatch(asyncStartChatById(companionId))
}
useEffect(() => {
dispatch(asyncGetContacts())
const handleReset = () => isOpen !== 'credentials' &&dispatch(asyncGetContacts())
const idInterval = setInterval(handleReset, 3000);
return () => clearInterval(idInterval);
}, [dispatch,isOpen]);
const arr = filteredContacts()
return total !== '0' ? (
{arr.length > 0 ? arr.map((contact) => ) :
}
):;
}
export default ContactsList