import React from 'react'
import { Typography } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import _ from "lodash"

const useStyles = makeStyles(theme => ({
    userMessageLeft: {
        display: 'flex',
        alignItems: 'flex-end',
        justifyContent: 'flex-start',
    },
    userMessageRight: {
        display: 'flex',
        alignItems: 'flex-end',
        justifyContent: 'flex-end',
    },
    messageSender: {
        fontSize: '0.9em',
        fontWeight: '300',
        color: theme.palette.primary.important,
    },
    messageContent: {
        fontWeight: '300',
        color: theme.palette.secondary.main,
    },
    userBubble: {
        width: 'auto',
        borderRadius: '5px',
        padding: theme.spacing(2),
        wordBreak: 'break-word',
    },
    userBubbleVideo: {
        minWidth: '60vw',
        [theme.breakpoints.up('sm')]: {
            minWidth: '45vw',
        },
        [theme.breakpoints.up('md')]: {
            minWidth: '30vw',
        },
    },
    currentUserBubble: {
        background: theme.palette.primary.main,
        alignSelf: 'flex-end',
    },
    otherUserBubble: {
        background: theme.palette.primary.important,
        alignSelf: 'flex-start',
    },
    avatar: {
        width: '2.5em',
        height: '2.5em',
        borderRadius: '50%',
        margin: theme.spacing(0,1),
    },
    first: {
        order: 1,
    },
    second: {
        order: 2,
    }
}));

export default function ChatCardMessage(props) {
    const { side, firstname, lastname, picture, message, messageTexte, video, messageSenderClass, bubbleClass } = props;
    const classes = useStyles();

    const userBubble = (video) ? classes.userBubble +' '+ classes.userBubbleVideo : classes.userBubble
    return (
            <section className={(side==='left')? classes.userMessageLeft : classes.userMessageRight }>
                
                {picture ?
                    <img alt="talents-tube" src={`http://recruteur.talentstube.com/uploads/img/${picture}`} className={(side==='left')? classes.first+' '+classes.avatar : classes.second +' '+classes.avatar} />
                    :
                    <img alt="talents-tube" src='/static/images/default/account-avatar-default.svg' className={(side==='left')? classes.first +' '+ classes.avatar : classes.second+' '+classes.avatar } />
                }
                <div className={(side==='left')? classes.second : classes.first}>
                    <Typography
                        className={classes.messageSender +' '+ messageSenderClass}
                    >
                        {firstname + ' ' + lastname}
                    </Typography>
                    <div className={userBubble + ' ' + bubbleClass}>
                        <Typography
                            className={classes.messageContent}
                        >
                            {message}
                            {messageTexte}
                        </Typography>
                    </div>
                </div>
            </section>
    )
}


