Proyectos de Subversion LeadersLinked - Antes de SPA

import React from 'react'
import styles from '../../mobile-chat/mobile-chat/chat/messages/messages.module.scss'

const MessageTemplate = ({ message }) => {

    const isRightPosition = message.side === "right";

    const messageRenderer = (msg) => {
        const {
            date,
            filename,
            message,
            receiver_image,
            receiver_name,
            receiver_profile,
            sender_image,
            sender_name,
            sender_profile,
            side,
            type
        } = msg;

        switch (type) {
            case "text":
                return (
                    <div
                        className={`main-message-box ${isRightPosition ? 'ta-right' : ''}`}
                        key={message}
                    >
                        <div className="messg-usr-img">
                            <a href={sender_profile}>
                                <img
                                    src={sender_image}
                                    className="cursor-pointer"
                                    alt={`${sender_name} profile image`}
                                />
                            </a>
                        </div>
                        <div className={`message-dt mw-30 border-radius ${isRightPosition ? 'bg-light-gray' : 'bg-custom-gray'} `}>
                            <div className="message-inner-dt">
                                <p className={`w-100 border-none bg-transparent ${'text-' + side}`}>
                                    {message}
                                </p>
                            </div>
                            <span className="p-1">{date}</span>
                        </div>
                    </div>
                );
            case "image":
                return (
                    <div
                        className={`main-message-box ${isRightPosition ? 'ta-right' : ''}`}
                        key={message}
                    >
                        <div className="messg-usr-img">
                            <a href={sender_profile}>
                                <img
                                    src={sender_image}
                                    className="cursor-pointer"
                                    alt={`${sender_name} profile image`}
                                />
                            </a>
                        </div>
                        <div className={`message-dt mw-30 border-radius ${isRightPosition ? 'bg-light-gray' : 'bg-custom-gray'} `}>
                            <div className="message-inner-dt">
                                <img
                                    src={filename}
                                    alt={`${sender_name} message image`}
                                />
                            </div>
                            <span className="p-1">{date}</span>
                        </div>
                    </div>
                );
            case "video":
                return (
                    <div
                        className={`main-message-box ${isRightPosition ? 'ta-right' : ''}`}
                        key={message}
                    >
                        <div className="messg-usr-img">
                            <a href={sender_profile}>
                                <img
                                    src={sender_image}
                                    className="cursor-pointer"
                                    alt={sender_name}
                                />
                            </a>
                        </div>
                        <div className={`message-dt mw-30 border-radius ${isRightPosition ? 'bg-light-gray' : 'bg-custom-gray'} `}>
                            <div className="message-inner-dt">
                                <video src={filename} />
                            </div>
                            <span className="p-1">{date}</span>
                        </div>
                    </div>
                );
            case "document":
                return (
                    <div
                        className={`main-message-box ${isRightPosition ? 'ta-right' : ''}`}
                        key={message}
                    >
                        <div className="messg-usr-img">
                            <a href={sender_profile}>
                                <img
                                    src={sender_image}
                                    className="cursor-pointer"
                                    alt={sender_name}
                                />
                            </a>
                        </div>
                        <div className={`message-dt mw-30 border-radius ${isRightPosition ? 'bg-light-gray' : 'bg-custom-gray'} `}>
                            <div className="message-inner-dt">
                                <a href={filename} target="_blank" className={styles.downloadBtn}>
                                    Abrir documento
                                    <i className="fa ti-arrow-circle-down" />
                                </a>
                            </div>
                            <span className="p-1">{date}</span>
                        </div>
                    </div>
                );
            default:
                break;
        }
    };

    return messageRenderer(message)

}
export default MessageTemplate