FINAL-PROJECT-FRONT/src/components/HomePage/RightBar/CredentialsList/ProfileLists/FilesList/index.tsx

import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import ListItemAvatar from '@mui/material/ListItemAvatar';
import FolderIcon from '@mui/icons-material/Folder';
import Divider from '@mui/material/Divider';
import { makeStyles } from '@material-ui/core'

import AlertInfo from '../../../../../reusableComponents/AlertInfo';
import { timeStampEU,handleDownload,prodAwsS3 } from '../../../../../../helpers'
import { TMessages } from '../../../../../../typescript/redux/messages/types'

const useStyles = makeStyles({
  folderIcon: {
    color: '#54b0fc',
    cursor: 'pointer',
    '&:hover': {
        color: '#016cc3'
      },
  },
  listItem: {
    cursor:'pointer',
    '&:hover': {
      backgroundColor: '#f0f0f0',
    }
  },  
})

interface IFilesList {
  filteredAndSorted: TMessages,
  handleScrollToTheMessage: (_id:string) => void,
}

const FilesList = ({ filteredAndSorted,handleScrollToTheMessage }: IFilesList) => {
  const classes = useStyles()
  
    return filteredAndSorted.length > 0 ?(
      <List>
        {filteredAndSorted.map(({ message, createdAt, fullType,_id }) =>
          <div key={createdAt}>
            <ListItem onClick={() => handleScrollToTheMessage(_id)}
              alignItems="flex-start" className={classes.listItem}>
              <ListItemAvatar>
                <FolderIcon onClick={() =>
                  handleDownload(`${prodAwsS3}/${message}`, fullType)}
                  className={classes.folderIcon} fontSize='large' />
              </ListItemAvatar>
              <ListItemText
                primary={fullType}
                secondary={timeStampEU(createdAt)}
              />
            </ListItem>
            <Divider variant="inset"/>
        </div>)}
    </List>
   ): <AlertInfo name='You do not have Files yet!'/>  
}

export default FilesList