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

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

import { Link } from 'react-router-dom';
import moment from 'moment';

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

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

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

export default function Thread(props) {
  const [message, setMessage] = useState(props.location.state || {});
  const [replies, setReplies] = useState([]);
  const [loading, setLoading] = useState(false);
  const [active, setActive] = useState(0);
  useEffect(() => {
    if (props.connection) {
      props.connection.addEventListener('msg', onReply);
    }
    setActive(0);
    loadReplies();
    return () => {
      if (props.connection) {
        props.connection.removeEventListener('msg', onReply);
      }
    }
  }, [props.connection]);
  let loadReplies = () => {
    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 = (json) => {
    const msg = JSON.parse(json.data);
    if (msg.mid == message.mid) {
      setReplies([...this.state.replies, msg]);
    }
  }
  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">
              <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 }} />
                    :
                    <div className="msg-txt">
                      <p dangerouslySetInnerHTML={{ __html: format(msg.body, msg.mid, (msg.tags || []).indexOf('code') >= 0) }} />
                    </div>
                }
                {
                  msg.photo &&
                  <p className="ir"><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>
                  </p>
                }
                <div className="msg-links">
                  {
                    props.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>
            </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
};