import React from 'react';
import PropTypes from 'prop-types';
import ReactMarkdown from 'react-markdown';

export default class Message extends React.Component {
  render() {
    const msg = this.props.data;
    return (
    <article itemProp="blogPost" itemScope="" itemType="http://schema.org/BlogPosting" itemRef="org">
      <header className="h">
        <span itemProp="author" itemScope="" itemType="http://schema.org/Person">
            <a href={`/${msg.user.uname}/`} itemProp="url" rel="author"><span itemProp="name">{ msg.user.uname }</span></a>
        </span>
        <div className="msg-avatar"><a href={`/${msg.user.uname }/`}>
            <img src={`//i.juick.com/a/${msg.user.uid}.png`} alt={`${msg.user.uname}`} /></a>
        </div>
        <div className="msg-ts">
            <a href={`/${msg.user.uname}/${msg.mid}`}>
                <time itemProp="datePublished dateModified" itemType="http://schema.org/Date" dateTime={msg.timestamp}
                      title={msg.timestamp}>
                    {msg.timestamp}
                </time>
            </a>
        </div>
        <div className="msg-tags" itemProp="headline">
            <Tags data={msg.tags || []} />
        </div>
      </header>
      <ReactMarkdown source={msg.body}/>
      { msg.photo &&
      <p className="ir"><a href={`//i.juick.com/p/${msg.mid}.${msg.attach}`} data-fname={`${msg.mid}.${msg.attach}`}>
        <img itemProp="image" src={`//i.juick.com/p/${msg.mid}.${msg.attach}`} alt=""/></a>
      </p>
      }
    </article>
    );
  }
}

function Tags(props) {
    return props.data && props.data.map(tag => { return (<a key={tag} href={`/tag/${ tag}`} title={ tag }>{ tag }</a>) })
}

Message.propTypes = {
    data: PropTypes.shape({
    mid: PropTypes.number.isRequired,
    user: PropTypes.shape({
      uid: PropTypes.number.isRequired,
      uname: PropTypes.string.isRequired
    }),
    timestamp: PropTypes.string.isRequired,
    body: PropTypes.string
    })
};