import { makeStyles } from "@material-ui/core/styles"; import { styled } from '@mui/material/styles'; import { useState } from "react"; import Typography from '@mui/material/Typography'; import ListItemText from '@mui/material/ListItemText'; import Button from '@mui/material/Button'; 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 CloseIcon from '@mui/icons-material/Close'; import ReplyIcon from '@mui/icons-material/Reply'; import LibraryMusicIcon from '@mui/icons-material/LibraryMusic'; import FolderIcon from '@mui/icons-material/Folder'; import ImageIcon from '@mui/icons-material/Image'; import ContentCopyIcon from '@mui/icons-material/ContentCopy'; import VideoLibraryIcon from '@mui/icons-material/VideoLibrary'; import { CopyToClipboard } from 'react-copy-to-clipboard'; import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data"; import { firstLetter,slicedWord,timeStampMessage,copied,emojisArr,handleDownload } 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', maxWidth: 450, minWidth:200, padding: 5, borderRadius: 7, wordBreak:'break-word', textAlign: "left", font: "400 .9em 'Open Sans', sans-serif", }, wrapperInner: { position: 'relative', display: 'flex', alignItems: 'center', alignContent: 'center', width: '100%', cursor: 'pointer', '&:hover': { backgroundColor: 'rgba(104, 105, 104, 0.2)' } }, wrapperInnerMessage: { display: 'flex', alignItems: 'start', alignContent: 'start', flexDirection: 'column', marginLeft:20, }, time: { fontSize: ".65em", fontWeight:600, color: '#414141', marginLeft:'auto', }, copyIcon: { color: '#b56ff7', cursor: 'pointer', marginRight: 7, '&:hover': { color: '#9c3bf8', }, }, modalDelete: { background: '#ffffff', position: 'absolute', content:'', width: '20%', height:'auto', left: '40%', bottom: '48.5%', borderRadius: 10, padding: 10, display: 'flex', flexDirection:'column' }, overlay: { 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 ', } }, folderIcon: { color: '#26afee', cursor: 'pointer', '&:hover': { color: '#49c1f8' }, }, replyListItem: { display: 'flex', width: '100%', flexWrap: 'nowrap', alignContent: 'center', alignItems: 'center', }, checkboxSelect: { position: 'absolute', left: -64, bottom: -10, pointerEvents: 'auto' }, column: { position: 'absolute', content: '', width: 2, left:43, top:'10%', height:'80%', backgroundColor: '#26afee', }, }); const label = { inputProps: { 'aria-label': 'Checkbox demo' } }; interface IMessageLeftReply { url:string, replyMessage: string, message: string, name: string, lastName: string, replyName:string, replyLastName: string, replyCaption: string, createdAt: string, caption: string, emoji: string, emojiCompanion: string, pinned: boolean, isSomeSelected: boolean, isSelected:(_id:string) => boolean, handleSelected: (_id:string) => void, _id: string, nightMode: boolean, handleReply: (_id: string) => void, handleForward: (_id: string) => void, fullType: string, handleScrollToTheMessage: (_id: string) => void, oldId: string } const MessageLeftReply = ({url,replyMessage,message,name,lastName,replyName,replyLastName,replyCaption,createdAt,caption,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward,fullType,handleScrollToTheMessage,oldId}:IMessageLeftReply) => { const classes = useStyles(); const [anchorEl, setAnchorEl] = useState(null); const [selected, setSelected] = useState(false); const [modal,setModal] = useState(false) const open = Boolean(anchorEl); const checked = isSelected(_id) const handleClose = (type: string | undefined): void => { if (type === 'copy') copied('Message') 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) } const handleClickIcon = (e: any) => { e.stopPropagation() handleDownload(url, fullType) } return (
handleContextMenu(e)} className={classes.wrapper} style={{backgroundColor:selected?'#babdbc':'#ffffff',pointerEvents:isSomeSelected?'none':'auto'}}> {`${firstLetter(name)}${slicedWord(name, 15, 1)} ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
{fullType === null && copied('Message')} text={`Message: ${replyMessage} , Caption: ${replyCaption}`}> } {fullType&&fullType.includes('audio') &&} {fullType&&fullType.includes('video') &&} {fullType&&fullType.includes('image') &&} {fullType&&fullType.includes('application') && }
handleScrollToTheMessage(oldId)}> {`Replied to ${firstLetter(replyName)}${slicedWord(replyName, 15, 1)} ${firstLetter(replyLastName)}${slicedWord(replyLastName, 15, 1)}`}
{timeStampMessage(createdAt)}
{emojiCompanion &&
{emojisArr[Number(emojiCompanion)]}
} {emoji &&
{emojisArr[Number(emoji)]}
} {isSomeSelected &&
handleSelected(_id)}/>
} {emojisArr.map((el:string, i:number) =>
{el}
)}
{ handleReply(_id) handleClose(undefined) }}> Reply { handleForward(_id) handleClose(undefined) }}> Forward handleClose('copy')} text={`Message: ${message} , Caption: ${caption}`}> Copy Text { 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 MessageLeftReply