import React, { Fragment, memo, useEffect, useRef } from 'react'

import dayjs from 'dayjs'
import utc from 'dayjs/plugin/utc'
dayjs.extend(utc)
import relativeTime from 'dayjs/plugin/relativeTime'
dayjs.extend(relativeTime)

import { Link } from 'react-router-dom'
import Icon from './Icon'
import Avatar from './Avatar'
import { UserLink } from './UserInfo'

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

/**
 * @callback ToggleSubscriptionCallback
 * @param { import('../client').Message } message
 */

/**
 * @typedef {object} MessageProps
 * @property { import('../client').Message } data data
 * @property {boolean} isThread
 * @property {ToggleSubscriptionCallback} onToggleSubscription
 */

/**
 * Message component
 * @param {React.PropsWithChildren<{}> & MessageProps} props props
 */
export default function Message({ data, isThread, onToggleSubscription, children }) {
    const [visitor] = useVisitor()
    const isCode = (data.tags || []).indexOf('code') >= 0
    const likesSummary = data.likes ? `${data.likes}` : 'Recommend'
    const commentsSummary = data.replies ? `${data.replies}` : 'Comment'
    /**
     * @type {React.MutableRefObject<HTMLDivElement?>}
     */
    const embedRef = useRef(null)
    /**
     * @type {React.MutableRefObject<HTMLDivElement?>}
     */
    const msgRef = useRef(null)
    useEffect(() => {
        const msg = msgRef.current
        const embed = embedRef.current
        if (msg && embed) {
            embedUrls(msg.querySelectorAll('a'), embed)
            if (!embed.hasChildNodes()) {
                embed.style.display = 'none'
            }
        }
    }, [])
    const canComment = data.user && visitor.uid === data.user.uid || !data.ReadOnly && visitor.uid > 0
    || !data.ReadOnly && !isThread
    return (
        <div className="msg-cont">
            <Recommendations forMessage={data} />
            <header className="h">
                {
                    data.user &&
                    <Avatar user={data.user}>
                        <div className="msg-ts">
                            <Link to={`/${data.user.uname}/${data.mid}`} state={{ data: data }}>
                                <time dateTime={data.timestamp}
                                    title={dayjs.utc(data.timestamp).local().format('lll')}>
                                    {dayjs.utc(data.timestamp).fromNow()}
                                </time>
                            </Link>
                            {
                                visitor.uid == data.user.uid &&
                                <>
                                    <span>&nbsp;&middot;&nbsp;</span>
                                    <Link to={{
                                        pathname: '/post',
                                    }} state={{ data: data }}>Edit</Link>
                                </>
                            }
                        </div>
                    </Avatar>
                }
            </header>
            {
                data.body && data.user && data.mid &&
                <div className="msg-txt" ref={msgRef}>
                    <TagsList user={data.user} data={data.tags || []} />
                    <MessageContainer isCode={isCode} data={{ __html: format(data.body, data.mid.toString(), isCode) }} />
                </div>
            }
            {
                data.photo && data.attachment && data.attachment.small &&
                <div className="msg-media">
                    <a href={`https://i.juick.com/p/${data.mid}.${data.attach}`} data-fname={`${data.mid}.${data.attach}`}>
                        <img src={data.attachment.small.url} width={data.attachment.small.width} height={data.attachment.small.height} alt="Message media" />
                    </a>
                </div>
            }
            <div className="embedContainer" ref={embedRef} />
            {canComment &&
                <nav className="l">
                    {data.user && visitor.uid === data.user.uid ? (
                        <Link to={`/${data.user.uname}/${data.mid}`} className="a-like msg-button"
                            state={{ data: data }}>
                            <Icon name="ei-heart" size="s" />
                            <span>{likesSummary}</span>
                        </Link>
                    ) : visitor.uid > 0 ? (
                        <Link to={'/post'} className="a-like msg-button">
                            <Icon name="ei-heart" size="s" />
                            <span>{likesSummary}</span>
                        </Link>
                    ) : (
                        <Link to="/login" className="a-login msg-button">
                            <Icon name="ei-heart" size="s" />
                            <span>{likesSummary}</span>
                        </Link>
                    )}
                    {
                        data.user && canComment && ((
                            isThread ? (
                                <a className="msg-button" onClick={() => { onToggleSubscription(data) }}>
                                    {
                                        data.subscribed ? (<>
                                            <Icon name="ei-check" size="s" />
                                            <span>Subscribed</span>
                                        </>) : (<>
                                            <Icon name="ei-eye" size="s" />
                                            <span>Subscribe</span>
                                        </>)}
                                </a>
                            ) : (
                                <Link to={`/${data.user.uname}/${data.mid}`} className="a-comment msg-button"
                                    state={{ data: data }}>
                                    <Icon name="ei-comment" size="s" />
                                    <span>{commentsSummary}</span>
                                </Link>
                            )
                        ))
                    }
                </nav>
            }
            {children}
        </div >
    )
}

/**
 * @param {{isCode: boolean, data: {__html: string}}} props props
 */
function MessageContainer({ isCode, data }) {
    return isCode ? (<pre dangerouslySetInnerHTML={data} />) : (<span dangerouslySetInnerHTML={data} />)
}

/**
 * Tags component
 * @param {{user: import('../client').User, data: string[]}} props props
 */
function Tags({ data, user }) {
    return data.length > 0 ? (
        <span className="msg-tags">
            {
                data.map((tag, index) => (
                    <Fragment key={tag}>
                        {index > 0 && ' '}
                        <Link key={tag} to={`/${user.uname}?tag=${tag}`} title={tag}>
                            {tag}
                        </Link>
                    </Fragment>
                ))
            }
        </span>
    ) : null
}

const TagsList = memo(Tags)

/**
 *
 * @param {{forMessage: import('../client').Message}} props props
 */
function Recommends({ forMessage }) {
    const { recommendations } = forMessage
    const likes = forMessage.likes || 0
    return recommendations && recommendations.length > 0 && (
        <div className="msg-recomms">{'♡ by '}
            {
                recommendations.map((it, index) => (
                    <Fragment key={it.uri || it.uid}>
                        {index > 0 && ', '}
                        <UserLink key={it.uri || it.uid} user={it} />
                    </Fragment>
                ))
            }
            {
                likes > recommendations.length && (<span>&nbsp;and {likes - recommendations.length} others</span>)
            }
        </div>
    ) || null
}

const Recommendations = memo(Recommends)