import { makeStyles } from "@material-ui/core/styles"; import { styled } from '@mui/material/styles'; import { useState, useRef } from "react"; import Typography from '@mui/material/Typography'; import DownloadForOfflineIcon from '@mui/icons-material/DownloadForOffline'; import ImageIcon from '@mui/icons-material/Image'; 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 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 Avatar from '@mui/material/Avatar'; import { CopyToClipboard } from 'react-copy-to-clipboard'; import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data"; import { timeStampMessage, timeStampEU,handleDownload,copied,emojisArr,firstLetter, slicedWord,prodAwsS3 } 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", alignItems: 'flex-start', alignContent: 'flex-start', flexDirection:'column', borderRadius: 7, position: 'relative', padding:'10px 0px 10px 22px' }, wrapper: { position: 'relative', display: 'flex', alignItems: 'start', alignContent: 'start', flexDirection: 'column', width: 400, borderRadius: 7, padding: 5, }, wrapperInner: { display: 'flex', alignItems: 'center', alignContent: 'center', }, informationWrapper: { display: 'flex', alignItems: 'center', alignContent: 'center', justifyContent: 'flex-end', zIndex: 2, width:'100%', }, time: { fontSize: ".65em", fontWeight:600, color: '#414141', }, image: { borderRadius: 7, width: 348, maxHeight: 'auto', cursor: 'pointer', padding: '10px 0px 10px 0px', }, 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.2rem', right: -40, }, emojiCompanionTitle: { position: "absolute", fontSize: "1.7em", fontWeight:600, bottom: '2.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 ', } }, checkboxSelect: { position: 'absolute', left: -64, top: -10, pointerEvents: 'auto' }, folderIcon: { marginRight: 7, color: '#54b0fc', cursor: 'pointer', '&:hover': { color: '#016cc3' }, }, avatarIcon: { position: 'absolute', left: -54, bottom: 0, }, tongueOne: { content: "''", position: "absolute", width: "0", height: "0", borderLeft: "15px solid transparent", borderRight: "15px solid transparent", bottom: '0px', left: "-15px", zIndex:1 }, tongueTwo: { content: "''", position: "absolute", width: "0", height: "0", borderLeft: "16px solid transparent", borderRight: "16px solid transparent", bottom: "0px", left: "-17px", zIndex:1 }, }); const label = { inputProps: { 'aria-label': 'Checkbox demo' } }; interface IMessagesLeftImage { url: string, tongue: boolean, avatarUrl: string, color: string, createdAt: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, handleForward: (_id: string) => void, } const MessagesLeftImage = ({url,tongue,avatarUrl,color,createdAt,fullType,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,name,lastName,nightMode,handleReply,handleForward}:IMessagesLeftImage) => { const classes = useStyles(); const [watch, setWatch] = useStateAre you sure you want to delete message?