import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import moment from 'moment';

import { UserType, MessageType } from './Types';
import Icon from './Icon';
import Avatar from './Avatar';

import { format } from '../utils/embed';

export default function Message({ data, visitor, children, ...rest }) {
    return (
        <div className="msg-cont" itemProp="blogPost" itemScope="" itemType="http://schema.org/BlogPosting" itemRef="org">
            <header className="h">
                <span itemProp="author" itemScope="" itemType="http://schema.org/Person">
                    <Link to={{ pathname: `/${data.user.uname}/` }} itemProp="url" rel="author">
                        <span itemProp="name">{data.user.uname}</span>
                    </Link>
                </span>
                <Avatar user={data.user} />
                <div className="msg-ts">
                    <Link to={{ pathname: `/${data.user.uname}/${data.mid}`, state: {msg: data} }}>
                        <time itemProp="datePublished dateModified" itemType="http://schema.org/Date" dateTime={data.timestamp}
                            title={moment.utc(data.timestamp).local().format('lll')}>
                            {moment.utc(data.timestamp).fromNow()}
                        </time>
                    </Link>
                </div>
                <div className="msg-tags" itemProp="headline">
                    <Tags user={data.user} data={data.tags || []} />
                </div>
            </header>
            <div className="msg-txt">
                <p itemProp="description" dangerouslySetInnerHTML={{ __html: format(data.body, data.mid, (data.tags || []).indexOf('code') >= 0) }}></p>
            </div>
            {data.photo &&
                <p className="ir"><a href={`//i.juick.com/p/${data.mid}.${data.attach}`} data-fname={`${data.mid}.${data.attach}`}>
                    <img itemProp="image" src={`//i.juick.com/p/${data.mid}.${data.attach}`} alt="" /></a>
                </p>
            }
            <nav className="l">
                {visitor.uid === data.user.uid ? (
                    <a href={`/${data.user.uname}/${data.mid}`} className="a-like msg-button">
                        <span className="msg-button-icon">
                            <Icon name="ei-heart" size="s" />
                            {data.likes > 0 && (` ${data.likes}`)}
                        </span>
                        <span>&nbsp;Recommend</span>
                    </a>
                ) : visitor.uid > 0 ? (
                    <Link to={{pathname: "/post", search: `?body=!+%23${data.mid}`}} className="a-like msg-button">
                        <span className="msg-button-icon">
                            <Icon name="ei-heart" size="s" />
                            {data.likes > 0 && (` ${data.likes}`)}
                        </span>
                        <span>&nbsp;Recommend</span>
                    </Link>
                ) : (
                            <a href="/login" className="a-login msg-button">
                                <span className="msg-button-icon">
                                    <Icon name="ei-heart" size="s" />
                                    {data.likes > 0 && (` ${data.likes}`)}
                                </span>
                                <span>&nbsp;Recommend</span>
                            </a>
                        )}
                {!Boolean(data.ReadOnly) | (visitor.uid === data.user.uid) && (
                    <React.Fragment>
                        <Link to={{ pathname: `/${data.user.uname}/${data.mid}`, state: {msg: data} }} className="a-comment msg-button">
                            <span className="msg-button-icon">
                                <Icon name="ei-comment" size="s" />
                                {data.replies > 0 &&
                                    (Boolean(data.unread) ? (
                                        <span className="badge">${data.replies}</span>
                                    ) : (
                                            `${data.replies}`
                                        ))
                                }
                            </span>
                            <span>&nbsp;Comment</span>
                        </Link>
                        <a href="#" className="msg-menu msg-button">
                            <Icon name="ei-link" size="s" />
                            <span>&nbsp;Share</span>
                        </a>
                    </React.Fragment>
                )}
                {data.FriendsOnly && (
                    <a href="#" className="a-privacy">Открыть доступ</a>
                )}
            </nav>
            { children }
        </div>
    );
}

function Tags({ data, user, ...rest}) {
    return data && data.map(tag => {
        return (<Link key={tag} to={{ pathname: `/${user.uname}`, search: `?tag=${tag}` }} title={tag}>{tag}</Link>)
    })
}

Message.propTypes = {
    data: MessageType,
    children: PropTypes.node
};

Tags.propTypes = {
    user: UserType.isRequired,
    data: PropTypes.array
}