import { useEffect, useRef, useState } from 'react'

import MessageInput from './MessageInput'
import Avatar from './Avatar'
import { UserLink } from './UserInfo'
import Button from './Button'

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

import { chatItemStyle } from './helpers/BubbleStyle'
import { useVisitor } from './VisitorContext'

/**
 * @param {{
    visitor: import('../client').SecureUser,
    msg: import('../client').Message,
    draft: string,
    active: number,
    setActive: Function,
    onStartEditing: Function,
    postComment: function({body:string, attach: string | File}) : void
  }} props props
 * @returns import('react').ReactElement
 */
export default function Comment({ msg, draft, active, setActive, onStartEditing, postComment }) {
  const [visitor] = useVisitor()
  /** @type {import('react').MutableRefObject<HTMLDivElement?>} */
  const embedRef = useRef(null)
  /** @type {import('react').MutableRefObject<HTMLDivElement?>} */
  const msgRef = useRef(null)
  const [author] = useState(msg.user)
  useEffect(() => {
    if (msgRef.current && embedRef.current) {
      embedUrls(msgRef.current.querySelectorAll('a'), embedRef.current)
      if (!embedRef.current.hasChildNodes()) {
        embedRef.current.style.display = 'none'
      }
    }
  }, [])
  return (
    <div style={chatItemStyle(visitor, msg)}>
      <div className="msg-header">
        <Avatar user={author} link={author.uri}>
          <div className="msg-ts">
            {
              msg.to && msg.replyto && msg.replyto > 0 &&
              (
                <UserLink user={msg.to} />
              )
            }
          </div>
        </Avatar>
      </div>
      {
        msg.body &&
        <div className={visitor && visitor.uid === msg.user.uid ? 'msg-bubble msg-bubble-my' : 'msg-bubble'}>
          <div ref={msgRef}>
            <p dangerouslySetInnerHTML={{ __html: format(msg.body, msg.mid.toString(), (msg.tags || []).indexOf('code') >= 0) }} />
          </div>
        </div>
      }
      {
        msg.photo &&
        <div className="msg-media">
          <a href={`//i.juick.com/p/${msg.mid}-${msg.rid}.${msg.attach}`} data-fname={`${msg.mid}-${msg.rid}.${msg.attach}`}>
            <img src={`//i.juick.com/photos-512/${msg.mid}-${msg.rid}.${msg.attach}`} alt="" />
          </a>
        </div>
      }
      <div className="embedContainer" ref={embedRef} />
      {
        active === msg.rid && <MessageInput text={draft || ''} onSend={postComment} placeholder="Write a comment..." />
      }
      {visitor && visitor.uid > 0 &&
        <div className="msg-links">
          {
            visitor.uid > 0 ? (
              <>
                {active === msg.rid || <span style={linkStyle} onClick={() => setActive(msg.rid)}>Reply</span>}
                {
                  visitor.uid == msg.user.uid &&
                  <>
                    <span>&nbsp;&middot;&nbsp;</span>
                    <span style={linkStyle} onClick={() => onStartEditing(msg)}>Edit</span>
                  </>
                }
              </>
            ) : (
              <>
                <span>&nbsp;&middot;&nbsp;</span>{active === msg.rid || <Button>Reply</Button>}
              </>
            )
          }
        </div>
      }
    </div>
  )
}
/**
 * @type {import('react').CSSProperties}
 */
const linkStyle = {
  cursor: 'pointer'
}