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' ? (
    <List
      className={classes.list} component="nav"
      aria-label="main mailbox folders">
      {arr.length > 0 ? arr.map((contact) => <ContactItem key={contact.number}
        contact={contact} handleListItemClick={handleListItemClick} isOpen={isOpen}/>) :
        <AlertInfo name={`Can not find Contact by request : ${value}`} />}
      </List>
  ):<AlertInfo name='You do not have any Contact yet!' />;
}

export default ContactsList