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 React.ReactElement
 */
export default function Comment({ msg, draft, active, setActive, onStartEditing, postComment }) {
  const [visitor] = useVisitor();
  /** @type {React.MutableRefObject<HTMLDivElement?>} */
  const embedRef = useRef(null);
  /** @type {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.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..." />
      }
      <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 {React.CSSProperties}
 */
const linkStyle = {
  cursor: 'pointer'
};