import List from '@mui/material/List';
import { makeStyles } from '@material-ui/core'

import AlertInfo from '../../../../../../reusableComponents/AlertInfo'
import ForwardItem from './ForwardItem'
import { TChats } from '../../../../../../../typescript/redux/chats/types';


const useStyles = makeStyles({
  list: {
    width: '100%',
    maxHeight: '63vh',
    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 IForwardList {
  value: string,
  date:string,
  filteredAndSorted:TChats,
  handleForwardTo: (companionId: string) => void,
}

const ForwardList = ({ value,date,filteredAndSorted,handleForwardTo }: IForwardList) => {
  const classes = useStyles()
  

  return <>
    <List className={classes.list} component="nav"
      aria-label="main mailbox folders">
      {filteredAndSorted.map(({ name, lastName, avatarUrl, color, online, companionId, number }) =>
        <ForwardItem key={number} name={name} lastName={lastName}
          avatarUrl={avatarUrl} color={color} online={online}
          companionId={companionId} handleForwardTo={handleForwardTo} />)}
      {(value || date) && filteredAndSorted.length === 0 && <AlertInfo name={`Can not find Chat by request: ${value}`} />}
      {!value && !date && filteredAndSorted.length === 0 &&<AlertInfo name='You do not have any Chats yet!'/>}
    </List>
  </>
}

export default ForwardList