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 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 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 DoneAllIcon from '@mui/icons-material/DoneAll'; import DoneIcon from '@mui/icons-material/Done'; import EditIcon from '@mui/icons-material/Edit'; import Avatar from '@mui/material/Avatar'; import { CopyToClipboard } from 'react-copy-to-clipboard'; import { firstLetter, slicedWord, timeStampMessage, copied,emojisArr,handleDownload,prodAwsS3 } from '../../../../../../helpers' import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data"; 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-end', alignContent: 'flex-end', flexDirection:'column', borderRadius: 7, position: 'relative', padding:'4px 22px 4px 0px' }, 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, }, informationWrapper: { display: 'flex', alignItems: 'center', alignContent: 'center', justifyContent: 'flex-end', width: '100%', paddingRight:3, }, time: { fontSize: ".65em", fontWeight:600, }, 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', left: -40, }, emojiCompanionTitle: { position: "absolute", fontSize: "1.7em", fontWeight:600, bottom: '2.2rem', left: -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', right: -64, top: -10, pointerEvents: 'auto' }, folderIcon: { color: '#00b333', cursor: 'pointer', '&:hover': { color: '#00e040' }, }, column: { position: 'absolute', content: '', width: 2, left:43, top:'10%', height:'80%', backgroundColor: '#00b333', }, avatarIcon: { position: 'absolute', right: -54, bottom: 0, }, tongueOne: { content: "''", position: "absolute", width: "0", height: "0", borderRight: "15px solid transparent", borderLeft: "15px solid transparent", bottom: '0px', right: "-15px", }, tongueTwo: { content: "''", position: "absolute", width: "0", height: "0", borderRight: "16px solid transparent", borderLeft: "16px solid transparent", bottom: "0px", right: "-17px", }, }); const label = { inputProps: { 'aria-label': 'Checkbox demo' } }; interface IMessageRightForward { url: string, oldId: string, companionIdForwardToAndFrom: string, tongue: boolean, watched: boolean, edited: boolean, avatarUrl: string, color: string, message: string, name: string, lastName: string, forwardName:string, forwardLastName: string, forwardMessage: string, forwardCaption: string, caption: string, createdAt: 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, handleEdit:(_id: string) => void, handleScrollToTheChat: (companionIdForwardToAndFrom:string,oldId:string) => void, fullType: string } const MessageRightForward = ({url,oldId,companionIdForwardToAndFrom,tongue,watched,edited,avatarUrl,color,message,name,lastName,forwardName,forwardLastName,forwardMessage,forwardCaption,caption,createdAt,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward,handleEdit,handleScrollToTheChat,fullType}:IMessageRightForward) => { const classes = useStyles(); const [anchorEl, setAnchorEl] = useStateAre you sure you want to delete message?