
import { makeStyles } from '@material-ui/core'
import { useState,useRef } from 'react';
import ListItemText from '@mui/material/ListItemText';
import ListItemIcon from '@mui/material/ListItemIcon';
import Avatar from '@mui/material/Avatar';
import ZoomOutIcon from '@mui/icons-material/ZoomOut';
import ZoomInIcon from '@mui/icons-material/ZoomIn';
import CloseIcon from '@mui/icons-material/Close';
import ImageListItem from '@mui/material/ImageListItem';
import DownloadForOfflineIcon from '@mui/icons-material/DownloadForOffline';
import { handleDownload, timeStampEU, prodAwsS3, firstLetter, slicedWord } from '../../../../../../../helpers'

const useStyles = makeStyles({ 
  overlay: {
    position: 'fixed',
    top: 0,
    left: 0,
    width: '100vw',
    minHeight: '100vh',
    zIndex: 100,
    backgroundColor: 'rgba(104, 105, 104, 0.6)',
    boxSizing: 'border-box',
    display: 'flex',
    justifyContent: 'center',
    alignContent: 'center',
    alignItems: 'center',
    overflow: 'auto',
  },
  topBar: {
    position: 'fixed',
    top: 0,
    left: 0,
    height: '7vh',
    width: '100vw',
    display: 'flex',
    alignContent: 'center',
    alignItems: 'center',
    justifyContent: 'space-between',
    backgroundColor: 'rgba(65, 65, 65, 0.9)',
    zIndex: 10,
    padding: '0px 20px'
  },
  wrapperCredentials: {
    display: 'flex',
    alignContent: 'center',
    alignItems: 'center',
  },    
  wrapperIcons: {
    display: 'flex',
    alignContent: 'center',
    alignItems: 'center',
  },  
  magnifying : {
    marginLeft:5,
    cursor: 'pointer',
    color: '#e9e7e7',
    padding: 0,
    '&:hover': {
      color: '#ffffff',
      transform: 'scale(1.1)'
    }
  }, 
  downloadIcon: {
    marginLeft:5,
    cursor: 'pointer',
    color: '#e9e7e7',
    padding: 0,
    borderRadius: '50%',
    '&:hover': {
      backgroundColor: '#ffffff',
      color: '#b8b7b7',
    }
  },
  iconClose: {
    marginLeft:5,
    cursor: 'pointer',
    color: '#e9e7e7',
    padding: 0,
    '&:hover': {
      color: '#ffffff',
      transform: 'rotate(180deg)',
      transition: 'all 250ms ease-out ',
    }
  },  
  wrapperImage: {
    borderRadius: 5,
    maxWidth:500,
    maxHeight: 750,
    display: 'flex',
    overflow: 'auto'
  },
  innerImage: {
    objectFit: 'cover',
  }, 
  img: {
    cursor:'pointer',
    '&:hover': {
      scale:0.98
    }
  },
});

interface IMediaListItem {
  message: string,
  fullType: string,
  updatedAt: string,
  handleScrollToTheMessage: (_id: string) => void,
  id: string,
  name: string,
  lastName: string,
  avatarUrl: string,
  color: string,
}

const MediaListItem = ({ message, fullType, updatedAt, handleScrollToTheMessage,
  id, name, lastName, avatarUrl,color }: IMediaListItem) => {
  const classes = useStyles();
  const url = `${prodAwsS3}/${message}`
  const [watch, setWatch] = useState<boolean>(false)
  const [scale, setScale] = useState<number>(1)
  const refView = useRef<null | any>(null)
  const handleIncreaseScale = () => {
    if (scale < 5) {
      refView.current.style.transform = `scale(${scale+0.25},${scale+0.25})`
      refView.current.style.transformOrigin = `${50 / scale + 0.25}px ${50 / scale + 0.25}px`
      setScale(scale+0.25)
    }
  }
  const handleDecreaseScale = () => {
    if (scale >= 0.5) {
      refView.current.style.transform = `scale(${scale-0.25},${scale-0.25})`
      refView.current.style.transformOrigin = `${50/scale-0.25}px ${50/scale-0.25}px`
      setScale(scale-0.25)
    }
  } 
  const handleOpenWatch = () => !watch && setWatch(true)
  const handleCloseWatch = (e:any) => {
    const id = e.target.id
    if (id === 'overlay' || id === 'close') {
      setWatch(false)
      setScale(1)
    }
  }  
  
  return (watch?
    <div id='overlay' onClick={(e) => {
      handleCloseWatch(e)
      handleScrollToTheMessage(id)
    }} className={classes.overlay}>
      <div className={classes.topBar}>
        <div className={classes.wrapperCredentials}>
          <ListItemIcon >
            <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
              sx={{ background: color, width: 44, height: 44 }}>
              {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
            </Avatar>
          </ListItemIcon> 
          <ListItemText primary={`${firstLetter(name)}${slicedWord(name, 15, 1)}
            ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
            primaryTypographyProps={{ color: '#ffffff' }}
            secondary={timeStampEU(updatedAt)} secondaryTypographyProps={{ color: '#ffffff' }} />
        </div>
        <div className={classes.wrapperIcons}>
          <ZoomOutIcon onClick={handleDecreaseScale}
            className={classes.magnifying} fontSize='large' />
          <ZoomInIcon onClick={handleIncreaseScale}
            className={classes.magnifying} fontSize='large' />
          <DownloadForOfflineIcon onClick={() => handleDownload(url, fullType)}
            className={classes.downloadIcon} fontSize='large' />
          <CloseIcon id='close' onClick={handleCloseWatch}
            className={classes.iconClose} fontSize='large' />
        </div>        
      </div>
      <div ref={refView} className={classes.wrapperImage}>
        <img className={classes.innerImage} 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