import React, { Fragment } from 'react'
import { useSelector } from 'react-redux'
import { Typography } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import VideoVimeo from './VideoVimeo'
import ChatCardMessage from './ChatCardMessage'
import _ from "lodash"
import Ar from "lodash/array"

const useStyles = makeStyles(theme => ({
    card: {
        width: '100%',
    },
    userMessage: {
        display: 'flex',
        alignItems: 'flex-end',
    },
    messageSender: {
        fontSize: '0.9em',
        fontWeight: '300',
        color: theme.palette.primary.important,
    },
    messageContent: {
        fontWeight: '300',
        color: theme.palette.secondary.main,
    },
    messageDate: {
        fontSize: '0.8em',
        fontWeight: '300',
        color: theme.palette.primary.dark,
        padding: theme.spacing(2,0),
    },
    currentUserBubble: {
        background: theme.palette.primary.important,
        alignSelf: 'flex-end',
    },
    currentMessageSender: {
        color: theme.palette.primary.important,
    },
    otherUserBubble: {
        background: theme.palette.primary.main,
        alignSelf: 'flex-start',
    },
    otherMessageSender: {
        color: theme.palette.primary.main,
    },
    avatar: {
        width: '2.5em',
        borderRadius: '50%',
        margin: theme.spacing(0,1),
    },
    videoVimeo: {
        [theme.breakpoints.up('md')]: {
            paddingBottom: '55%',
        },

    },
}));

export default function ChatCard(props) {
    const classes = useStyles();
    const userFirstName = useSelector(state => state.user.firstname);
    const userLastName = useSelector(state => state.user.lastname);
    const userPicture = useSelector(state => state.user.picture);
    const bubbleClass = (userFirstName === props.message.sender.firstname && userLastName === props.message.sender.lastname) ? classes.currentUserBubble : classes.otherUserBubble
    const messageSenderClass = (userFirstName === props.message.sender.firstname && userLastName === props.message.sender.lastname) ? classes.currentMessageSender : classes.otherMessageSender
    const bubbleSide = (userFirstName === props.message.sender.firstname && userLastName === props.message.sender.lastname) ? 'right' : 'left'

    
    return (
        <Fragment>
            <ChatCardMessage side={bubbleSide} firstname={props.message.sender.firstname} lastname={props.message.sender.lastname} picture={userPicture} 
            video={
                (props.message.video) 
                ? true :
                 false} 
            message={
                (props.message.video) 
                ? (<VideoVimeo classesOverride={ classes.videoVimeo } videoId={Ar.last(_.split(props.message.video.cdn_url, '/'))} />) 
                : props.message.content}
            messageTexte = {props.message.content} 
            messageSenderClass={messageSenderClass} bubbleClass={bubbleClass}/>

            <Typography
                className={classes.messageDate}
                align="center"
            >
                Envoyé le  {(new Date(props.message.c_time)).toLocaleDateString("fr-FR")} à {(new Date(props.message.c_time)).toLocaleTimeString("fr-FR")}
            </Typography>
        </Fragment>
    )
}


