import React from 'react';
import { Typography } from '@material-ui/core';
import './Thread.css';

const Thread = (props) =>
  props.messages.map((m, midx) => {
    const userUid = window.localStorage.getItem('watchPartyUserUid');
    if (m.uid === '<system>') {
      return (
        <Typography variant="body2" className="thread-item system-message" key={m.id} disabled>
          {m.text}
        </Typography>
      );
    } else if (m.uid === userUid) {
      return (
        <div
          className={`thread-item ${
            midx > 0 ? (props.messages[midx - 1].uid !== m.uid ? '' : 'no-space') : ''
          }`}
          key={m.id}
        >
          {m.type === 'giphy' ? (
            <img className="my-message" alt="giphy gif" src={m.text} />
          ) : (
            <Typography variant="body1" className="my-message">
              {m.text}
            </Typography>
          )}
          <span className="time">{new Date(m.time).toLocaleTimeString()}</span>
        </div>
      );
    } else {
      return (
        <div
          className={`thread-item ${
            midx > 0 ? (props.messages[midx - 1].uid !== m.uid ? '' : 'no-space') : ''
          }`}
          key={m.id}
        >
          <Typography variant="caption" className="name">
            {midx > 0 ? (props.messages[midx - 1].uid !== m.uid ? m.name : '') : m.name}
          </Typography>
          {m.type === 'giphy' ? (
            <img className="party-message" alt="giphy gif" src={m.text} />
          ) : (
            <Typography variant="body1" className="party-message">
              {m.text}
            </Typography>
          )}
          <span className="time">{new Date(m.time).toLocaleTimeString()}</span>
        </div>
      );
    }
  });

export default Thread;