import React, { useEffect, useState, useRef, useCallback } from 'react';
import PropTypes from 'prop-types';

import ReactRouterPropTypes from 'react-router-prop-types';
import { UserType, MessageType } from './Types';

import Message from './Message';
import MessageInput from './MessageInput';
import Spinner from './Spinner';
import Avatar from './Avatar';
import Button from './Button';

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

import { getMessages, comment, markReadTracker } from '../api';

function Comment({ msg, visitor, active, setActive, postComment }) {
  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">
      <div className="msg-header">
        <Avatar user={msg.user}>
          <div className="msg-ts">
            {msg.replyto > 0 &&
              (
                <a href={`#${msg.replyto}`} className="info-avatar"><img src={msg.to.avatar} /> {msg.to.uname}&nbsp;</a>
              )}
          </div>
        </Avatar>
      </div>
      {
        msg.html ? <div className="msg-txt" dangerouslySetInnerHTML={{ __html: msg.body }} ref={msgRef} />
          :
          <div className="msg-txt" ref={msgRef}>
            <p dangerouslySetInnerHTML={{ __html: format(msg.body, msg.mid, (msg.tags || []).indexOf('code') >= 0) }} />
          </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/p/${msg.mid}-${msg.rid}.${msg.attach}`} alt="" />
          </a>
        </div>
      }
      <div className="embedContainer" ref={embedRef} />
      <div className="msg-links">
        {
          visitor.uid > 0 ? (
            <>
              {active === msg.rid || <span style={linkStyle} onClick={() => setActive(msg.rid)}>Reply</span>}
              {active === msg.rid && <MessageInput data={msg} onSend={postComment}>Write a comment...</MessageInput>}
            </>
          ) : (
              <>
                <span>&nbsp;&middot;&nbsp;</span>{active === msg.rid || <Button>Reply</Button>}
              </>
            )
        }
      </div>
    </div>
  );
}

Comment.propTypes = {
  msg: MessageType.isRequired,
  visitor: UserType.isRequired,
  active: PropTypes.number.isRequired,
  setActive: PropTypes.func.isRequired,
  postComment: PropTypes.func.isRequired
};

export default function Thread(props) {
  const [message, setMessage] = useState((props.location.state || {}).msg || {});
  const [replies, setReplies] = useState([]);
  const [loading, setLoading] = useState(false);
  const [active, setActive] = useState(0);
  useEffect(() => {
    setActive(0);
    loadReplies();
  }, []);
  useEffect(() => {    
    if (props.connection.addEventListener && message.mid) {
      props.connection.addEventListener('msg', onReply);
    };
    
    return () => {
      if (props.connection.removeEventListener && message.mid) {
        props.connection.removeEventListener('msg', onReply);
      }
    }
  }, [props.connection, message.mid]);

  let loadReplies = useCallback(() => {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;

    setReplies([]);
    setLoading(true);
    const { mid } = props.match.params;
    let params = {
      mid: mid
    };
    if (props.visitor && props.visitor.hash) {
      params.hash = props.visitor.hash;
    }
    getMessages('/api/thread', params)
      .then(response => {
        setMessage(response.data.shift());
        setReplies(response.data);
        setLoading(false);
        setActive(0);
      }
      ).catch(ex => {
        console.log(ex);
      });
  }, []);
  let onReply = useCallback((json) => {
    const msg = JSON.parse(json.data);
    if (msg.mid == message.mid) {
      setReplies(oldReplies => {
        return [...oldReplies, msg];
      });
    }
  }, [message]);
  let postComment = (template) => {
    const { mid, rid, body, attach } = template;
    comment(mid, rid, body, attach).then(res => {
      loadReplies();
    })
      .catch(console.log);
  };

  const loaders = Math.min(message.replies || 0, 10);
  return (
    <>
      {
        message.mid ? (
          <Message data={message} visitor={props.visitor}>
            {active === (message.rid || 0) && <MessageInput data={message} onSend={postComment}>Write a comment...</MessageInput>}
          </Message>
        ) : (
            <Spinner />
          )
      }
      <ul id="replies">
        {
          !loading ? replies.map((msg) => (
            <li id={msg.rid} key={msg.rid} className="msg">
              <Comment msg={msg} visitor={props.visitor} active={active} setActive={setActive} postComment={postComment} />
            </li>
          )) : (
              <>
                {Array(loaders).fill().map((it, i) => <Spinner key={i} />)}
              </>
            )
        }
      </ul>
    </>
  );
}

const linkStyle = {
  cursor: 'pointer'
};

Thread.propTypes = {
  location: ReactRouterPropTypes.location,
  history: ReactRouterPropTypes.history,
  match: ReactRouterPropTypes.match,
  visitor: UserType.isRequired,
  connection: PropTypes.object.isRequired
};