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

import Avatar from './Avatar';
import { UserLink } from './UserInfo';
import Button from './Button';
import defaultAvatar from '../assets/av-96.png';

import MessageInput from './MessageInput';
import { fetchUserUri } from '../api';
import { chatItemStyle } from './helpers/BubbleStyle';
import { format, embedUrls } from '../utils/embed';
import { useVisitor } from './VisitorContext';

let isMounted;

/**
 * @param {{
    msg: import('../api').Message,
    draft: string,
    active: number,
    setActive: function,
    onStartEditing: function,
    postComment: function
  }} props
 */
export default function Comment({ msg, draft, active, setActive, onStartEditing, postComment }) {
  const embedRef = useRef();
  const msgRef = useRef();
  const [visitor] = useVisitor();
  const [author, setAuthor] = useState(msg.user);
  useEffect(() => {
    if (msgRef.current) {
      embedUrls(msgRef.current.querySelectorAll('a'), embedRef.current);
      if (!embedRef.current.hasChildNodes()) {
        embedRef.current.style.display = 'none';
      }
    }
  }, []);
  const userRef = useRef(author);
  useEffect(() => {
    isMounted = true;
    if (userRef.current.uri) {
      fetchUserUri(userRef.current.uri).then(remote_user => {
        if (isMounted) {
          setAuthor({
            uid: 0,
            uname: remote_user.preferredUsername,
            avatar: remote_user.icon && remote_user.icon.url,
            uri: author.uri
          });
        }
      }).catch(e => {
        setAuthor({
          uid: 0,
          uname: userRef.current.uri,
          uri: author.uri,
          avatar: defaultAvatar
        });
      });
    }
    return () => {
      isMounted = false;
    };
  }, [author.uri, msg.user]);
  return (
    <div style={chatItemStyle(visitor, msg)}>
      <div className="msg-header">
        <Avatar user={author} link={author.uri}>
          <div className="msg-ts">
            {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 data={msg} text={draft || ''} onSend={postComment}>Write a comment...</MessageInput>
      }
      <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'
};