FINAL-PROJECT-FRONT/src/components/HomePage/LeftBar/SearchLists/MediaList/MediaListItem/index.tsx

import { makeStyles } from '@material-ui/core'
import { useState } from 'react';
import ImageListItem from '@mui/material/ImageListItem';
import DownloadForOfflineIcon from '@mui/icons-material/DownloadForOffline';
import { handleDownload,timeStampEU,prodBaseURL } from '../../../../../../helpers'

const useStyles = makeStyles({ 
  overlay: {
    position: 'fixed',
    top: 0,
    left: 0,
    width: '100vw',
    height: '100vh',
    zIndex: 100,
    backgroundColor: 'rgba(104, 105, 104, 0.6)',
    overflowY: 'hidden',
    boxSizing: 'border-box',
    display: 'flex',
    justifyContent: 'center',
    alignContent: 'center',
    alignItems: 'center'
  },
  wrapper: {
    width: '30%',
    maxHeight: '80%',
    position: 'relative',
    display: 'flex',
  },
  downloadIcon: {
    position: 'absolute',
    content: '',
    right: 0,
    top: -40,
    cursor: 'pointer',
    color: '#e9e7e7',
    padding: 0,
    borderRadius: '50%',
    '&:hover': {
      backgroundColor: '#ffffff',
      color: '#b8b7b7',
    }
  },
  img: {
    cursor:'pointer',
    '&:hover': {
      scale:0.98
    }
  },
  time: {
    position: 'absolute',
    content: '',    
    color: '#ffffff',
    top: -30,
    left: 0,
    borderRadius: 10,
    padding:'2px 6px 2px 6px',
    backgroundColor:'#707070'
  }
});
const MediaListItem = ({ message,fullType,updatedAt }: { message: string,fullType:string,updatedAt:string }) => {
  const classes = useStyles();
  const [watch, setWatch] = useState<boolean>(false)
  const handleOpenWatch = () => !watch && setWatch(true)
  const handleCloseWatch = (e:any) => e.target.id === 'overlay'&&watch&&setWatch(false)
  
  const url = `${prodBaseURL}/${message}`
  
  return (watch ?
    <div onClick={handleCloseWatch} id='overlay' className={classes.overlay}>
      <div className={classes.wrapper}>
        <span className={classes.time}>{timeStampEU(updatedAt)}</span>
        <DownloadForOfflineIcon className={classes.downloadIcon} fontSize='large'
         onClick={() => handleDownload(url, fullType)}/>
        <img width='100%' height='auto' alt='imageItem' src={url} />
       </div>
    </div> :
    <ImageListItem>
      <img onClick={handleOpenWatch} className={classes.img}
        src={`${url}?w=164&h=164&fit=crop&auto=format`}
        srcSet={`${url}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
        alt='imageItem' loading="lazy" />
    </ImageListItem>
      
  )
}

export default MediaListItem