Proyectos de Subversion LeadersLinked - Antes de SPA

import React from "react";
import parse from "html-react-parser";
import styled from "styled-components";

const StyledChatImgMessage = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  position: initial !important;
  transform: initial !important;
  .chat_image_container {
    video {
      width: 150px;
      outline: none;
    }
    img {
      width: 150px;
      max-height: 200px;
    }
    .pdf {
      width: 40px;
    }
  }
  .chat_image__download_button {
    margin-left: 0.5rem;
    .fa {
      font-size: 1.5rem;
      color: black;
    }
  }
`;

const MessageTemplate = ({ message }) => {
  const senderName = (message) => {
    if (message.type === "group") {
      return message.u === 1 ? "" : message.user_name;
    }
  };
  switch (message.mtype) {
    case "text":
      return (
        <li
          key={message.id}
          className={`clearfix ${
            message.u === 1 ? "odd" : ""
          } m-t-10 conversers${message.u}`}
        >
          <div
            className="conversation-text"
            data-toggle="tooltip"
            data-placement="left"
            data-html="true"
          >
            <div className="ctext-wrap">
              {senderName(message)}
              <p className="">
                {parse(emojione.shortnameToImage(message.m))}
                <br />
                <i className="text-right">{message.time}</i>
              </p>
            </div>
          </div>
        </li>
      );
    case "image":
      return (
        <li
          key={message.id}
          className={`clearfix ${
            message.u === 1 ? "odd" : ""
          } m-t-10 conversers${message.u}`}
        >
          <div
            className="conversation-text"
            data-toggle="tooltip"
            data-placement="left"
            data-html="true"
          >
            <div className="ctext-wrap">
              {senderName(message)}
              <StyledChatImgMessage>
                <div className="chat_image_container">
                  <img src={message.m} alt="chat_image" />
                </div>
                {message.u === 1 ? (
                  ""
                ) : (
                  <a
                    href={message.m}
                    target="_blank"
                    className="chat_image__download_button"
                  >
                    <i className="fa ti-arrow-circle-down"></i>
                  </a>
                )}
              </StyledChatImgMessage>
              <br />
              <i className="text-right">{message.time}</i>
            </div>
          </div>
        </li>
      );
    case "video":
      return (
        <li
          key={message.id}
          className={`clearfix ${
            message.u === 1 ? "odd" : ""
          } m-t-10 conversers${message.u}`}
        >
          <div
            className="conversation-text"
            data-toggle="tooltip"
            data-placement="left"
            data-html="true"
          >
            <div className="ctext-wrap">
              {senderName(message)}
              <StyledChatImgMessage>
                <div className="chat_image_container">
                  <video src={message.m} preload="none" controls></video>
                </div>
                {message.u === 1 ? (
                  ""
                ) : (
                  <a
                    href={message.m}
                    target="_blank"
                    className="chat_image__download_button"
                  >
                    <i className="fa ti-arrow-circle-down"></i>
                  </a>
                )}
              </StyledChatImgMessage>
              <br />
              <i className="text-right">{message.time}</i>
            </div>
          </div>
        </li>
      );
    case "document":
      return (
        <li
          key={message.id}
          className={`clearfix ${
            message.u === 1 ? "odd" : ""
          } m-t-10 conversers${message.u}`}
        >
          <div
            className="conversation-text"
            data-toggle="tooltip"
            data-placement="left"
            data-html="true"
          >
            <div className="ctext-wrap">
              {senderName(message)}
              <StyledChatImgMessage>
                <div className="chat_image_container">
                  <img
                    className="pdf"
                    src="/storage/type/default/filename/pdf.png"
                    alt="pdf"
                  />
                </div>
                {message.u === 1 ? (
                  ""
                ) : (
                  <a
                    href={message.m}
                    target="_blank"
                    className="chat_image__download_button"
                  >
                    <i className="fa ti-arrow-circle-down"></i>
                  </a>
                )}
              </StyledChatImgMessage>
              <br />
              <i className="text-right">{message.time}</i>
            </div>
          </div>
        </li>
      );
    default:
      return (
        <li
          key={message.id}
          className={`clearfix ${
            message.u === 1 ? "odd" : ""
          } m-t-10 conversers${message.u}`}
        >
          <div
            className="conversation-text"
            data-toggle="tooltip"
            data-placement="left"
            data-html="true"
          >
            <div className="ctext-wrap">
              {senderName(message)}
              <p className="">
                {message.mtype}
                <br />
                <i className="text-right">{message.time}</i>
              </p>
            </div>
          </div>
        </li>
      );
  }
};

export default MessageTemplate;