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 } from '../../../../../helpers'
import { TAllMessages } from '../../../../../typescript/redux/allMessages/types'

const useStyles = makeStyles({
  container: {
    width: '100%',
    maxHeight: '840px',
    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",
    },
  }, 
  folderIcon: {
    color: '#54b0fc',
    cursor: 'pointer',
    '&:hover': {
      color: '#016cc3'
    },
  },
  listItem: {
    '&:hover': {
      backgroundColor: '#f0f0f0',
    }
  },  
})

const FilesList = ({ allMessagesMemo,value }: { allMessagesMemo: TAllMessages,value: string }) => {
  const classes = useStyles()
    const filteredMessagesMemo =  allMessagesMemo.filter(({type}) => type !== 'text')
  return (
    <>
      <List className={classes.container}>
        {filteredMessagesMemo.map(({ message, createdAt, fullType }) =>
          <div key={createdAt}>
            <ListItem alignItems="flex-start" className={classes.listItem}>
              <ListItemAvatar>
                <FolderIcon onClick={() =>
                  handleDownload(`http://localhost:3000/${message}`, fullType)}
                  className={classes.folderIcon} fontSize='large' />
              </ListItemAvatar>
              <ListItemText
                primary={fullType}
                secondary={timeStampEU(createdAt)}
              />
            </ListItem>
            <Divider variant="inset"/>
        </div>)}
      </List>
      {value &&  filteredMessagesMemo.length === 0 && <AlertInfo name={`Can not find Files by request: ${value}`} />}
      {!value && filteredMessagesMemo.length === 0 && <AlertInfo name='You do not have Files yet!'/>}
    </>
  )
}

export default FilesList