import React, { useEffect, useRef } 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 { UserLink } from './UserInfo';

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

import './Message.css';

export default function Message({ data, visitor, children, ...rest }) {
    const isCode = (data.tags || []).indexOf('code') >= 0;
    const likesSummary = data.likes ? `${data.likes}` : 'Recommend';
    const commentsSummary = data.replies ? `${data.replies}` : 'Comment';
    const embedRef = useRef();
    const msgRef = useRef();
    useEffect(() => {
        if (msgRef.current) {
            embedUrls(msgRef.current.querySelectorAll('a'), embedRef.current);
            if (!embedRef.current.hasChildNodes()) {
                embedRef.current.style.display = 'none';
            }
        }
    }, []);
    return (
        <div className="msg-cont">
            <Recommendations forMessage={data} />
            <header className="h">
                <Avatar user={data.user}>
                    <div className="msg-ts">
                        <Link to={{ pathname: `/${data.user.uname}/${data.mid}`, state: { msg: data } }}>
                            <time dateTime={data.timestamp}
                                title={moment.utc(data.timestamp).local().format('lll')}>
                                {moment.utc(data.timestamp).fromNow()}
                            </time>
                        </Link>
                    </div>
                </Avatar>
                <TagsList user={data.user} data={data.tags || []} />
            </header>
            {
                data.body &&
                <div className="msg-txt" ref={msgRef}>
                    <MessageContainer isCode={isCode} data={{ __html: format(data.body, data.mid, isCode) }} />
                </div>
            }
            {
                data.photo &&
                <div className="msg-media">
                    <a href={`//i.juick.com/p/${data.mid}.${data.attach}`} data-fname={`${data.mid}.${data.attach}`}>
                        <img src={`//i.juick.com/photos-512/${data.mid}.${data.attach}`} alt="" />
                    </a>
                </div>
            }
            <div className="embedContainer" ref={embedRef} />
            <nav className="l">
                {visitor.uid === data.user.uid ? (
                    <Link to={{ pathname: `/${data.user.uname}/${data.mid}` }} className="a-like msg-button">
                        <Icon name="ei-heart" size="s" />
                        <span>{likesSummary}</span>
                    </Link>
                ) : visitor.uid > 0 ? (
                    <Link to={{ pathname: '/post', search: `?body=!+%23${data.mid}` }} className="a-like msg-button">
                        <Icon name="ei-heart" size="s" />
                        <span>{likesSummary}</span>
                    </Link>
                ) : (
                            <a href="/login" className="a-login msg-button">
                                <Icon name="ei-heart" size="s" />
                                <span>{likesSummary}</span>
                            </a>
                        )}
                {!data.ReadOnly | (visitor.uid === data.user.uid) && (
                    <>
                        <Link to={{ pathname: `/${data.user.uname}/${data.mid}`, state: { msg: data } }} className="a-comment msg-button">
                            <Icon name="ei-comment" size="s" />
                            <span>{commentsSummary}</span>
                        </Link>
                    </>
                )}
            </nav>
            {children}
        </div>
    );
}

function MessageContainer({ isCode, data }) {
    return isCode ? (<pre dangerouslySetInnerHTML={data} />) : (<p dangerouslySetInnerHTML={data} />);
}

function Tags({ data, user, ...rest }) {
    return data.length > 0 && (
        <div className="msg-tags">
            {
                data.map(tag => {
                    return (<Link key={tag} to={{ pathname: `/${user.uname}`, search: `?tag=${tag}` }} title={tag}>{tag}</Link>);
                }).reduce((prev, curr) => [prev, ', ', curr])
            }
        </div>
    );
}

const TagsList = React.memo(Tags);

function Recommends({ forMessage, ...rest }) {
    const { likes, recommendations } = forMessage;
    return recommendations && recommendations.length > 0 && (
        <div className="msg-recomms">{'♡ by '}
            {
                recommendations.map(it => (
                    <UserLink key={it.uri || it.uid} user={it} />
                )).reduce((prev, curr) => [prev, ', ', curr])
            }
            {
                likes > recommendations.length && (<span>&nbsp;and {likes - recommendations.length} others</span>)
            }
        </div>
    ) || null;
}

const Recommendations = React.memo(Recommends);

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

MessageContainer.propTypes = {
    isCode: PropTypes.bool.isRequired,
    data: PropTypes.object.isRequired
};

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