import React from 'react';
import { List, ListItem, ListItemText } from '@material-ui/core';

/**
 * Clear text message
 */
export interface Message {
  text: string;
  timestamp: Date;
}

export interface Props {
  messages: Message[];
}

export default function Messages({ messages }: Props) {
  return <List dense={true}>{generate(messages)}</List>;
}

function generate(messages: Message[]) {
  return messages.map((msg) => {
    const text = `<${formatDisplayDate(msg.timestamp)}> ${msg.text}`;

    return (
      <ListItem>
        <ListItemText key={formatDisplayDate(msg.timestamp)} primary={text} />
      </ListItem>
    );
  });
}

function formatDisplayDate(timestamp: Date): string {
  return timestamp.toLocaleString([], {
    month: 'short',
    day: 'numeric',
    hour: 'numeric',
    minute: '2-digit',
    hour12: false,
  });
}