import { makeStyles } from "@material-ui/core/styles";
import { Carousel } from 'react-responsive-carousel';
import { IconButton } from "@material-ui/core";
import ImageIcon from '@mui/icons-material/Image';
import FileDownloadIcon from '@mui/icons-material/FileDownload';
import { useState } from "react";
import { timeStampMessage, timeStampFilter,handleDownload } from '../../../../../../helpers'


const useStyles = makeStyles({
  container: {
    display: "flex",
    justifyContent: "flex-end",
    width:'auto',
    maxWidth: '80%',
    marginBottom:15
  },
  wrapper: {
    width: 400,
    position: 'relative',
    display: 'flex',
    alignItems: 'center',
    alignContent: 'center',
    justifyContent: 'space-between',
    borderRadius: 7,
    padding: '12px 5px 12px 5px',
    backgroundColor: '#deffa9',
      "&:after": {
        content: "''",
        position: "absolute",
        width: "0",
        height: "0",
        borderBottom: "15px solid #deffa9",
        borderLeft: "15px solid transparent",
        borderRight: "15px solid transparent",
        bottom: "0",
        right: "-15px"
      },
      "&:before": {
        content: "''",
        position: "absolute",
        width: "0",
        height: "0",
        borderBottom: "17px solid #deffa9",
        borderLeft: "16px solid transparent",
        borderRight: "16px solid transparent",
        bottom: "0px",
        right: "-17px"
      }     
  },
    image: {
      borderRadius: 7,
      width: 300,
      maxHeight: 400,
      cursor: 'pointer',
    },  
    time: {
      position: "absolute",
      fontSize: ".65em",
      fontWeight:600,
      bottom: 0,
      right: 6,
      color: '#414141',
      padding: 3,
      borderRadius: 5,
  },
  bntDownload: {
    backgroundColor: '#deffa9',
    color: '#54b0fc',
    width: 30,
    height:30,
    '&:hover': {
      backgroundColor: '#54b0fc',
      color:'#ffffff'
    }
  },    
  overlay: {
    position: 'fixed',
    top: 0,
    left: 0,
    width: '100vw',
    height: '100vh',
    zIndex: 100,
    backgroundColor: 'rgba(104, 105, 104, 0.6)',
    border: 'solid 1px rgba(179, 179, 179, 0.6)',
    overflowY: 'hidden',
    boxSizing: 'border-box',
  },
  carousel: {
    position: "absolute",
    left: '35%',
    top:'2%',
    width: '30%',
    height:'80%',
  }
});

interface IMessageRightImage {
  url:string,
  updatedAt:string,
  color: string,
  message: string,
  messages: any,
  fullType:string
}

const MessageRightImage = ({url,updatedAt,color,message,messages,fullType}:IMessageRightImage) => {
  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)
  return (watch ?
    <div onClick={handleCloseWatch} id='overlay' className={classes.overlay}>
      <Carousel className={classes.carousel}>
        {[...messages].reduce((acc, el) => {
          if (el.type === 'image' && el.message !== message) {
            acc.push(el)
            return acc
          } else if (el.type === 'image') {
            acc.unshift(el)
            return acc 
          }
          return acc
        },[]).map((el:any) => <div>
              <img alt='pic' src={`http://localhost:3000/${el.message}`}/>
                <p className="legend">{timeStampFilter(el.updatedAt)}</p>
            </div>)}
       </Carousel>
    </div> :
    <div className={classes.container}>
      <div className={classes.wrapper}>
        <ImageIcon fontSize='large' style={{ color: '#bd9a00' }} />
        <img onClick={handleOpenWatch} className={classes.image} alt='message pic' src={url}
          style={{ backgroundColor: url ? '' : color }} width='300' height='400' />
        <IconButton onClick={() => handleDownload(url, fullType)} className={classes.bntDownload}  >
            <FileDownloadIcon fontSize='medium'/>
        </IconButton>
        <div className={classes.time}>{timeStampMessage(updatedAt)}</div>
      </div>
    </div>   
)};

export  default  MessageRightImage
