import { makeStyles } from "@material-ui/core/styles"; import { styled } from '@mui/material/styles'; import { useState,useRef } from "react"; import DownloadForOfflineIcon from '@mui/icons-material/DownloadForOffline'; import { IconButton } from "@material-ui/core"; import ImageIcon from '@mui/icons-material/Image'; import FileDownloadIcon from '@mui/icons-material/FileDownload'; import Button from '@mui/material/Button'; import ContentCopyIcon from '@mui/icons-material/ContentCopy'; import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'; import Menu from '@mui/material/Menu'; import MenuItem from '@mui/material/MenuItem'; import Divider from '@mui/material/Divider'; import CheckBoxIcon from '@mui/icons-material/CheckBox'; import Checkbox from '@mui/material/Checkbox'; import PushPinIcon from '@mui/icons-material/PushPin'; 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 ReplyIcon from '@mui/icons-material/Reply'; import { CopyToClipboard } from 'react-copy-to-clipboard'; import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data"; import { timeStampMessage, timeStampEU,handleDownload,copied,emojisArr,firstLetter, slicedWord } from '../../../../../../helpers' const StyledMenu = styled((props:any) => ( ))(({ theme }:any) => ({ '& .MuiPaper-root': { borderRadius: 10, marginTop: theme.spacing(0), minWidth: 220, color: theme.palette.mode === 'light' ? 'rgb(55, 65, 81)' : theme.palette.grey[500], boxShadow: 'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px', '& .MuiMenu-list': { padding: '4px 4px', }, '& .MuiMenuItem-root': { marginBottom: theme.spacing(1), '& .MuiSvgIcon-root': { fontSize: 21, color: theme.palette.text.secondary, marginRight: theme.spacing(2), } }, }, })); const useStyles = makeStyles({ container: { display: "flex", justifyContent: "flex-start", borderRadius: 7, }, wrapper: { width: 400, position: 'relative', display: 'flex', alignItems: 'center', alignContent: 'center', justifyContent: 'space-between', borderRadius: 7, padding: '12px 5px 18px 5px', backgroundColor: '#ffffff', "&:after": { content: "''", position: "absolute", width: "0", height: "0", borderBottom: "15px solid #ffffff", borderLeft: "15px solid transparent", borderRight: "15px solid transparent", bottom: '0px', left: "-15px" }, "&:before": { content: "''", position: "absolute", width: "0", height: "0", borderBottom: "17px solid #ffffff", borderLeft: "16px solid transparent", borderRight: "16px solid transparent", bottom: "0px", left: "-17px" } }, wrapperActive: { width: 400, position: 'relative', display: 'flex', alignItems: 'center', alignContent: 'center', justifyContent: 'space-between', borderRadius: 7, padding: '12px 5px 18px 5px', backgroundColor: '#babdbc', "&:after": { content: "''", position: "absolute", width: "0", height: "0", borderBottom: "15px solid #babdbc", borderLeft: "15px solid transparent", borderRight: "15px solid transparent", bottom: '0px', left: "-15px" }, "&:before": { content: "''", position: "absolute", width: "0", height: "0", borderBottom: "17px solid #babdbc", borderLeft: "16px solid transparent", borderRight: "16px solid transparent", bottom: "0px", left: "-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, }, captionWrapper: { position: "absolute", fontSize: ".85em", color: '#414141', maxWidth:'76%', fontWeight:600, bottom: -25, left: 12, borderRadius: 5, wordBreak:'break-word', textAlign: "left", font: "400 .9em 'Open Sans', sans-serif", backgroundColor: '#deffa9', padding:10, "&:after": { content: "''", position: "absolute", width: "0", height: "0", borderBottom: "15px solid #deffa9", borderLeft: "15px solid transparent", borderRight: "15px solid transparent", bottom: '0px', left: "-15px" }, "&:before": { content: "''", position: "absolute", width: "0", height: "0", borderBottom: "17px solid #deffa9", borderLeft: "16px solid transparent", borderRight: "16px solid transparent", bottom: "-1px", left: "-17px" } }, bntDownload: { backgroundColor: 'inherit', color: '#54b0fc', width: 30, height:30, '&:hover': { backgroundColor: '#54b0fc', color:'#ffffff' } }, overlay: { position: 'fixed', top: 0, left: 0, width: '100vw', minHeight: '100vh', zIndex: 100, backgroundColor: 'rgba(104, 105, 104, 0.6)', overflow: 'auto', boxSizing: 'border-box', display: 'flex', justifyContent: 'center', alignContent: 'center', alignItems: 'center' }, 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', } }, iconCloseOverlay: { 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', }, modalDelete: { background: '#ffffff', position: 'absolute', content:'', width: '20%', height:'auto', left: '40%', bottom: '48.5%', borderRadius: 10, padding: 10, display: 'flex', flexDirection:'column' }, overlayDelete: { position: 'fixed', top: 0, left: 0, width: '100vw', height: '100vh', zIndex: 100, backgroundColor: 'rgba(104, 105, 104, 0.6)', overflowY: 'hidden', }, emojiTitle: { position: "absolute", fontSize: "1.7em", fontWeight:600, bottom: 0, right: -40, }, emojiCompanionTitle: { position: "absolute", fontSize: "1.7em", fontWeight:600, bottom: '2rem', right: -40, }, emoji: { cursor: 'pointer', fontSize: '1.7rem', transition: 'all 0.3s', '&:hover': { transform: 'scale(1.5)' } }, emojiActive: { cursor: 'pointer', fontSize: '1.2rem', animation: `$emoji 0.6s ease-out`, animationDirection: 'forwards', animationIterationCount: 1, }, '@keyframes emoji': { '5%': { transform: 'translateY(1rem)'}, '10%': { transform: 'translateY(0) scale(1)',opacity: 1}, '50%': { transform: 'translateY(-4rem) scale(1.5) rotateY(90deg)'}, '80%': {opacity: 0}, '100%': {transform: 'translateY(-8rem) scale(2) rotateY(180deg)',opacity: 0}, }, iconClose: { '&:hover': { transform: 'rotate(180deg)', transition: 'all 250ms ease-out ', } }, }); const label = { inputProps: { 'aria-label': 'Checkbox demo' } }; interface IMessagesLeftImage { url:string, createdAt:string, color: string, fullType: string, caption: string, emoji: string, emojiCompanion: string, pinned: boolean, isSomeSelected: boolean, isSelected:(_id:string) => boolean, handleSelected: (_id:string) => void, _id: string, name: string, lastName: string, nightMode: boolean, handleReply: (_id: string) => void } const MessagesLeftImage = ({url,createdAt,color,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,name,lastName,nightMode,handleReply}:IMessagesLeftImage) => { const classes = useStyles(); const [watch, setWatch] = useState(false) const [anchorEl, setAnchorEl] = useState(null); const [selected, setSelected] = useState(false); const [scale, setScale] = useState(1) const refView = useRef(null) const [modal,setModal] = useState(false) const open = Boolean(anchorEl); const checked = isSelected(_id) 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) refView.current.style.transform = 'scale(1)' setScale(1) } } const handleClose = (type: string | undefined): void => { if (type === 'copy') copied('Link') if (type === 'delete') setModal(true) setAnchorEl(null) setSelected(false) } const handleDeleteModal = (e: any) => { const id = e.target.id if (id === 'overlay' || id === 'cancel') return setModal(false) if (id === 'delete') { removeMessageById(_id) setModal(false) } } const handleContextMenu = (e: React.MouseEvent):void => { e.preventDefault() setAnchorEl(e.currentTarget) setSelected(true) } const handleEmojiMenu = ({ target }: any): void => { const idEmoji = target.id if (idEmoji === emoji) {updateMessageById(_id,'') } else updateMessageById(_id,idEmoji) } return (watch ?
{!url&&`${firstLetter(name)}${firstLetter(lastName)}`}
handleDownload(url, fullType)} className={classes.downloadIcon} fontSize='large' />
imageItem
:
{isSomeSelected&& handleSelected(_id)}/>}
handleContextMenu(e)} className={selected ? classes.wrapperActive : classes.wrapper} style={{pointerEvents:isSomeSelected?'none':'auto'}}> message pic handleDownload(url, fullType)} className={classes.bntDownload} >
{timeStampMessage(createdAt)}
{emojiCompanion &&
{emojisArr[Number(emojiCompanion)]}
} {emoji &&
{emojisArr[Number(emoji)]}
} {caption&&
{slicedWord(caption, 20, 0)}
} {emojisArr.map((el:string, i:number) =>
{el}
)}
{ handleReply(_id) handleClose(undefined) }}> Reply Forward handleClose('copy')} text={url}> Copy Link { pinMessageById(_id, !pinned) handleClose(undefined) }}> {pinned ? : } {pinned?'Unpin':'Pin'} { handleSelected(_id) handleClose(undefined) }}> Select handleClose('delete')}> Delete
{modal &&

Delete message

Are you sure you want to delete message?

}
) }; export default MessagesLeftImage