import { makeStyles } from "@material-ui/core/styles";
import ListItemText from '@mui/material/ListItemText';
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { firstLetter,slicedWord,timeStampMessage,copied } from '../../../../../../helpers'

const useStyles = makeStyles({
    container: {
      display: "flex",
      justifyContent: "flex-start",
      width:'auto',
      maxWidth: '80%',
      marginBottom:10
    },
    wrapper: {
      position: 'relative',
      display: 'flex',
      alignItems: 'center',
      alignContent: 'center',
      maxWidth: 450,
      padding: "10px",
      paddingBottom:18,
      backgroundColor: "#ffffff",
      border: "1px solid #f0f0f0",
      borderRadius: 7,
    },
    message: {
      wordBreak:'break-word',
      textAlign: "left",
      font: "400 .9em 'Open Sans', sans-serif",
      "&: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: "-1px",
        left: "-17px"
      }      
  },
  copyIcon: {
    color: '#b56ff7',
    cursor: 'pointer',
    marginRight: 7,
    '&:hover': {
      color: '#9c3bf8',
    },
  },  
  time: {
      position: "absolute",
      fontSize: ".65em",
      fontWeight:600,
      bottom: 6,
      right: 6,
      color: '#414141',
      padding: 3,
      borderRadius: 5,
    },
});


interface IMessageLeftText {
  message:string,
  name:string,
  lastName:string,
  updatedAt:string,
}

const MessageLeftText = ({message,name,lastName,updatedAt}:IMessageLeftText) => {
  const classes = useStyles();

  return (
  <div className={classes.container}>
     <div className={classes.wrapper}>
        <CopyToClipboard onCopy={() => copied('Message')} text={message}>
          <ContentCopyIcon className={classes.copyIcon} fontSize='large'/>
        </CopyToClipboard>
        <ListItemText className={classes.message}
          primary={`${firstLetter(name)}${slicedWord(name, 15, 1)} 
          ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
          primaryTypographyProps={{color: "#0379af"}}
          secondary={message}
          secondaryTypographyProps={{ color: "#0e0d0d" }} />
        <div className={classes.time}>{timeStampMessage(updatedAt)}</div>
      </div>
  </div>    
)};  

export default MessageLeftText
